chore(test): refactored custom domain and generel settings tests

Browser autofill was interfering with the custom time selection input.
Added autoComplete='off' to prevent browser from suggesting values.

Fixes #5875

frontend/package.json

@@ -51,7 +51,7 @@
     "@signozhq/design-tokens": "2.1.4",
     "@signozhq/icons": "0.4.0",
     "@signozhq/resizable": "0.0.2",
-    "@signozhq/ui": "0.0.19",
+    "@signozhq/ui": "0.0.18",
     "@tanstack/react-table": "8.21.3",
     "@tanstack/react-virtual": "3.13.22",
     "@uiw/codemirror-theme-copilot": "4.23.11",

frontend/pnpm-lock.yaml

@@ -89,8 +89,8 @@ importers:
         specifier: 0.0.2
         version: 0.0.2(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@signozhq/ui':
-        specifier: 0.0.19
-        version: 0.0.19(@emotion/is-prop-valid@1.2.0)(@signozhq/icons@0.4.0)(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react-router-dom@5.3.4(react@18.2.0))(react-router@6.27.0(react@18.2.0))(react@18.2.0)
+        specifier: 0.0.18
+        version: 0.0.18(@emotion/is-prop-valid@1.2.0)(@signozhq/icons@0.4.0)(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react-router-dom@5.3.4(react@18.2.0))(react-router@6.27.0(react@18.2.0))(react@18.2.0)
       '@tanstack/react-table':
         specifier: 8.21.3
         version: 8.21.3(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
@@ -1907,105 +1907,89 @@ packages:
     resolution: {integrity: sha512-excjX8DfsIcJ10x1Kzr4RcWe1edC9PquDRRPx3YVCvQv+U5p7Yin2s32ftzikXojb1PIFc/9Mt28/y+iRklkrw==}
     cpu: [arm64]
     os: [linux]
-    libc: [glibc]
 
   '@img/sharp-libvips-linux-arm@1.2.4':
     resolution: {integrity: sha512-bFI7xcKFELdiNCVov8e44Ia4u2byA+l3XtsAj+Q8tfCwO6BQ8iDojYdvoPMqsKDkuoOo+X6HZA0s0q11ANMQ8A==}
     cpu: [arm]
     os: [linux]
-    libc: [glibc]
 
   '@img/sharp-libvips-linux-ppc64@1.2.4':
     resolution: {integrity: sha512-FMuvGijLDYG6lW+b/UvyilUWu5Ayu+3r2d1S8notiGCIyYU/76eig1UfMmkZ7vwgOrzKzlQbFSuQfgm7GYUPpA==}
     cpu: [ppc64]
     os: [linux]
-    libc: [glibc]
 
   '@img/sharp-libvips-linux-riscv64@1.2.4':
     resolution: {integrity: sha512-oVDbcR4zUC0ce82teubSm+x6ETixtKZBh/qbREIOcI3cULzDyb18Sr/Wcyx7NRQeQzOiHTNbZFF1UwPS2scyGA==}
     cpu: [riscv64]
     os: [linux]
-    libc: [glibc]
 
   '@img/sharp-libvips-linux-s390x@1.2.4':
     resolution: {integrity: sha512-qmp9VrzgPgMoGZyPvrQHqk02uyjA0/QrTO26Tqk6l4ZV0MPWIW6LTkqOIov+J1yEu7MbFQaDpwdwJKhbJvuRxQ==}
     cpu: [s390x]
     os: [linux]
-    libc: [glibc]
 
   '@img/sharp-libvips-linux-x64@1.2.4':
     resolution: {integrity: sha512-tJxiiLsmHc9Ax1bz3oaOYBURTXGIRDODBqhveVHonrHJ9/+k89qbLl0bcJns+e4t4rvaNBxaEZsFtSfAdquPrw==}
     cpu: [x64]
     os: [linux]
-    libc: [glibc]
 
   '@img/sharp-libvips-linuxmusl-arm64@1.2.4':
     resolution: {integrity: sha512-FVQHuwx1IIuNow9QAbYUzJ+En8KcVm9Lk5+uGUQJHaZmMECZmOlix9HnH7n1TRkXMS0pGxIJokIVB9SuqZGGXw==}
     cpu: [arm64]
     os: [linux]
-    libc: [musl]
 
   '@img/sharp-libvips-linuxmusl-x64@1.2.4':
     resolution: {integrity: sha512-+LpyBk7L44ZIXwz/VYfglaX/okxezESc6UxDSoyo2Ks6Jxc4Y7sGjpgU9s4PMgqgjj1gZCylTieNamqA1MF7Dg==}
     cpu: [x64]
     os: [linux]
-    libc: [musl]
 
   '@img/sharp-linux-arm64@0.34.5':
     resolution: {integrity: sha512-bKQzaJRY/bkPOXyKx5EVup7qkaojECG6NLYswgktOZjaXecSAeCWiZwwiFf3/Y+O1HrauiE3FVsGxFg8c24rZg==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [arm64]
     os: [linux]
-    libc: [glibc]
 
   '@img/sharp-linux-arm@0.34.5':
     resolution: {integrity: sha512-9dLqsvwtg1uuXBGZKsxem9595+ujv0sJ6Vi8wcTANSFpwV/GONat5eCkzQo/1O6zRIkh0m/8+5BjrRr7jDUSZw==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [arm]
     os: [linux]
-    libc: [glibc]
 
   '@img/sharp-linux-ppc64@0.34.5':
     resolution: {integrity: sha512-7zznwNaqW6YtsfrGGDA6BRkISKAAE1Jo0QdpNYXNMHu2+0dTrPflTLNkpc8l7MUP5M16ZJcUvysVWWrMefZquA==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [ppc64]
     os: [linux]
-    libc: [glibc]
 
   '@img/sharp-linux-riscv64@0.34.5':
     resolution: {integrity: sha512-51gJuLPTKa7piYPaVs8GmByo7/U7/7TZOq+cnXJIHZKavIRHAP77e3N2HEl3dgiqdD/w0yUfiJnII77PuDDFdw==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [riscv64]
     os: [linux]
-    libc: [glibc]
 
   '@img/sharp-linux-s390x@0.34.5':
     resolution: {integrity: sha512-nQtCk0PdKfho3eC5MrbQoigJ2gd1CgddUMkabUj+rBevs8tZ2cULOx46E7oyX+04WGfABgIwmMC0VqieTiR4jg==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [s390x]
     os: [linux]
-    libc: [glibc]
 
   '@img/sharp-linux-x64@0.34.5':
     resolution: {integrity: sha512-MEzd8HPKxVxVenwAa+JRPwEC7QFjoPWuS5NZnBt6B3pu7EG2Ge0id1oLHZpPJdn3OQK+BQDiw9zStiHBTJQQQQ==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [x64]
     os: [linux]
-    libc: [glibc]
 
   '@img/sharp-linuxmusl-arm64@0.34.5':
     resolution: {integrity: sha512-fprJR6GtRsMt6Kyfq44IsChVZeGN97gTD331weR1ex1c1rypDEABN6Tm2xa1wE6lYb5DdEnk03NZPqA7Id21yg==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [arm64]
     os: [linux]
-    libc: [musl]
 
   '@img/sharp-linuxmusl-x64@0.34.5':
     resolution: {integrity: sha512-Jg8wNT1MUzIvhBFxViqrEhWDGzqymo3sV7z7ZsaWbZNDLXRJZoRGrjulp60YYtV4wfY8VIKcWidjojlLcWrd8Q==}
     engines: {node: ^18.17.0 || ^20.3.0 || >=21.0.0}
     cpu: [x64]
     os: [linux]
-    libc: [musl]
 
   '@img/sharp-wasm32@0.34.5':
     resolution: {integrity: sha512-OdWTEiVkY2PHwqkbBI8frFxQQFekHaSSkUIJkwzclWZe64O1X4UlUjqqqLaPbUpMOQk6FBu/HtlGXNblIs0huw==}
@@ -2360,56 +2344,48 @@ packages:
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [linux]
-    libc: [glibc]
 
   '@oxfmt/binding-linux-arm64-musl@0.47.0':
     resolution: {integrity: sha512-IxtQC/sbBi4ubbY+MdwdanRWrG9InQJVZqyMsBa5IUaQcnSg86gQme574HxXMC1p4bo4YhV99zQ+wNnGCvEgzw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [linux]
-    libc: [musl]
 
   '@oxfmt/binding-linux-ppc64-gnu@0.47.0':
     resolution: {integrity: sha512-EWXEhOMbWO0q6eJSbu0QLkU8cKi0ljlYLngeDs2Ocu/pm1rrLwyQiYzlFbdnMRURI4w9ndr1sI9rSbhlJ5o23Q==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [ppc64]
     os: [linux]
-    libc: [glibc]
 
   '@oxfmt/binding-linux-riscv64-gnu@0.47.0':
     resolution: {integrity: sha512-tZrjS11TUiDuEpRaqdk8K9F9xETRyKXfuZKmdeW+Gj7coBnm7+8sBEfyt033EAFEQSlkniAXvBLh+Qja2ioGBQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [riscv64]
     os: [linux]
-    libc: [glibc]
 
   '@oxfmt/binding-linux-riscv64-musl@0.47.0':
     resolution: {integrity: sha512-KBFy+2CFKUCZzYwX2ZOPQKck1vjQbz+hextuc19G4r0WRJwadfAeuQMQRQvB+Ivc8brlbOVg7et8K7E467440g==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [riscv64]
     os: [linux]
-    libc: [musl]
 
   '@oxfmt/binding-linux-s390x-gnu@0.47.0':
     resolution: {integrity: sha512-REUPFKVGSiK99B+9eaPhluEVglzaoj/SMykNC5SUiV2RSsBfV5lWN7Y0iCIc251Wz3GaeAGZsJ/zj3gjarxdFg==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [s390x]
     os: [linux]
-    libc: [glibc]
 
   '@oxfmt/binding-linux-x64-gnu@0.47.0':
     resolution: {integrity: sha512-KVftVSVEDeIfRW3TIeLe3aNI/iY4m1fu5mDwHcisKMZSCMKLkrhFsjowC7o9RoqNPxbbglm2+/6KAKBIts2t0Q==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [linux]
-    libc: [glibc]
 
   '@oxfmt/binding-linux-x64-musl@0.47.0':
     resolution: {integrity: sha512-DTsmGEaA2860Aq5VUyDO8/MT9NFxwVL93RnRYmpMwK6DsSkThmvEpqoUDDljziEpAedMRG19SCogrNbINSbLUQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [linux]
-    libc: [musl]
 
   '@oxfmt/binding-openharmony-arm64@0.47.0':
     resolution: {integrity: sha512-8r5BDro7fLOBoq1JXHLVSs55OlrxQhEso4HVo0TcY7OXJUPYfjPoOaYL5us+yIwqyP9rQwN+rxuiNFSmaxSuOQ==}
@@ -2512,56 +2488,48 @@ packages:
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [linux]
-    libc: [glibc]
 
   '@oxlint/binding-linux-arm64-musl@1.62.0':
     resolution: {integrity: sha512-8eCy3FCDuWUM5hWujAv6heMvfZPbcCOU3SdQUAkixZLu5bSzOkNfirJiLGoQFO943xceOKkiQRMQNzH++jM3WA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [linux]
-    libc: [musl]
 
   '@oxlint/binding-linux-ppc64-gnu@1.62.0':
     resolution: {integrity: sha512-NjQ7K7tpTPDe9J+yq8p/s/J0E7lRCkK2uDBDqvT4XIT6f4Z0tlnr59OBg/WcrmVHER1AbrcfyxhGTXgcG8ytWg==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [ppc64]
     os: [linux]
-    libc: [glibc]
 
   '@oxlint/binding-linux-riscv64-gnu@1.62.0':
     resolution: {integrity: sha512-oKZed9gmSwze29dEt3/Wnsv6l/Ygw/FUst+8Kfpv2SGeS/glEoTGZAMQw37SVyzFV76UTHJN2snGgxK2t2+8ow==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [riscv64]
     os: [linux]
-    libc: [glibc]
 
   '@oxlint/binding-linux-riscv64-musl@1.62.0':
     resolution: {integrity: sha512-gBjBxQ+9lGpAYq+ELqw0w8QXsBnkZclFc7GRX2r0LnEVn3ZTEqeIKpKcGjucmp76Q53bvJD0i4qBWBhcfhSfGA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [riscv64]
     os: [linux]
-    libc: [musl]
 
   '@oxlint/binding-linux-s390x-gnu@1.62.0':
     resolution: {integrity: sha512-Ew2Kxs9EQ9/mbAIJ2hvocMC0wsOu6YKzStI2eFBDt+Td5O8seVC/oxgRIHqCcl5sf5ratA1nozQBAuv7tphkHg==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [s390x]
     os: [linux]
-    libc: [glibc]
 
   '@oxlint/binding-linux-x64-gnu@1.62.0':
     resolution: {integrity: sha512-5z25jcAA0gfKyVwz71A0VXgaPlocPoTAxhlv/hgoK6tlCrfoNuw7haWbDHvGMfjXhdic4EqVXGRv5XsTqFnbRQ==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [linux]
-    libc: [glibc]
 
   '@oxlint/binding-linux-x64-musl@1.62.0':
     resolution: {integrity: sha512-IWpHmMB6ZDllPvqWDkG6AmXrN7JF5e/c4g/0PuURsmlK+vHoYZPB70rr4u1bn3I4LsKCSpqqfveyx6UCOC8wdg==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [linux]
-    libc: [musl]
 
   '@oxlint/binding-openharmony-arm64@1.62.0':
     resolution: {integrity: sha512-fjlSxxrD5pA594vkyikCS9MnPRjQawW6/BLgyTYkO+73wwPlYjkcZ7LSd974l0Q2zkHQmu4DPvJFLYA7o8xrxQ==}
@@ -2616,42 +2584,36 @@ packages:
     engines: {node: '>= 10.0.0'}
     cpu: [arm]
     os: [linux]
-    libc: [glibc]
 
   '@parcel/watcher-linux-arm-musl@2.5.1':
     resolution: {integrity: sha512-6E+m/Mm1t1yhB8X412stiKFG3XykmgdIOqhjWj+VL8oHkKABfu/gjFj8DvLrYVHSBNC+/u5PeNrujiSQ1zwd1Q==}
     engines: {node: '>= 10.0.0'}
     cpu: [arm]
     os: [linux]
-    libc: [musl]
 
   '@parcel/watcher-linux-arm64-glibc@2.5.1':
     resolution: {integrity: sha512-LrGp+f02yU3BN9A+DGuY3v3bmnFUggAITBGriZHUREfNEzZh/GO06FF5u2kx8x+GBEUYfyTGamol4j3m9ANe8w==}
     engines: {node: '>= 10.0.0'}
     cpu: [arm64]
     os: [linux]
-    libc: [glibc]
 
   '@parcel/watcher-linux-arm64-musl@2.5.1':
     resolution: {integrity: sha512-cFOjABi92pMYRXS7AcQv9/M1YuKRw8SZniCDw0ssQb/noPkRzA+HBDkwmyOJYp5wXcsTrhxO0zq1U11cK9jsFg==}
     engines: {node: '>= 10.0.0'}
     cpu: [arm64]
     os: [linux]
-    libc: [musl]
 
   '@parcel/watcher-linux-x64-glibc@2.5.1':
     resolution: {integrity: sha512-GcESn8NZySmfwlTsIur+49yDqSny2IhPeZfXunQi48DMugKeZ7uy1FX83pO0X22sHntJ4Ub+9k34XQCX+oHt2A==}
     engines: {node: '>= 10.0.0'}
     cpu: [x64]
     os: [linux]
-    libc: [glibc]
 
   '@parcel/watcher-linux-x64-musl@2.5.1':
     resolution: {integrity: sha512-n0E2EQbatQ3bXhcH2D1XIAANAcTZkQICBPVaxMeaCVBtOpBZpWJuf7LwyWPSBDITb7In8mqQgJ7gH8CILCURXg==}
     engines: {node: '>= 10.0.0'}
     cpu: [x64]
     os: [linux]
-    libc: [musl]
 
   '@parcel/watcher-win32-arm64@2.5.1':
     resolution: {integrity: sha512-RFzklRvmc3PkjKjry3hLF9wD7ppR4AKcWNzH7kXR7GUe0Igb3Nz8fyPwtZCSquGrhU5HhUNDr/mKBqj7tqA2Vw==}
@@ -3512,28 +3474,24 @@ packages:
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [linux]
-    libc: [glibc]
 
   '@rolldown/binding-linux-arm64-musl@1.0.0-beta.53':
     resolution: {integrity: sha512-bGe5EBB8FVjHBR1mOLOPEFg1Lp3//7geqWkU5NIhxe+yH0W8FVrQ6WRYOap4SUTKdklD/dC4qPLREkMMQ855FA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [arm64]
     os: [linux]
-    libc: [musl]
 
   '@rolldown/binding-linux-x64-gnu@1.0.0-beta.53':
     resolution: {integrity: sha512-qL+63WKVQs1CMvFedlPt0U9PiEKJOAL/bsHMKUDS6Vp2Q+YAv/QLPu8rcvkfIMvQ0FPU2WL0aX4eWwF6e/GAnA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [linux]
-    libc: [glibc]
 
   '@rolldown/binding-linux-x64-musl@1.0.0-beta.53':
     resolution: {integrity: sha512-VGl9JIGjoJh3H8Mb+7xnVqODajBmrdOOb9lxWXdcmxyI+zjB2sux69br0hZJDTyLJfvBoYm439zPACYbCjGRmw==}
     engines: {node: ^20.19.0 || >=22.12.0}
     cpu: [x64]
     os: [linux]
-    libc: [musl]
 
   '@rolldown/binding-openharmony-arm64@1.0.0-beta.53':
     resolution: {integrity: sha512-B4iIserJXuSnNzA5xBLFUIjTfhNy7d9sq4FUMQY3GhQWGVhS2RWWzzDnkSU6MUt7/aHUrep0CdQfXUJI9D3W7A==}
@@ -3686,8 +3644,8 @@ packages:
     peerDependencies:
       react: ^18.2.0
 
-  '@signozhq/ui@0.0.19':
-    resolution: {integrity: sha512-2q6aRxN/PR4PlR2xJZAREEuvLPiDFggfFKzCW2Z5vHVVbrgnvZHWD1jPUuwszfEg0ceH3UvkwqceO7wN4uRJAA==}
+  '@signozhq/ui@0.0.18':
+    resolution: {integrity: sha512-1p3ALh76kafiz5yX7ReNKVcHDt2od7CcZD/Vx9i2adTwTeynkLJcEfVoXoJD3oh1kKTleooOiOjRyxlA7VzmSA==}
     peerDependencies:
       '@signozhq/icons': 0.3.0
       react: ^18.2.0
@@ -4308,49 +4266,41 @@ packages:
     resolution: {integrity: sha512-34gw7PjDGB9JgePJEmhEqBhWvCiiWCuXsL9hYphDF7crW7UgI05gyBAi6MF58uGcMOiOqSJ2ybEeCvHcq0BCmQ==}
     cpu: [arm64]
     os: [linux]
-    libc: [glibc]
 
   '@unrs/resolver-binding-linux-arm64-musl@1.11.1':
     resolution: {integrity: sha512-RyMIx6Uf53hhOtJDIamSbTskA99sPHS96wxVE/bJtePJJtpdKGXO1wY90oRdXuYOGOTuqjT8ACccMc4K6QmT3w==}
     cpu: [arm64]
     os: [linux]
-    libc: [musl]
 
   '@unrs/resolver-binding-linux-ppc64-gnu@1.11.1':
     resolution: {integrity: sha512-D8Vae74A4/a+mZH0FbOkFJL9DSK2R6TFPC9M+jCWYia/q2einCubX10pecpDiTmkJVUH+y8K3BZClycD8nCShA==}
     cpu: [ppc64]
     os: [linux]
-    libc: [glibc]
 
   '@unrs/resolver-binding-linux-riscv64-gnu@1.11.1':
     resolution: {integrity: sha512-frxL4OrzOWVVsOc96+V3aqTIQl1O2TjgExV4EKgRY09AJ9leZpEg8Ak9phadbuX0BA4k8U5qtvMSQQGGmaJqcQ==}
     cpu: [riscv64]
     os: [linux]
-    libc: [glibc]
 
   '@unrs/resolver-binding-linux-riscv64-musl@1.11.1':
     resolution: {integrity: sha512-mJ5vuDaIZ+l/acv01sHoXfpnyrNKOk/3aDoEdLO/Xtn9HuZlDD6jKxHlkN8ZhWyLJsRBxfv9GYM2utQ1SChKew==}
     cpu: [riscv64]
     os: [linux]
-    libc: [musl]
 
   '@unrs/resolver-binding-linux-s390x-gnu@1.11.1':
     resolution: {integrity: sha512-kELo8ebBVtb9sA7rMe1Cph4QHreByhaZ2QEADd9NzIQsYNQpt9UkM9iqr2lhGr5afh885d/cB5QeTXSbZHTYPg==}
     cpu: [s390x]
     os: [linux]
-    libc: [glibc]
 
   '@unrs/resolver-binding-linux-x64-gnu@1.11.1':
     resolution: {integrity: sha512-C3ZAHugKgovV5YvAMsxhq0gtXuwESUKc5MhEtjBpLoHPLYM+iuwSj3lflFwK3DPm68660rZ7G8BMcwSro7hD5w==}
     cpu: [x64]
     os: [linux]
-    libc: [glibc]
 
   '@unrs/resolver-binding-linux-x64-musl@1.11.1':
     resolution: {integrity: sha512-rV0YSoyhK2nZ4vEswT/QwqzqQXw5I6CjoaYMOX0TqBlWhojUf8P94mvI7nuJTeaCkkds3QE4+zS8Ko+GdXuZtA==}
     cpu: [x64]
     os: [linux]
-    libc: [musl]
 
   '@unrs/resolver-binding-wasm32-wasi@1.11.1':
     resolution: {integrity: sha512-5u4RkfxJm+Ng7IWgkzi3qrFOvLvQYnPBmjmZQ8+szTK/b31fQCnleNl1GgEt7nIsZRIf5PLhPwT0WM+q45x/UQ==}
@@ -4417,7 +4367,7 @@ packages:
     resolution: {integrity: sha512-VIcFLdRi/VYRU8OL/puL7QXMYafHmqOnwTZY50U1JPlCNj30PxCMx65c494b1K9be9hX83KVt0+gTEwTWLqToA==}
     engines: {node: ^20.19.0 || >=22.12.0}
     peerDependencies:
-      vite: ^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0
+      vite: npm:rolldown-vite@7.3.1
 
   '@webassemblyjs/ast@1.14.1':
     resolution: {integrity: sha512-nuBEDgQfm1ccRp/8bCQrx1frohyufl4JlbMMZ4P1wpeOfDhF6FQkxZJ1b/e+PLwr6X1Nhw6OLme5usuBWYBvuQ==}
@@ -7244,28 +7194,24 @@ packages:
     engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [linux]
-    libc: [glibc]
 
   lightningcss-linux-arm64-musl@1.31.1:
     resolution: {integrity: sha512-mVZ7Pg2zIbe3XlNbZJdjs86YViQFoJSpc41CbVmKBPiGmC4YrfeOyz65ms2qpAobVd7WQsbW4PdsSJEMymyIMg==}
     engines: {node: '>= 12.0.0'}
     cpu: [arm64]
     os: [linux]
-    libc: [musl]
 
   lightningcss-linux-x64-gnu@1.31.1:
     resolution: {integrity: sha512-xGlFWRMl+0KvUhgySdIaReQdB4FNudfUTARn7q0hh/V67PVGCs3ADFjw+6++kG1RNd0zdGRlEKa+T13/tQjPMA==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [linux]
-    libc: [glibc]
 
   lightningcss-linux-x64-musl@1.31.1:
     resolution: {integrity: sha512-eowF8PrKHw9LpoZii5tdZwnBcYDxRw2rRCyvAXLi34iyeYfqCQNA9rmUM0ce62NlPhCvof1+9ivRaTY6pSKDaA==}
     engines: {node: '>= 12.0.0'}
     cpu: [x64]
     os: [linux]
-    libc: [musl]
 
   lightningcss-win32-arm64-msvc@1.31.1:
     resolution: {integrity: sha512-aJReEbSEQzx1uBlQizAOBSjcmr9dCdL3XuC/6HLXAxmtErsj2ICo5yYggg1qOODQMtnjNQv2UHb9NpOuFtYe4w==}
@@ -10293,7 +10239,7 @@ packages:
       oxlint: '>=1'
       stylelint: '>=16'
       typescript: '*'
-      vite: '>=5.4.21'
+      vite: npm:rolldown-vite@7.3.1
       vls: '*'
       vti: '*'
       vue-tsc: ~2.2.10 || ^3.0.0
@@ -10322,12 +10268,12 @@ packages:
   vite-plugin-compression@0.5.1:
     resolution: {integrity: sha512-5QJKBDc+gNYVqL/skgFAP81Yuzo9R+EAf19d+EtsMF/i8kFUpNi3J/H01QD3Oo8zBQn+NzoCIFkpPLynoOzaJg==}
     peerDependencies:
-      vite: '>=2.0.0'
+      vite: npm:rolldown-vite@7.3.1
 
   vite-plugin-html@3.2.2:
     resolution: {integrity: sha512-vb9C9kcdzcIo/Oc3CLZVS03dL5pDlOFuhGlZYDCJ840BhWl/0nGeZWf3Qy7NlOayscY4Cm/QRgULCQkEZige5Q==}
     peerDependencies:
-      vite: '>=2.0.0'
+      vite: npm:rolldown-vite@7.3.1
 
   vite-plugin-image-optimizer@2.0.3:
     resolution: {integrity: sha512-1vrFOTcpSvv6DCY7h8UXab4wqMAjTJB/ndOzG/Kmj1oDOuPF6mbjkNQoGzzCEYeWGe7qU93jc8oQqvoJ57al3A==}
@@ -10335,7 +10281,7 @@ packages:
     peerDependencies:
       sharp: '>=0.34.0'
       svgo: '>=4'
-      vite: '>=5'
+      vite: npm:rolldown-vite@7.3.1
     peerDependenciesMeta:
       sharp:
         optional: true
@@ -10345,7 +10291,7 @@ packages:
   vite-tsconfig-paths@6.1.1:
     resolution: {integrity: sha512-2cihq7zliibCCZ8P9cKJrQBkfgdvcFkOOc3Y02o3GWUDLgqjWsZudaoiuOwO/gzTzy17cS5F7ZPo4bsnS4DGkg==}
     peerDependencies:
-      vite: '*'
+      vite: npm:rolldown-vite@7.3.1
 
   void-elements@3.1.0:
     resolution: {integrity: sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==}
@@ -13955,7 +13901,7 @@ snapshots:
       - react-dom
       - tailwindcss
 
-  '@signozhq/ui@0.0.19(@emotion/is-prop-valid@1.2.0)(@signozhq/icons@0.4.0)(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react-router-dom@5.3.4(react@18.2.0))(react-router@6.27.0(react@18.2.0))(react@18.2.0)':
+  '@signozhq/ui@0.0.18(@emotion/is-prop-valid@1.2.0)(@signozhq/icons@0.4.0)(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react-router-dom@5.3.4(react@18.2.0))(react-router@6.27.0(react@18.2.0))(react@18.2.0)':
     dependencies:
       '@chenglou/pretext': 0.0.5
       '@radix-ui/react-checkbox': 1.3.3(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)

frontend/src/components/Alerts/ErrorEmptyState/ErrorEmptyState.module.scss

@@ -1,31 +0,0 @@
-.emptyState {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	justify-content: center;
-	gap: 12px;
-	padding: 48px 24px;
-	text-align: center;
-}
-
-.icon {
-	color: var(--danger-background);
-}
-
-.title {
-	font-size: 16px;
-	font-weight: 500;
-	color: var(--text-vanilla-100);
-}
-
-.subtitle {
-	font-size: 14px;
-	color: var(--text-vanilla-400);
-	max-width: 400px;
-}
-
-.actions {
-	display: flex;
-	gap: 8px;
-	margin-top: 4px;
-}

frontend/src/components/Alerts/ErrorEmptyState/ErrorEmptyState.tsx

@@ -1,61 +0,0 @@
-import { useCallback } from 'react';
-import { LifeBuoy, RefreshCw, TriangleAlert } from '@signozhq/icons';
-import { Button } from '@signozhq/ui/button';
-import { handleContactSupport } from 'container/Integrations/utils';
-import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
-
-import styles from './ErrorEmptyState.module.scss';
-
-interface ErrorEmptyStateProps {
-	title?: string;
-	subtitle?: string;
-	onRefresh?: () => void;
-}
-
-function ErrorEmptyState({
-	title = 'Something went wrong',
-	subtitle = 'Our team is getting on top to resolve this. Please reach out to support if the issue persists.',
-	onRefresh,
-}: ErrorEmptyStateProps): JSX.Element {
-	const { isCloudUser } = useGetTenantLicense();
-
-	const onContactSupport = useCallback((): void => {
-		handleContactSupport(isCloudUser);
-	}, [isCloudUser]);
-
-	return (
-		<div className={styles.emptyState} data-testid="error-empty-state">
-			<TriangleAlert className={styles.icon} size={32} />
-			<div className={styles.title} data-testid="error-title">
-				{title}
-			</div>
-			<div className={styles.subtitle} data-testid="error-subtitle">
-				{subtitle}
-			</div>
-			<div className={styles.actions}>
-				<Button
-					variant="solid"
-					color="secondary"
-					prefix={<LifeBuoy size={14} />}
-					onClick={onContactSupport}
-					data-testid="error-contact-support-button"
-				>
-					Contact Support
-				</Button>
-				{onRefresh && (
-					<Button
-						variant="outlined"
-						color="secondary"
-						prefix={<RefreshCw size={14} />}
-						onClick={onRefresh}
-						data-testid="error-refresh-button"
-					>
-						Refresh
-					</Button>
-				)}
-			</div>
-		</div>
-	);
-}
-
-export default ErrorEmptyState;

frontend/src/components/Alerts/ErrorEmptyState/index.ts

@@ -1 +0,0 @@
-export { default } from './ErrorEmptyState';

frontend/src/components/Alerts/LabelColumn/LabelColumn.module.scss

@@ -1,36 +0,0 @@
-.labelColumn {
-	display: flex;
-	gap: 4px;
-	align-items: center;
-	overflow-x: auto;
-	max-width: 100%;
-}
-
-.labelBadge {
-	cursor: default;
-	font-size: 12px;
-
-	--badge-display: inline;
-
-	max-width: 180px;
-	min-width: 100px;
-	text-overflow: ellipsis;
-}
-
-.labelPopover {
-	display: flex;
-	flex-direction: column;
-	gap: 6px;
-	padding: 8px;
-	max-height: 300px;
-	overflow-y: auto;
-}
-
-.labelBadgePopover {
-	font-size: 12px;
-}
-
-.labelValue {
-	text-overflow: ellipsis;
-	overflow: hidden;
-}

frontend/src/components/Alerts/LabelColumn/LabelColumn.test.tsx

@@ -1,89 +0,0 @@
-import { TooltipProvider } from '@signozhq/ui/tooltip';
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-
-import LabelColumn from './LabelColumn';
-
-function renderWithProviders(
-	ui: React.ReactElement,
-): ReturnType<typeof render> {
-	return render(<TooltipProvider>{ui}</TooltipProvider>);
-}
-
-describe('LabelColumn', () => {
-	it('should render all labels when 5 or fewer', () => {
-		const labels = ['env', 'service', 'region'];
-
-		renderWithProviders(<LabelColumn labels={labels} />);
-
-		expect(screen.getByTestId('label-tag-env')).toBeInTheDocument();
-		expect(screen.getByTestId('label-tag-service')).toBeInTheDocument();
-		expect(screen.getByTestId('label-tag-region')).toBeInTheDocument();
-	});
-
-	it('should truncate labels and show +N badge when more than 5 labels', () => {
-		const labels = ['env', 'service', 'region', 'team', 'owner', 'version'];
-
-		renderWithProviders(<LabelColumn labels={labels} />);
-
-		// First 3 visible
-		expect(screen.getByTestId('label-tag-env')).toBeInTheDocument();
-		expect(screen.getByTestId('label-tag-service')).toBeInTheDocument();
-		expect(screen.getByTestId('label-tag-region')).toBeInTheDocument();
-
-		// +3 badge for remaining
-		expect(screen.getByTestId('label-overflow-badge')).toHaveTextContent('+3');
-	});
-
-	it('should render label with value when value prop provided', () => {
-		const labels = ['env'];
-		const value = { env: 'production' };
-
-		renderWithProviders(<LabelColumn labels={labels} value={value} />);
-
-		expect(screen.getByTestId('label-tag-env')).toHaveTextContent(
-			'env: production',
-		);
-	});
-
-	it('should render labels without value when value is not provided for that label', () => {
-		const labels = ['env', 'service'];
-		const value = { env: 'production' };
-
-		renderWithProviders(<LabelColumn labels={labels} value={value} />);
-
-		expect(screen.getByTestId('label-tag-env')).toHaveTextContent(
-			'env: production',
-		);
-		expect(screen.getByTestId('label-tag-service')).toHaveTextContent('service');
-	});
-
-	it('should show popover with all labels when clicking +N badge', async () => {
-		const user = userEvent.setup();
-		const labels = ['env', 'service', 'region', 'team', 'owner', 'version'];
-
-		renderWithProviders(<LabelColumn labels={labels} />);
-
-		await user.click(screen.getByTestId('label-overflow-badge'));
-
-		// All labels should appear in popover
-		expect(screen.getByTestId('label-popover')).toBeInTheDocument();
-		expect(screen.getByTestId('label-popover-item-env')).toBeInTheDocument();
-		expect(screen.getByTestId('label-popover-item-version')).toBeInTheDocument();
-	});
-
-	it('should render empty when no labels provided', () => {
-		renderWithProviders(<LabelColumn labels={[]} />);
-
-		const column = screen.getByTestId('label-column');
-		expect(column.children).toHaveLength(0);
-	});
-
-	it('should use primary color by default', () => {
-		const labels = ['env'];
-
-		renderWithProviders(<LabelColumn labels={labels} />);
-
-		expect(screen.getByTestId('label-tag-env')).toBeInTheDocument();
-	});
-});

frontend/src/components/Alerts/LabelColumn/LabelColumn.tsx

@@ -1,80 +0,0 @@
-import { Badge } from '@signozhq/ui/badge';
-import { Popover, PopoverContent, PopoverTrigger } from '@signozhq/ui/popover';
-
-import LabelTag from './LabelTag';
-
-import styles from './LabelColumn.module.scss';
-
-export interface LabelColumnProps {
-	labels: string[];
-	color?:
-		| 'primary'
-		| 'secondary'
-		| 'success'
-		| 'error'
-		| 'warning'
-		| 'robin'
-		| 'forest'
-		| 'amber'
-		| 'sienna'
-		| 'cherry'
-		| 'sakura'
-		| 'aqua'
-		| 'vanilla';
-	value?: { [key: string]: string };
-}
-
-const MAX_LABELS_TO_DISPLAY = 5;
-
-function LabelColumn({
-	labels,
-	value,
-	color = 'primary',
-}: LabelColumnProps): JSX.Element {
-	const visibleLabels =
-		labels.length > MAX_LABELS_TO_DISPLAY ? labels.slice(0, 3) : labels;
-	const remainingLabels =
-		labels.length > MAX_LABELS_TO_DISPLAY ? labels.slice(3) : [];
-
-	return (
-		<div className={styles.labelColumn} data-testid="label-column">
-			{visibleLabels.map((label) => (
-				<LabelTag key={label} label={label} color={color} value={value?.[label]} />
-			))}
-			{remainingLabels.length > 0 && (
-				<Popover>
-					<PopoverTrigger asChild>
-						<Badge
-							color={color}
-							className={styles.labelBadge}
-							variant="outline"
-							data-testid="label-overflow-badge"
-						>
-							+{remainingLabels.length}
-						</Badge>
-					</PopoverTrigger>
-					<PopoverContent
-						side="bottom"
-						align="end"
-						className={styles.labelPopover}
-						data-testid="label-popover"
-					>
-						{labels.map((label) => (
-							<Badge
-								key={label}
-								color={color}
-								className={styles.labelBadgePopover}
-								variant="outline"
-								data-testid={`label-popover-item-${label}`}
-							>
-								{value?.[label] ? `${label}: ${value?.[label]}` : label}
-							</Badge>
-						))}
-					</PopoverContent>
-				</Popover>
-			)}
-		</div>
-	);
-}
-
-export default LabelColumn;

frontend/src/components/Alerts/LabelColumn/LabelTag.module.scss

@@ -1,15 +0,0 @@
-.labelBadge {
-	cursor: default;
-	font-size: 12px;
-
-	--badge-display: inline;
-
-	max-width: 180px;
-	min-width: 100px;
-	text-overflow: ellipsis;
-}
-
-.labelValue {
-	text-overflow: ellipsis;
-	overflow: hidden;
-}

frontend/src/components/Alerts/LabelColumn/LabelTag.tsx

@@ -1,42 +0,0 @@
-import { Badge } from '@signozhq/ui/badge';
-import { TooltipSimple } from '@signozhq/ui/tooltip';
-
-import styles from './LabelTag.module.scss';
-
-export interface LabelTagProps {
-	label: string;
-	color?:
-		| 'primary'
-		| 'secondary'
-		| 'success'
-		| 'error'
-		| 'warning'
-		| 'robin'
-		| 'forest'
-		| 'amber'
-		| 'sienna'
-		| 'cherry'
-		| 'sakura'
-		| 'aqua'
-		| 'vanilla';
-	value?: string;
-}
-
-function LabelTag({ label, value, color }: LabelTagProps): JSX.Element {
-	const tooltipTitle = value ? `${label}: ${value}` : label;
-
-	return (
-		<TooltipSimple title={tooltipTitle}>
-			<Badge
-				color={color}
-				className={styles.labelBadge}
-				variant="outline"
-				data-testid={`label-tag-${label}`}
-			>
-				<span className={styles.labelValue}>{tooltipTitle}</span>
-			</Badge>
-		</TooltipSimple>
-	);
-}
-
-export default LabelTag;

frontend/src/components/Alerts/LabelColumn/index.ts

@@ -1,2 +0,0 @@
-export { default } from './LabelColumn';
-export type { LabelColumnProps } from './LabelColumn';

frontend/src/components/Alerts/NoResultsEmptyState/NoResultsEmptyState.module.scss

@@ -1,30 +0,0 @@
-.emptyState {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	justify-content: center;
-	gap: 12px;
-	padding: 48px 24px;
-	text-align: center;
-}
-
-.icon {
-	color: var(--text-vanilla-400);
-}
-
-.title {
-	font-size: 16px;
-	font-weight: 500;
-	color: var(--text-vanilla-100);
-}
-
-.subtitle {
-	font-size: 14px;
-	color: var(--text-vanilla-400);
-	max-width: 400px;
-}
-
-.actions {
-	display: flex;
-	gap: 8px;
-}

frontend/src/components/Alerts/NoResultsEmptyState/NoResultsEmptyState.test.tsx

@@ -1,71 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-
-import NoResultsEmptyState from './NoResultsEmptyState';
-
-describe('NoResultsEmptyState', () => {
-	it('should render with default props', () => {
-		render(<NoResultsEmptyState />);
-
-		expect(screen.getByTestId('no-results-empty-state')).toBeInTheDocument();
-		expect(screen.getByTestId('no-results-title')).toHaveTextContent(
-			'No matching results',
-		);
-		expect(screen.getByTestId('no-results-subtitle')).toHaveTextContent(
-			'No items match your current filters. Try adjusting your search criteria.',
-		);
-	});
-
-	it('should render with custom title and subtitle', () => {
-		render(
-			<NoResultsEmptyState title="Custom Title" subtitle="Custom Subtitle" />,
-		);
-
-		expect(screen.getByTestId('no-results-title')).toHaveTextContent(
-			'Custom Title',
-		);
-		expect(screen.getByTestId('no-results-subtitle')).toHaveTextContent(
-			'Custom Subtitle',
-		);
-	});
-
-	it('should not render clear button when onClear is not provided', () => {
-		render(<NoResultsEmptyState />);
-
-		expect(
-			screen.queryByTestId('no-results-clear-button'),
-		).not.toBeInTheDocument();
-	});
-
-	it('should render clear button when onClear is provided', () => {
-		const onClear = jest.fn();
-
-		render(<NoResultsEmptyState onClear={onClear} />);
-
-		expect(screen.getByTestId('no-results-clear-button')).toBeInTheDocument();
-		expect(screen.getByTestId('no-results-clear-button')).toHaveTextContent(
-			'Clear Filters',
-		);
-	});
-
-	it('should render custom clear button text', () => {
-		render(
-			<NoResultsEmptyState onClear={jest.fn()} clearButtonText="Reset All" />,
-		);
-
-		expect(screen.getByTestId('no-results-clear-button')).toHaveTextContent(
-			'Reset All',
-		);
-	});
-
-	it('should call onClear when clear button is clicked', async () => {
-		const user = userEvent.setup();
-		const onClear = jest.fn();
-
-		render(<NoResultsEmptyState onClear={onClear} />);
-
-		await user.click(screen.getByTestId('no-results-clear-button'));
-
-		expect(onClear).toHaveBeenCalledTimes(1);
-	});
-});

frontend/src/components/Alerts/NoResultsEmptyState/NoResultsEmptyState.tsx

@@ -1,57 +0,0 @@
-import { RefreshCw, Search } from '@signozhq/icons';
-import { Button } from '@signozhq/ui/button';
-
-import styles from './NoResultsEmptyState.module.scss';
-
-interface NoResultsEmptyStateProps {
-	title?: string;
-	subtitle?: string;
-	onClear?: () => void;
-	clearButtonText?: string;
-	onRefresh?: () => void;
-}
-
-function NoResultsEmptyState({
-	title = 'No matching results',
-	subtitle = 'No items match your current filters. Try adjusting your search criteria.',
-	onClear,
-	clearButtonText = 'Clear Filters',
-	onRefresh,
-}: NoResultsEmptyStateProps): JSX.Element {
-	return (
-		<div className={styles.emptyState} data-testid="no-results-empty-state">
-			<Search className={styles.icon} size={16} />
-			<div className={styles.title} data-testid="no-results-title">
-				{title}
-			</div>
-			<div className={styles.subtitle} data-testid="no-results-subtitle">
-				{subtitle}
-			</div>
-			<div className={styles.actions}>
-				{onClear && (
-					<Button
-						variant="outlined"
-						color="secondary"
-						onClick={onClear}
-						data-testid="no-results-clear-button"
-					>
-						{clearButtonText}
-					</Button>
-				)}
-				{onRefresh && (
-					<Button
-						variant="outlined"
-						color="secondary"
-						prefix={<RefreshCw size={14} />}
-						onClick={onRefresh}
-						data-testid="no-results-refresh-button"
-					>
-						Refresh
-					</Button>
-				)}
-			</div>
-		</div>
-	);
-}
-
-export default NoResultsEmptyState;

frontend/src/components/Alerts/NoResultsEmptyState/index.ts

@@ -1 +0,0 @@
-export { default } from './NoResultsEmptyState';

frontend/src/components/Alerts/constants.ts

@@ -1,32 +0,0 @@
-import type { BadgeColor } from '@signozhq/ui/badge';
-
-export const STATE_ORDER = ['firing', 'pending', 'inactive', 'disabled'];
-export const SEVERITY_ORDER = ['critical', 'error', 'warning', 'info'];
-
-export const STATE_LABELS: Record<string, string> = {
-	firing: 'Firing',
-	pending: 'Pending',
-	inactive: 'OK',
-	disabled: 'Disabled',
-};
-
-export const STATE_COLORS: Record<string, string> = {
-	firing: 'var(--bg-cherry-500)',
-	pending: 'var(--bg-amber-500)',
-	inactive: 'var(--bg-forest-500)',
-	disabled: 'var(--l2-foreground)',
-};
-
-export const SEVERITY_COLORS: Record<string, string> = {
-	critical: 'var(--bg-cherry-500)',
-	error: 'var(--bg-cherry-400)',
-	warning: 'var(--bg-amber-500)',
-	info: 'var(--bg-robin-500)',
-};
-
-export const SEVERITY_BADGE_COLORS: Record<string, BadgeColor> = {
-	critical: 'error',
-	error: 'error',
-	warning: 'warning',
-	info: 'primary',
-};

frontend/src/components/Alerts/types.ts

@@ -1,7 +0,0 @@
-export interface FilterValue {
-	value: string;
-}
-
-export interface AlertWithLabels {
-	labels?: Record<string, string>;
-}

frontend/src/components/Alerts/utils.test.ts

@@ -1,287 +0,0 @@
-import type { SortState } from 'components/TanStackTableView/types';
-
-import type { AlertWithLabels, FilterValue } from './types';
-import { filterByLabels, searchByLabels, sortByColumn } from './utils';
-
-interface TestAlert extends AlertWithLabels {
-	name: string;
-	value: number;
-}
-
-const createAlert = (
-	name: string,
-	value: number,
-	labels?: Record<string, string>,
-): TestAlert => ({
-	name,
-	value,
-	labels,
-});
-
-describe('sortByColumn', () => {
-	const alerts: TestAlert[] = [
-		createAlert('Alert C', 3),
-		createAlert('Alert A', 1),
-		createAlert('Alert B', 2),
-	];
-
-	const getSortValue = (
-		item: TestAlert,
-		columnName: string,
-	): string | number => {
-		if (columnName === 'name') {
-			return item.name;
-		}
-		if (columnName === 'value') {
-			return item.value;
-		}
-		return '';
-	};
-
-	it('should return items unchanged when no orderBy provided', () => {
-		const result = sortByColumn(alerts, null, getSortValue);
-		expect(result).toStrictEqual(alerts);
-	});
-
-	it('should sort by string column ascending', () => {
-		const orderBy: SortState = { columnName: 'name', order: 'asc' };
-		const result = sortByColumn(alerts, orderBy, getSortValue);
-		expect(result.map((a) => a.name)).toStrictEqual([
-			'Alert A',
-			'Alert B',
-			'Alert C',
-		]);
-	});
-
-	it('should sort by string column descending', () => {
-		const orderBy: SortState = { columnName: 'name', order: 'desc' };
-		const result = sortByColumn(alerts, orderBy, getSortValue);
-		expect(result.map((a) => a.name)).toStrictEqual([
-			'Alert C',
-			'Alert B',
-			'Alert A',
-		]);
-	});
-
-	it('should sort by number column ascending', () => {
-		const orderBy: SortState = { columnName: 'value', order: 'asc' };
-		const result = sortByColumn(alerts, orderBy, getSortValue);
-		expect(result.map((a) => a.value)).toStrictEqual([1, 2, 3]);
-	});
-
-	it('should sort by number column descending', () => {
-		const orderBy: SortState = { columnName: 'value', order: 'desc' };
-		const result = sortByColumn(alerts, orderBy, getSortValue);
-		expect(result.map((a) => a.value)).toStrictEqual([3, 2, 1]);
-	});
-
-	it('should use defaultSort when orderBy is null', () => {
-		const defaultSort: SortState = { columnName: 'value', order: 'asc' };
-		const result = sortByColumn(alerts, null, getSortValue, defaultSort);
-		expect(result.map((a) => a.value)).toStrictEqual([1, 2, 3]);
-	});
-
-	it('should not mutate original array', () => {
-		const original = [...alerts];
-		const orderBy: SortState = { columnName: 'name', order: 'asc' };
-		sortByColumn(alerts, orderBy, getSortValue);
-		expect(alerts).toStrictEqual(original);
-	});
-
-	it('should handle empty array', () => {
-		const result = sortByColumn(
-			[],
-			{ columnName: 'name', order: 'asc' },
-			getSortValue,
-		);
-		expect(result).toStrictEqual([]);
-	});
-
-	it('should handle equal values', () => {
-		const duplicates = [
-			createAlert('Same', 1),
-			createAlert('Same', 1),
-			createAlert('Same', 1),
-		];
-		const orderBy: SortState = { columnName: 'name', order: 'asc' };
-		const result = sortByColumn(duplicates, orderBy, getSortValue);
-		expect(result).toHaveLength(3);
-	});
-});
-
-describe('searchByLabels', () => {
-	const alerts: TestAlert[] = [
-		createAlert('CPU High', 1, { severity: 'critical', team: 'infra' }),
-		createAlert('Memory Warning', 2, { severity: 'warning', team: 'backend' }),
-		createAlert('Disk Full', 3, { severity: 'error', region: 'us-east' }),
-		createAlert('Network Slow', 4, {}),
-		createAlert('No Labels', 5),
-	];
-
-	const getAlertName = (alert: TestAlert): string => alert.name;
-
-	it('should return all items when search is empty', () => {
-		const result = searchByLabels(alerts, '', getAlertName);
-		expect(result).toStrictEqual(alerts);
-	});
-
-	it('should return all items when search is whitespace', () => {
-		const result = searchByLabels(alerts, '   ', getAlertName);
-		expect(result).toStrictEqual(alerts);
-	});
-
-	it('should search by alert name', () => {
-		const result = searchByLabels(alerts, 'CPU', getAlertName);
-		expect(result).toHaveLength(1);
-		expect(result[0].name).toBe('CPU High');
-	});
-
-	it('should search by alert name case-insensitive', () => {
-		const result = searchByLabels(alerts, 'cpu', getAlertName);
-		expect(result).toHaveLength(1);
-		expect(result[0].name).toBe('CPU High');
-	});
-
-	it('should search by severity label', () => {
-		const result = searchByLabels(alerts, 'critical', getAlertName);
-		expect(result).toHaveLength(1);
-		expect(result[0].name).toBe('CPU High');
-	});
-
-	it('should search by any label key', () => {
-		const result = searchByLabels(alerts, 'team', getAlertName);
-		expect(result).toHaveLength(2);
-	});
-
-	it('should search by any label value', () => {
-		const result = searchByLabels(alerts, 'infra', getAlertName);
-		expect(result).toHaveLength(1);
-		expect(result[0].name).toBe('CPU High');
-	});
-
-	it('should handle alerts with no labels', () => {
-		const result = searchByLabels(alerts, 'No Labels', getAlertName);
-		expect(result).toHaveLength(1);
-		expect(result[0].name).toBe('No Labels');
-	});
-
-	it('should handle partial matches', () => {
-		const result = searchByLabels(alerts, 'warn', getAlertName);
-		expect(result).toHaveLength(1);
-		expect(result[0].name).toBe('Memory Warning');
-	});
-
-	it('should return empty for no matches', () => {
-		const result = searchByLabels(alerts, 'nonexistent', getAlertName);
-		expect(result).toStrictEqual([]);
-	});
-
-	it('should trim search text', () => {
-		const result = searchByLabels(alerts, '  CPU  ', getAlertName);
-		expect(result).toHaveLength(1);
-		expect(result[0].name).toBe('CPU High');
-	});
-});
-
-describe('filterByLabels', () => {
-	const alerts: TestAlert[] = [
-		createAlert('A1', 1, { severity: 'critical', team: 'infra', env: 'prod' }),
-		createAlert('A2', 2, { severity: 'critical', team: 'backend', env: 'prod' }),
-		createAlert('A3', 3, { severity: 'warning', team: 'infra', env: 'staging' }),
-		createAlert('A4', 4, { severity: 'info', team: 'frontend', env: 'dev' }),
-		createAlert('A5', 5, {}),
-		createAlert('A6', 6),
-	];
-
-	const createFilter = (value: string): FilterValue => ({ value });
-
-	it('should return all items when filters are empty', () => {
-		const result = filterByLabels(alerts, []);
-		expect(result).toStrictEqual(alerts);
-	});
-
-	it('should return all items when filters is null-ish', () => {
-		const result = filterByLabels(alerts, null as unknown as FilterValue[]);
-		expect(result).toStrictEqual(alerts);
-	});
-
-	it('should filter by single label', () => {
-		const filters = [createFilter('severity:critical')];
-		const result = filterByLabels(alerts, filters);
-		expect(result).toHaveLength(2);
-		expect(result.map((a) => a.name)).toStrictEqual(['A1', 'A2']);
-	});
-
-	it('should use OR logic for same key', () => {
-		const filters = [
-			createFilter('severity:critical'),
-			createFilter('severity:warning'),
-		];
-		const result = filterByLabels(alerts, filters);
-		expect(result).toHaveLength(3);
-		expect(result.map((a) => a.name)).toStrictEqual(['A1', 'A2', 'A3']);
-	});
-
-	it('should use AND logic for different keys', () => {
-		const filters = [
-			createFilter('severity:critical'),
-			createFilter('team:infra'),
-		];
-		const result = filterByLabels(alerts, filters);
-		expect(result).toHaveLength(1);
-		expect(result[0].name).toBe('A1');
-	});
-
-	it('should handle case-insensitive keys', () => {
-		const filters = [createFilter('SEVERITY:critical')];
-		const result = filterByLabels(alerts, filters);
-		expect(result).toHaveLength(2);
-	});
-
-	it('should handle case-insensitive values', () => {
-		const filters = [createFilter('severity:CRITICAL')];
-		const result = filterByLabels(alerts, filters);
-		expect(result).toHaveLength(2);
-	});
-
-	it('should trim whitespace', () => {
-		const filters = [createFilter(' severity : critical ')];
-		const result = filterByLabels(alerts, filters);
-		expect(result).toHaveLength(2);
-	});
-
-	it('should return empty for invalid filter format', () => {
-		const filters = [createFilter('invalid')];
-		const result = filterByLabels(alerts, filters);
-		expect(result).toStrictEqual([]);
-	});
-
-	it('should ignore invalid filters mixed with valid', () => {
-		const filters = [createFilter('invalid'), createFilter('severity:critical')];
-		const result = filterByLabels(alerts, filters);
-		expect(result).toHaveLength(2);
-	});
-
-	it('should exclude alerts without matching label key', () => {
-		const filters = [createFilter('nonexistent:value')];
-		const result = filterByLabels(alerts, filters);
-		expect(result).toStrictEqual([]);
-	});
-
-	it('should exclude alerts with no labels', () => {
-		const filters = [createFilter('severity:critical')];
-		const result = filterByLabels(alerts, filters);
-		expect(result.every((a) => a.labels !== undefined)).toBe(true);
-	});
-
-	it('should handle complex AND/OR combinations', () => {
-		const filters = [
-			createFilter('env:prod'),
-			createFilter('env:staging'),
-			createFilter('team:infra'),
-		];
-		const result = filterByLabels(alerts, filters);
-		expect(result).toHaveLength(2);
-		expect(result.map((a) => a.name)).toStrictEqual(['A1', 'A3']);
-	});
-});

frontend/src/components/Alerts/utils.ts

@@ -1,116 +0,0 @@
-import type { SortState } from 'components/TanStackTableView/types';
-
-import type { AlertWithLabels, FilterValue } from './types';
-
-/**
- * Generic sort function for alert-like data
- */
-export function sortByColumn<T>(
-	items: T[],
-	orderBy: SortState | null,
-	getSortValue: (item: T, columnName: string) => string | number,
-	defaultSort?: SortState,
-): T[] {
-	const sortState = orderBy ?? defaultSort;
-	if (!sortState) {
-		return items;
-	}
-
-	const { columnName, order } = sortState;
-	const multiplier = order === 'asc' ? 1 : -1;
-
-	return [...items].sort((a, b) => {
-		const aVal = getSortValue(a, columnName);
-		const bVal = getSortValue(b, columnName);
-
-		if (aVal < bVal) {
-			return -1 * multiplier;
-		}
-		if (aVal > bVal) {
-			return 1 * multiplier;
-		}
-		return 0;
-	});
-}
-
-/**
- * Search alerts/rules by name, severity, and all labels
- */
-export function searchByLabels<T extends AlertWithLabels>(
-	items: T[],
-	searchText: string,
-	getAlertName: (item: T) => string,
-): T[] {
-	if (!searchText.trim()) {
-		return items;
-	}
-
-	const value = searchText.toLowerCase().trim();
-
-	return items.filter((item) => {
-		const alertName = getAlertName(item).toLowerCase();
-		const severity = item.labels?.severity?.toLowerCase() ?? '';
-
-		const labelSearchString = Object.entries(item.labels ?? {})
-			.map(([key, val]) => `${key} ${val}`)
-			.join(' ')
-			.toLowerCase();
-
-		return (
-			alertName.includes(value) ||
-			severity.includes(value) ||
-			labelSearchString.includes(value)
-		);
-	});
-}
-
-/**
- * Filter alerts by label key:value pairs
- * Same key uses OR logic, different keys use AND logic
- */
-export function filterByLabels<T extends AlertWithLabels>(
-	items: T[],
-	selectedFilters: FilterValue[],
-): T[] {
-	if (!selectedFilters?.length) {
-		return items;
-	}
-
-	const validFilters = selectedFilters
-		.map((e) => e.value)
-		.filter((v) => v.split(':').length === 2);
-
-	if (!validFilters.length) {
-		return [];
-	}
-
-	// Group values by key - same key uses OR, different keys use AND
-	const filtersByKey = new Map<string, string[]>();
-	validFilters.forEach((f) => {
-		const [key, value] = f.split(':');
-		const trimmedKey = key.trim().toLowerCase();
-		const trimmedValue = value.trim().toLowerCase();
-		const existing = filtersByKey.get(trimmedKey) ?? [];
-		existing.push(trimmedValue);
-		filtersByKey.set(trimmedKey, existing);
-	});
-
-	return items.filter((item) => {
-		if (!item.labels) {
-			return false;
-		}
-
-		// All keys must match (AND), any value per key can match (OR)
-		return Array.from(filtersByKey.entries()).every(([filterKey, values]) => {
-			// Case-insensitive key lookup
-			const matchingKey = Object.keys(item.labels ?? {}).find(
-				(k) => k.toLowerCase() === filterKey,
-			);
-			if (!matchingKey) {
-				return false;
-			}
-			const labelValue = item.labels?.[matchingKey]?.toLowerCase();
-			return values.some((v) => labelValue === v);
-		});
-	});
-}

frontend/src/components/CustomTimePicker/CustomTimePicker.tsx

@@ -596,6 +596,7 @@ function CustomTimePicker({
 				>
 					<Input
 						ref={inputRef}
+						autoComplete="off"
 						className={cx(
 							'timeSelection-input',
 							inputStatus === CustomTimePickerInputStatus.ERROR ? 'error' : '',

frontend/src/components/HeaderRightSection/HeaderRightSection.tsx

@@ -2,7 +2,7 @@ import { useCallback, useState } from 'react';
 import { useLocation } from 'react-router-dom';
 import { Dot, Sparkles } from '@signozhq/icons';
 import { Button } from '@signozhq/ui/button';
-import { TooltipSimple } from '@signozhq/ui/tooltip';
+import { Tooltip } from '@signozhq/ui/tooltip';
 import { Popover } from 'antd';
 import logEvent from 'api/common/logEvent';
 import {
@@ -97,7 +97,7 @@ function HeaderRightSection({
 						</span>
 					) : null}
 
-					<TooltipSimple title="AI Assistant">
+					<Tooltip title="AI Assistant">
 						<Button
 							variant="solid"
 							color="secondary"
@@ -113,7 +113,7 @@ function HeaderRightSection({
 						>
 							AI Assistant
 						</Button>
-					</TooltipSimple>
+					</Tooltip>
 				</div>
 			)}
 

frontend/src/components/TanStackTableView/TanStackTable.tsx

@@ -39,7 +39,6 @@ import {
 } from './TanStackTableStateContext';
 import {
 	FlatItem,
-	SortState,
 	TableRowContext,
 	TanStackTableHandle,
 	TanStackTableProps,
@@ -101,7 +100,6 @@ function TanStackTableInner<TData>(
 		onRowClick,
 		onRowClickNewTab,
 		onRowDeactivate,
-		onSort,
 		activeRowIndex,
 		renderExpandedRow,
 		getRowCanExpand,
@@ -129,10 +127,10 @@ function TanStackTableInner<TData>(
 	const {
 		page,
 		limit,
-		setPage: internalSetPage,
-		setLimit: internalSetLimit,
+		setPage,
+		setLimit,
 		orderBy,
-		setOrderBy: internalSetOrderBy,
+		setOrderBy,
 		expanded,
 		setExpanded,
 	} = useTableParams(enableQueryParams, {
@@ -140,31 +138,6 @@ function TanStackTableInner<TData>(
 		limit: pagination?.defaultLimit,
 	});
 
-	const setPage = useCallback(
-		(p: number) => {
-			internalSetPage(p);
-			pagination?.onPageChange?.(p);
-		},
-		[internalSetPage, pagination],
-	);
-
-	const setLimit = useCallback(
-		(l: number) => {
-			internalSetLimit(l);
-			internalSetPage(1);
-			pagination?.onLimitChange?.(l);
-		},
-		[internalSetLimit, internalSetPage, pagination],
-	);
-
-	const setOrderBy = useCallback(
-		(sort: SortState | null) => {
-			internalSetOrderBy(sort);
-			onSort?.(sort);
-		},
-		[internalSetOrderBy, onSort],
-	);
-
 	const isGrouped = (groupBy?.length ?? 0) > 0;
 
 	const {
@@ -634,17 +607,14 @@ function TanStackTableInner<TData>(
 									setPage(p);
 								}}
 							/>
-							{(pagination.showPageSize ?? true) && (
-								<div className={viewStyles.paginationPageSize}>
-									<ComboboxSimple
-										testId="pagination-page-size"
-										value={limit?.toString()}
-										defaultValue="10"
-										onChange={(value): void => setLimit(+value)}
-										items={paginationPageSizeItems}
-									/>
-								</div>
-							)}
+							<div className={viewStyles.paginationPageSize}>
+								<ComboboxSimple
+									value={limit?.toString()}
+									defaultValue="10"
+									onChange={(value): void => setLimit(+value)}
+									items={paginationPageSizeItems}
+								/>
+							</div>
 							{suffixPaginationContent}
 						</div>
 					)}

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

@@ -1,4 +1,4 @@
-import { fireEvent, screen, waitFor, within } from '@testing-library/react';
+import { fireEvent, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { UrlUpdateEvent } from 'nuqs/adapters/testing';
 
@@ -23,14 +23,6 @@ jest.mock('../TanStackTable.module.scss', () => ({
 	},
 }));
 
-beforeAll(() => {
-	window.ResizeObserver = jest.fn().mockImplementation(() => ({
-		disconnect: jest.fn(),
-		observe: jest.fn(),
-		unobserve: jest.fn(),
-	}));
-});
-
 describe('TanStackTableView Integration', () => {
 	describe('rendering', () => {
 		it('renders all data rows', async () => {
@@ -277,54 +269,6 @@ describe('TanStackTableView Integration', () => {
 				screen.queryByTestId('pagination-total-count'),
 			).not.toBeInTheDocument();
 		});
-
-		it('preserves page from URL on initial mount', async () => {
-			renderTanStackTable({
-				props: {
-					pagination: { total: 100, defaultPage: 1, defaultLimit: 10 },
-					enableQueryParams: true,
-				},
-				queryParams: { page: '3' },
-			});
-
-			const nav = await screen.findByRole('navigation');
-			const page3Button = within(nav).getByRole('button', { name: '3' });
-
-			// Page 3 should be active (from URL), not reset to defaultPage 1
-			expect(page3Button).toHaveAttribute('aria-current', 'page');
-		});
-
-		it('resets page to 1 when limit changes', async () => {
-			const user = userEvent.setup();
-
-			renderTanStackTable({
-				props: {
-					pagination: { total: 100, defaultPage: 1, defaultLimit: 5 },
-					enableQueryParams: true,
-				},
-			});
-
-			const nav = await screen.findByRole('navigation');
-			const page1Button = within(nav).getByRole('button', { name: '1' });
-			const page2Button = within(nav).getByRole('button', { name: '2' });
-
-			expect(page1Button).toHaveAttribute('aria-current', 'page');
-
-			await user.click(page2Button);
-
-			await waitFor(() => {
-				expect(page2Button).toHaveAttribute('aria-current', 'page');
-			});
-
-			await user.click(screen.getByTestId('pagination-page-size'));
-
-			const option10 = await screen.findByRole('option', { name: '10' });
-			await user.click(option10);
-
-			await waitFor(() => {
-				expect(page1Button).toHaveAttribute('aria-current', 'page');
-			});
-		});
 	});
 
 	describe('sorting', () => {

frontend/src/components/TanStackTableView/types.ts

@@ -117,10 +117,6 @@ export type PaginationProps = {
 	defaultLimit?: number;
 	showTotalCount?: boolean;
 	totalCountLabel?: string;
-	/** @default true */
-	showPageSize?: boolean;
-	onPageChange?: (page: number) => void;
-	onLimitChange?: (limit: number) => void;
 };
 
 export type TanstackTableQueryParamsConfig = {
@@ -164,8 +160,6 @@ export type TanStackTableProps<TData> = {
 	/** Called when ctrl+click or cmd+click on a row */
 	onRowClickNewTab?: (row: TData, itemKey: string) => void;
 	onRowDeactivate?: () => void;
-	/** Called when sort state changes */
-	onSort?: (sort: SortState | null) => void;
 	activeRowIndex?: number;
 	renderExpandedRow?: (
 		row: TData,

frontend/src/components/TanStackTableView/useTableParams.ts

@@ -172,23 +172,22 @@ export function useTableParams(
 		[],
 	);
 
+	const orderByDefaultMemoKey = `${orderByDefault?.columnName}${orderByDefault?.order}`;
 	const orderByUrlMemoKey = `${urlOrderBy?.columnName}${urlOrderBy?.order}`;
-	const prevOrderByRef = useRef<string | null>(null);
 
 	useEffect(() => {
-		// Only reset page when orderBy actually changes, not on initial mount
-		if (
-			prevOrderByRef.current !== null &&
-			prevOrderByRef.current !== orderByUrlMemoKey
-		) {
-			if (useUrlForPage) {
-				setUrlPage(pageDefault);
-			} else {
-				setLocalPage(pageDefault);
-			}
+		if (useUrlForPage) {
+			setUrlPage(pageDefault);
+		} else {
+			setLocalPage(pageDefault);
 		}
-		prevOrderByRef.current = orderByUrlMemoKey;
-	}, [useUrlForPage, orderByUrlMemoKey, pageDefault, setUrlPage]);
+	}, [
+		useUrlForPage,
+		orderByDefaultMemoKey,
+		orderByUrlMemoKey,
+		pageDefault,
+		setUrlPage,
+	]);
 
 	return {
 		page: useUrlForPage ? urlPage : localPage,

frontend/src/container/AIAssistant/AIAssistantDrawer/AIAssistantDrawer.tsx

@@ -1,7 +1,7 @@
 import { useCallback } from 'react';
 import { useHistory } from 'react-router-dom';
 import { Button } from '@signozhq/ui/button';
-import { TooltipSimple } from '@signozhq/ui/tooltip';
+import { Tooltip } from '@signozhq/ui/tooltip';
 import { Drawer } from 'antd';
 import ROUTES from 'constants/routes';
 import { Maximize2, MessageSquare, Plus, X } from '@signozhq/icons';
@@ -52,7 +52,7 @@ export default function AIAssistantDrawer(): JSX.Element {
 					</div>
 
 					<div>
-						<TooltipSimple title="New conversation">
+						<Tooltip title="New conversation">
 							<Button
 								variant="ghost"
 								size="icon"
@@ -62,9 +62,9 @@ export default function AIAssistantDrawer(): JSX.Element {
 							>
 								<Plus size={16} />
 							</Button>
-						</TooltipSimple>
+						</Tooltip>
 
-						<TooltipSimple title="Open full screen">
+						<Tooltip title="Open full screen">
 							<Button
 								variant="ghost"
 								size="icon"
@@ -75,9 +75,9 @@ export default function AIAssistantDrawer(): JSX.Element {
 							>
 								<Maximize2 size={16} />
 							</Button>
-						</TooltipSimple>
+						</Tooltip>
 
-						<TooltipSimple title="Close">
+						<Tooltip title="Close">
 							<Button
 								variant="ghost"
 								size="icon"
@@ -87,7 +87,7 @@ export default function AIAssistantDrawer(): JSX.Element {
 							>
 								<X size={16} />
 							</Button>
-						</TooltipSimple>
+						</Tooltip>
 					</div>
 				</div>
 			}

frontend/src/container/AIAssistant/AIAssistantModal/AIAssistantModal.tsx

@@ -2,7 +2,7 @@ import { useCallback, useEffect, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { useHistory } from 'react-router-dom';
 import { Button } from '@signozhq/ui/button';
-import { TooltipSimple } from '@signozhq/ui/tooltip';
+import { Tooltip } from '@signozhq/ui/tooltip';
 import ROUTES from 'constants/routes';
 import { History, Maximize2, Minus, Plus, Sparkles, X } from '@signozhq/icons';
 
@@ -132,7 +132,7 @@ export default function AIAssistantModal(): JSX.Element | null {
 						</div>
 
 						<div className={styles.actions}>
-							<TooltipSimple title={showHistory ? 'Back to chat' : 'Conversations'}>
+							<Tooltip title={showHistory ? 'Back to chat' : 'Conversations'}>
 								<Button
 									variant="ghost"
 									size="icon"
@@ -142,9 +142,9 @@ export default function AIAssistantModal(): JSX.Element | null {
 								>
 									<History size={14} />
 								</Button>
-							</TooltipSimple>
+							</Tooltip>
 
-							<TooltipSimple title="New conversation">
+							<Tooltip title="New conversation">
 								<Button
 									variant="ghost"
 									size="icon"
@@ -153,9 +153,9 @@ export default function AIAssistantModal(): JSX.Element | null {
 								>
 									<Plus size={14} />
 								</Button>
-							</TooltipSimple>
+							</Tooltip>
 
-							<TooltipSimple title="Open full screen">
+							<Tooltip title="Open full screen">
 								<Button
 									variant="ghost"
 									size="icon"
@@ -165,9 +165,9 @@ export default function AIAssistantModal(): JSX.Element | null {
 								>
 									<Maximize2 size={14} />
 								</Button>
-							</TooltipSimple>
+							</Tooltip>
 
-							<TooltipSimple title="Minimize to side panel">
+							<Tooltip title="Minimize to side panel">
 								<Button
 									variant="ghost"
 									size="icon"
@@ -176,9 +176,9 @@ export default function AIAssistantModal(): JSX.Element | null {
 								>
 									<Minus size={14} />
 								</Button>
-							</TooltipSimple>
+							</Tooltip>
 
-							<TooltipSimple title="Close">
+							<Tooltip title="Close">
 								<Button
 									variant="ghost"
 									size="icon"
@@ -187,7 +187,7 @@ export default function AIAssistantModal(): JSX.Element | null {
 								>
 									<X size={14} />
 								</Button>
-							</TooltipSimple>
+							</Tooltip>
 						</div>
 					</div>
 

frontend/src/container/AIAssistant/AIAssistantPanel/AIAssistantPanel.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useLayoutEffect, useRef, useState } from 'react';
 import { matchPath, useHistory, useLocation } from 'react-router-dom';
 import { Button } from '@signozhq/ui/button';
-import { TooltipSimple } from '@signozhq/ui/tooltip';
+import { Tooltip } from '@signozhq/ui/tooltip';
 import ROUTES from 'constants/routes';
 import { History, Maximize2, Plus, Sparkles, X } from '@signozhq/icons';
 
@@ -125,7 +125,7 @@ export default function AIAssistantPanel(): JSX.Element | null {
 					</div>
 
 					<div className={styles.actions}>
-						<TooltipSimple title={showHistory ? 'Back to chat' : 'Conversations'}>
+						<Tooltip title={showHistory ? 'Back to chat' : 'Conversations'}>
 							<Button
 								variant="ghost"
 								size="icon"
@@ -135,9 +135,9 @@ export default function AIAssistantPanel(): JSX.Element | null {
 							>
 								<History size={14} />
 							</Button>
-						</TooltipSimple>
+						</Tooltip>
 
-						<TooltipSimple title="New conversation">
+						<Tooltip title="New conversation">
 							<Button
 								variant="ghost"
 								size="icon"
@@ -147,9 +147,9 @@ export default function AIAssistantPanel(): JSX.Element | null {
 							>
 								<Plus size={14} />
 							</Button>
-						</TooltipSimple>
+						</Tooltip>
 
-						<TooltipSimple title="Open full screen">
+						<Tooltip title="Open full screen">
 							<Button
 								variant="ghost"
 								size="icon"
@@ -160,9 +160,9 @@ export default function AIAssistantPanel(): JSX.Element | null {
 							>
 								<Maximize2 size={14} />
 							</Button>
-						</TooltipSimple>
+						</Tooltip>
 
-						<TooltipSimple title="Close">
+						<Tooltip title="Close">
 							<Button
 								variant="ghost"
 								size="icon"
@@ -172,7 +172,7 @@ export default function AIAssistantPanel(): JSX.Element | null {
 							>
 								<X size={14} />
 							</Button>
-						</TooltipSimple>
+						</Tooltip>
 					</div>
 				</div>
 

frontend/src/container/AIAssistant/AIAssistantTrigger/AIAssistantTrigger.tsx

@@ -1,6 +1,6 @@
 import { matchPath, useLocation } from 'react-router-dom';
 import { Button } from '@signozhq/ui/button';
-import { TooltipSimple } from '@signozhq/ui/tooltip';
+import { Tooltip } from '@signozhq/ui/tooltip';
 import ROUTES from 'constants/routes';
 import { Bot } from '@signozhq/icons';
 
@@ -30,7 +30,7 @@ export default function AIAssistantTrigger(): JSX.Element | null {
 	}
 
 	return (
-		<TooltipSimple title="AI Assistant">
+		<Tooltip title="AI Assistant">
 			<Button
 				variant="solid"
 				color="primary"
@@ -40,6 +40,6 @@ export default function AIAssistantTrigger(): JSX.Element | null {
 			>
 				<Bot size={20} />
 			</Button>
-		</TooltipSimple>
+		</Tooltip>
 	);
 }

frontend/src/container/AIAssistant/components/ActionsSection/ActionsSection.tsx

@@ -12,7 +12,7 @@ import {
 import cx from 'classnames';
 import { v4 as uuidv4 } from 'uuid';
 import { Button } from '@signozhq/ui/button';
-import { TooltipSimple } from '@signozhq/ui/tooltip';
+import { Tooltip } from '@signozhq/ui/tooltip';
 import type { MessageActionDTO } from 'api/ai-assistant/sigNozAIAssistantAPI.schemas';
 import {
 	ApplyFilterSignalDTO,
@@ -524,9 +524,9 @@ export default function ActionsSection({
 					);
 
 					return tooltip ? (
-						<TooltipSimple key={key} title={tooltip}>
+						<Tooltip key={key} title={tooltip}>
 							{chip}
-						</TooltipSimple>
+						</Tooltip>
 					) : (
 						<span key={key}>{chip}</span>
 					);

frontend/src/container/AIAssistant/components/ChatInput/ChatInput.tsx

@@ -5,7 +5,7 @@ import { Badge } from '@signozhq/ui/badge';
 import { Button } from '@signozhq/ui/button';
 import { Input } from '@signozhq/ui/input';
 import { Popover, PopoverContent, PopoverTrigger } from '@signozhq/ui/popover';
-import { TooltipSimple } from '@signozhq/ui/tooltip';
+import { Tooltip } from '@signozhq/ui/tooltip';
 import type { UploadFile } from 'antd';
 import {
 	getListRulesQueryKey,
@@ -899,7 +899,7 @@ export default function ChatInput({
 								</div>
 							</div>
 						) : (
-							<TooltipSimple title="Voice input">
+							<Tooltip title="Voice input">
 								<Button
 									variant="ghost"
 									size="icon"
@@ -910,11 +910,11 @@ export default function ChatInput({
 								>
 									<Mic size={14} />
 								</Button>
-							</TooltipSimple>
+							</Tooltip>
 						))}
 
 					{isStreaming && onCancel ? (
-						<TooltipSimple title="Stop generating">
+						<Tooltip title="Stop generating">
 							<Button
 								variant="solid"
 								size="icon"
@@ -924,7 +924,7 @@ export default function ChatInput({
 							>
 								<Square size={10} fill="currentColor" strokeWidth={0} />
 							</Button>
-						</TooltipSimple>
+						</Tooltip>
 					) : (
 						<Button
 							variant="solid"

frontend/src/container/AIAssistant/components/ConversationsList/ConversationsList.tsx

@@ -2,7 +2,7 @@ import { useEffect, useMemo, useState } from 'react';
 import cx from 'classnames';
 import { Button } from '@signozhq/ui/button';
 import { Input } from '@signozhq/ui/input';
-import { TooltipSimple } from '@signozhq/ui/tooltip';
+import { Tooltip } from '@signozhq/ui/tooltip';
 import { Plus, Search } from '@signozhq/icons';
 
 import { useAIAssistantStore } from '../../store/useAIAssistantStore';
@@ -157,7 +157,7 @@ export default function ConversationsList({
 				{isLoadingThreads && <HeaderLoadingDots />}
 
 				{!isLoadingThreads && showAddNewConversation && (
-					<TooltipSimple title="New conversation">
+					<Tooltip title="New conversation">
 						<Button
 							variant="solid"
 							size="sm"
@@ -167,7 +167,7 @@ export default function ConversationsList({
 						>
 							<Plus size={12} />
 						</Button>
-					</TooltipSimple>
+					</Tooltip>
 				)}
 			</div>
 

frontend/src/container/AIAssistant/components/MessageFeedback/MessageFeedback.tsx

@@ -3,7 +3,7 @@ import cx from 'classnames';
 import { useCopyToClipboard } from 'react-use';
 import { Button } from '@signozhq/ui/button';
 import { DialogWrapper } from '@signozhq/ui/dialog';
-import { TooltipSimple } from '@signozhq/ui/tooltip';
+import { Tooltip } from '@signozhq/ui/tooltip';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import { Check, Copy, RefreshCw, ThumbsDown, ThumbsUp } from '@signozhq/icons';
 import { useTimezone } from 'providers/Timezone';
@@ -126,7 +126,7 @@ export default function MessageFeedback({
 		<>
 			<div className={cx(styles.feedback, { [styles.visible]: isLastAssistant })}>
 				<div className={styles.actions}>
-					<TooltipSimple title={copied ? 'Copied!' : 'Copy'}>
+					<Tooltip title={copied ? 'Copied!' : 'Copy'}>
 						<Button
 							className={styles.btn}
 							size="icon"
@@ -136,9 +136,9 @@ export default function MessageFeedback({
 						>
 							{copied ? <Check size={12} /> : <Copy size={12} />}
 						</Button>
-					</TooltipSimple>
+					</Tooltip>
 
-					<TooltipSimple title="Good response">
+					<Tooltip title="Good response">
 						<Button
 							className={cx(styles.btn, { [styles.votedUp]: vote === 'positive' })}
 							size="icon"
@@ -148,9 +148,9 @@ export default function MessageFeedback({
 						>
 							<ThumbsUp size={12} />
 						</Button>
-					</TooltipSimple>
+					</Tooltip>
 
-					<TooltipSimple title="Bad response">
+					<Tooltip title="Bad response">
 						<Button
 							className={cx(styles.btn, {
 								[styles.votedDown]: vote === 'negative',
@@ -162,10 +162,10 @@ export default function MessageFeedback({
 						>
 							<ThumbsDown size={12} />
 						</Button>
-					</TooltipSimple>
+					</Tooltip>
 
 					{onRegenerate && (
-						<TooltipSimple title="Regenerate">
+						<Tooltip title="Regenerate">
 							<Button
 								className={styles.btn}
 								size="icon"
@@ -175,7 +175,7 @@ export default function MessageFeedback({
 							>
 								<RefreshCw size={12} />
 							</Button>
-						</TooltipSimple>
+						</Tooltip>
 					)}
 				</div>
 

frontend/src/container/AIAssistant/components/UserMessageActions/UserMessageActions.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useState } from 'react';
 import { useCopyToClipboard } from 'react-use';
 import { Button } from '@signozhq/ui/button';
-import { TooltipSimple } from '@signozhq/ui/tooltip';
+import { Tooltip } from '@signozhq/ui/tooltip';
 import { Check, Copy } from '@signozhq/icons';
 
 import { Message } from '../../types';
@@ -32,7 +32,7 @@ export default function UserMessageActions({
 
 	return (
 		<div className={styles.actions}>
-			<TooltipSimple title={copied ? 'Copied!' : 'Copy'}>
+			<Tooltip title={copied ? 'Copied!' : 'Copy'}>
 				<Button
 					className={styles.btn}
 					size="icon"
@@ -42,7 +42,7 @@ export default function UserMessageActions({
 				>
 					{copied ? <Check size={12} /> : <Copy size={12} />}
 				</Button>
-			</TooltipSimple>
+			</Tooltip>
 		</div>
 	);
 }

frontend/src/container/CustomDomainSettings/__tests__/CustomDomainSettings.test.tsx

@@ -1,6 +1,6 @@
 import { GetHosts200 } from 'api/generated/services/sigNoz.schemas';
 import { rest, server } from 'mocks-server/server';
-import { render, screen, userEvent, waitFor } from 'tests/test-utils';
+import { fireEvent, render, screen, waitFor } from 'tests/test-utils';
 
 import CustomDomainSettings from '../CustomDomainSettings';
 
@@ -44,18 +44,20 @@ const mockHostsResponse: GetHosts200 = {
 };
 
 describe('CustomDomainSettings', () => {
+	beforeEach(() => {
+		server.use(
+			rest.get(ZEUS_HOSTS_ENDPOINT, (_, res, ctx) =>
+				res(ctx.status(200), ctx.json(mockHostsResponse)),
+			),
+		);
+	});
+
 	afterEach(() => {
 		server.resetHandlers();
 		mockToastCustom.mockClear();
 	});
 
 	it('renders active host URL in the trigger button', async () => {
-		server.use(
-			rest.get(ZEUS_HOSTS_ENDPOINT, (_, res, ctx) =>
-				res(ctx.status(200), ctx.json(mockHostsResponse)),
-			),
-		);
-
 		render(<CustomDomainSettings />);
 
 		// The active host is the non-default one (custom-host)
@@ -63,20 +65,11 @@ describe('CustomDomainSettings', () => {
 	});
 
 	it('opens edit modal when clicking the edit button', async () => {
-		server.use(
-			rest.get(ZEUS_HOSTS_ENDPOINT, (_, res, ctx) =>
-				res(ctx.status(200), ctx.json(mockHostsResponse)),
-			),
-		);
-
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
 		render(<CustomDomainSettings />);
 
 		await screen.findByText(/custom-host\.test\.cloud/i);
 
-		await user.click(
-			screen.getByRole('button', { name: /edit workspace link/i }),
-		);
+		fireEvent.click(screen.getByRole('button', { name: /edit workspace link/i }));
 
 		expect(
 			screen.getByRole('dialog', { name: /edit workspace link/i }),
@@ -89,28 +82,20 @@ describe('CustomDomainSettings', () => {
 		let capturedBody: Record<string, unknown> = {};
 
 		server.use(
-			rest.get(ZEUS_HOSTS_ENDPOINT, (_, res, ctx) =>
-				res(ctx.status(200), ctx.json(mockHostsResponse)),
-			),
 			rest.put(ZEUS_HOSTS_ENDPOINT, async (req, res, ctx) => {
 				capturedBody = await req.json<Record<string, unknown>>();
 				return res(ctx.status(200), ctx.json({}));
 			}),
 		);
 
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
 		render(<CustomDomainSettings />);
 
 		await screen.findByText(/custom-host\.test\.cloud/i);
-		await user.click(
-			screen.getByRole('button', { name: /edit workspace link/i }),
-		);
+		fireEvent.click(screen.getByRole('button', { name: /edit workspace link/i }));
 
-		// The input is inside the modal — find it by its role
 		const input = screen.getByRole('textbox');
-		await user.clear(input);
-		await user.type(input, 'myteam');
-		await user.click(screen.getByRole('button', { name: /apply changes/i }));
+		fireEvent.change(input, { target: { value: 'myteam' } });
+		fireEvent.click(screen.getByRole('button', { name: /apply changes/i }));
 
 		await waitFor(() => {
 			expect(capturedBody).toStrictEqual({ name: 'myteam' });
@@ -119,9 +104,6 @@ describe('CustomDomainSettings', () => {
 
 	it('shows contact support option when domain update returns 409', async () => {
 		server.use(
-			rest.get(ZEUS_HOSTS_ENDPOINT, (_, res, ctx) =>
-				res(ctx.status(200), ctx.json(mockHostsResponse)),
-			),
 			rest.put(ZEUS_HOSTS_ENDPOINT, (_, res, ctx) =>
 				res(
 					ctx.status(409),
@@ -130,18 +112,14 @@ describe('CustomDomainSettings', () => {
 			),
 		);
 
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
 		render(<CustomDomainSettings />);
 
 		await screen.findByText(/custom-host\.test\.cloud/i);
-		await user.click(
-			screen.getByRole('button', { name: /edit workspace link/i }),
-		);
+		fireEvent.click(screen.getByRole('button', { name: /edit workspace link/i }));
 
 		const input = screen.getByRole('textbox');
-		await user.clear(input);
-		await user.type(input, 'myteam');
-		await user.click(screen.getByRole('button', { name: /apply changes/i }));
+		fireEvent.change(input, { target: { value: 'myteam' } });
+		fireEvent.click(screen.getByRole('button', { name: /apply changes/i }));
 
 		await expect(
 			screen.findByRole('button', { name: /contact support/i }),
@@ -149,24 +127,14 @@ describe('CustomDomainSettings', () => {
 	});
 
 	it('shows validation error when subdomain is less than 3 characters', async () => {
-		server.use(
-			rest.get(ZEUS_HOSTS_ENDPOINT, (_, res, ctx) =>
-				res(ctx.status(200), ctx.json(mockHostsResponse)),
-			),
-		);
-
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
 		render(<CustomDomainSettings />);
 
 		await screen.findByText(/custom-host\.test\.cloud/i);
-		await user.click(
-			screen.getByRole('button', { name: /edit workspace link/i }),
-		);
+		fireEvent.click(screen.getByRole('button', { name: /edit workspace link/i }));
 
 		const input = screen.getByRole('textbox');
-		await user.clear(input);
-		await user.type(input, 'ab');
-		await user.click(screen.getByRole('button', { name: /apply changes/i }));
+		fireEvent.change(input, { target: { value: 'ab' } });
+		fireEvent.click(screen.getByRole('button', { name: /apply changes/i }));
 
 		expect(
 			screen.getByText(/minimum 3 characters required/i),
@@ -174,19 +142,12 @@ describe('CustomDomainSettings', () => {
 	});
 
 	it('shows all workspace URLs as links in the dropdown', async () => {
-		server.use(
-			rest.get(ZEUS_HOSTS_ENDPOINT, (_, res, ctx) =>
-				res(ctx.status(200), ctx.json(mockHostsResponse)),
-			),
-		);
-
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
 		render(<CustomDomainSettings />);
 
 		await screen.findByText(/custom-host\.test\.cloud/i);
 
 		// Open the URL dropdown
-		await user.click(
+		fireEvent.click(
 			screen.getByRole('button', { name: /custom-host\.test\.cloud/i }),
 		);
 
@@ -207,26 +168,19 @@ describe('CustomDomainSettings', () => {
 
 	it('calls toast.custom with new URL after successful domain update', async () => {
 		server.use(
-			rest.get(ZEUS_HOSTS_ENDPOINT, (_, res, ctx) =>
-				res(ctx.status(200), ctx.json(mockHostsResponse)),
-			),
 			rest.put(ZEUS_HOSTS_ENDPOINT, (_, res, ctx) =>
 				res(ctx.status(200), ctx.json({})),
 			),
 		);
 
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
 		render(<CustomDomainSettings />);
 
 		await screen.findByText(/custom-host\.test\.cloud/i);
-		await user.click(
-			screen.getByRole('button', { name: /edit workspace link/i }),
-		);
+		fireEvent.click(screen.getByRole('button', { name: /edit workspace link/i }));
 
 		const input = screen.getByRole('textbox');
-		await user.clear(input);
-		await user.type(input, 'myteam');
-		await user.click(screen.getByRole('button', { name: /apply changes/i }));
+		fireEvent.change(input, { target: { value: 'myteam' } });
+		fireEvent.click(screen.getByRole('button', { name: /apply changes/i }));
 
 		// Verify toast.custom was called
 		await waitFor(() => {
@@ -243,12 +197,6 @@ describe('CustomDomainSettings', () => {
 
 	describe('Workspace Name rendering', () => {
 		it('renders org displayName when available from appContext', async () => {
-			server.use(
-				rest.get(ZEUS_HOSTS_ENDPOINT, (_, res, ctx) =>
-					res(ctx.status(200), ctx.json(mockHostsResponse)),
-				),
-			);
-
 			render(<CustomDomainSettings />, undefined, {
 				appContextOverrides: {
 					org: [{ id: 'xyz', displayName: 'My Org Name', createdAt: 0 }],
@@ -259,12 +207,6 @@ describe('CustomDomainSettings', () => {
 		});
 
 		it('falls back to customDomainSubdomain when org displayName is missing', async () => {
-			server.use(
-				rest.get(ZEUS_HOSTS_ENDPOINT, (_, res, ctx) =>
-					res(ctx.status(200), ctx.json(mockHostsResponse)),
-				),
-			);
-
 			render(<CustomDomainSettings />, undefined, {
 				appContextOverrides: { org: [] },
 			});

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

@@ -1,12 +1,6 @@
 import setRetentionApiV2 from 'api/settings/setRetentionV2';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
-import {
-	fireEvent,
-	render,
-	screen,
-	userEvent,
-	waitFor,
-} from 'tests/test-utils';
+import { fireEvent, render, screen, waitFor } from 'tests/test-utils';
 import { IDiskType } from 'types/api/disks/getDisks';
 import {
 	PayloadPropsLogs,
@@ -115,8 +109,6 @@ describe('GeneralSettings - S3 Logs Retention', () => {
 
 	describe('Test 1: S3 Enabled - Only Days in Dropdown', () => {
 		it('should show only Days option for S3 retention and send correct API payload', async () => {
-			const user = userEvent.setup({ pointerEventsCheck: 0 });
-
 			render(
 				<GeneralSettings
 					metricsTtlValuesPayload={mockMetricsRetention}
@@ -159,8 +151,7 @@ describe('GeneralSettings - S3 Logs Retention', () => {
 			fireEvent.click(document.body);
 
 			// Change S3 retention value to 5 days
-			await user.clear(s3Input);
-			await user.type(s3Input, '5');
+			fireEvent.change(s3Input, { target: { value: '5' } });
 
 			// Find the save button in the Logs row
 			const saveButton = logsRow.querySelector(
@@ -217,8 +208,6 @@ describe('GeneralSettings - S3 Logs Retention', () => {
 
 	describe('Test 2: S3 Disabled - Field Hidden', () => {
 		it('should hide S3 retention field and send empty S3 values to API', async () => {
-			const user = userEvent.setup({ pointerEventsCheck: 0 });
-
 			render(
 				<GeneralSettings
 					metricsTtlValuesPayload={mockMetricsRetention}
@@ -245,7 +234,7 @@ describe('GeneralSettings - S3 Logs Retention', () => {
 			const totalDropdown = logsRow.querySelector(
 				'.ant-select-selector',
 			) as HTMLElement;
-			await user.click(totalDropdown);
+			fireEvent.mouseDown(totalDropdown);
 
 			// Wait for dropdown options to appear
 			await waitFor(() => {
@@ -259,11 +248,10 @@ describe('GeneralSettings - S3 Logs Retention', () => {
 				opt.textContent?.includes('Days'),
 			);
 			expect(daysOption).toBeInTheDocument();
-			await user.click(daysOption as HTMLElement);
+			fireEvent.click(daysOption as HTMLElement);
 
 			// Now change the value
-			await user.clear(totalInput);
-			await user.type(totalInput, '60');
+			fireEvent.change(totalInput, { target: { value: '60' } });
 
 			// Find the save button
 			const saveButton = logsRow.querySelector(
@@ -277,14 +265,14 @@ describe('GeneralSettings - S3 Logs Retention', () => {
 			});
 
 			// Click save button
-			await user.click(saveButton);
+			fireEvent.click(saveButton);
 
 			// Wait for modal to appear
 			const okButton = await screen.findByRole('button', { name: /ok/i });
 			expect(okButton).toBeInTheDocument();
 
 			// Click OK button
-			await user.click(okButton);
+			fireEvent.click(okButton);
 
 			// Verify API was called with empty S3 values (60 days)
 			await waitFor(() => {
@@ -333,8 +321,6 @@ describe('GeneralSettings - S3 Logs Retention', () => {
 
 	describe('Test 4: Save Button State with S3 Disabled', () => {
 		it('should disable save button when cold_storage_ttl_days is -1 and no changes made', async () => {
-			const user = userEvent.setup({ pointerEventsCheck: 0 });
-
 			render(
 				<GeneralSettings
 					metricsTtlValuesPayload={mockMetricsRetention}
@@ -365,8 +351,7 @@ describe('GeneralSettings - S3 Logs Retention', () => {
 			const totalInput = inputs[0] as HTMLInputElement;
 
 			// Change total retention value to trigger button enable
-			await user.clear(totalInput);
-			await user.type(totalInput, '60');
+			fireEvent.change(totalInput, { target: { value: '60' } });
 
 			// Button should now be enabled after change
 			await waitFor(() => {
@@ -374,8 +359,7 @@ describe('GeneralSettings - S3 Logs Retention', () => {
 			});
 
 			// Revert to original value (30 days displays as 1 Month)
-			await user.clear(totalInput);
-			await user.type(totalInput, '1');
+			fireEvent.change(totalInput, { target: { value: '1' } });
 
 			// Button should be disabled again (back to original state)
 			await waitFor(() => {

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

@@ -2,8 +2,6 @@ import { ArrowRight } from '@signozhq/icons';
 import { Typography } from '@signozhq/ui/typography';
 import { openInNewTab } from 'utils/navigation';
 
-import styles from './AlertsEmptyState.module.scss';
-
 interface AlertInfoCardProps {
 	header: string;
 	subheader: string;
@@ -19,17 +17,17 @@ function AlertInfoCard({
 }: AlertInfoCardProps): JSX.Element {
 	return (
 		<div
-			className={styles.alertInfoCard}
+			className="alert-info-card"
 			onClick={(): void => {
 				onClick();
 				openInNewTab(link);
 			}}
 		>
-			<div className={styles.alertCardText}>
-				<Typography.Text className={styles.alertCardTextHeader}>
+			<div className="alert-card-text">
+				<Typography.Text className="alert-card-text-header">
 					{header}
 				</Typography.Text>
-				<Typography.Text className={styles.alertCardTextSubheader}>
+				<Typography.Text className="alert-card-text-subheader">
 					{subheader}
 				</Typography.Text>
 			</div>

frontend/src/container/ListAlertRules/AlertsEmptyState/AlertsEmptyState.module.scss

@@ -1,189 +0,0 @@
-.alertListContainer {
-	margin-top: auto;
-	margin-bottom: auto;
-	display: flex;
-	justify-content: center;
-	width: 100%;
-}
-
-.alertListViewContent {
-	width: calc(100% - 30px);
-	max-width: 836px;
-}
-
-.title {
-	color: var(--l1-foreground);
-	font-size: var(--font-size-lg);
-	font-style: normal;
-	font-weight: var(--font-weight-normal);
-	line-height: 28px;
-	letter-spacing: -0.09px;
-}
-
-.subtitle {
-	color: var(--l2-foreground);
-	font-size: var(--font-size-sm);
-	font-style: normal;
-	font-weight: var(--font-weight-normal);
-	line-height: 20px;
-	letter-spacing: -0.07px;
-}
-
-.emptyAlertInfoContainer {
-	display: flex;
-	padding: 71px 193.5px;
-	justify-content: center;
-	align-items: center;
-	border-radius: 6px;
-	border: 1px dashed var(--l1-border);
-	margin-top: 16px;
-}
-
-.alertContent {
-	display: flex;
-	flex-direction: column;
-	align-items: flex-start;
-	gap: 12px;
-}
-
-.heading {
-	display: flex;
-	flex-direction: column;
-	gap: 4px;
-}
-
-.icons {
-	color: white;
-}
-
-.emptyAlertAction {
-	color: var(--l2-foreground);
-	font-family: Inter;
-	font-size: 14px;
-	font-style: normal;
-	font-weight: 400;
-	line-height: 24px;
-	letter-spacing: -0.07px;
-}
-
-.emptyInfo {
-	color: var(--l1-foreground);
-	font-family: Inter;
-	font-size: 14px;
-	font-style: normal;
-	font-weight: 500;
-	line-height: 24px;
-	letter-spacing: -0.07px;
-}
-
-.actionContainer {
-	display: flex;
-	gap: 24px;
-	align-items: center;
-	padding-top: 24px;
-	padding-bottom: 24px;
-	width: 100%;
-}
-
-.buttonGroup {
-	display: flex;
-	gap: 8px;
-}
-
-.buttonContent {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	gap: 4px;
-}
-
-.getStartedText {
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	gap: 16px;
-	margin-top: 24px;
-	margin-bottom: 24px;
-	width: 100%;
-
-	:global(.ant-divider)::before,
-	:global(.ant-divider)::after {
-		border-bottom: 2px dotted var(--l1-border);
-		border-top: 2px dotted var(--l1-border);
-		height: 8px;
-	}
-
-	:global(.ant-typography) {
-		color: var(--l2-foreground);
-		font-family: Inter;
-		font-size: 12px;
-		font-style: normal;
-		font-weight: 500;
-		line-height: 20px;
-		letter-spacing: 0.48px;
-		text-transform: uppercase;
-		padding-top: 8px;
-	}
-}
-
-.alertInfoCard {
-	display: flex;
-	padding: 16px;
-	justify-content: space-between;
-	align-items: center;
-	border-radius: 6px;
-	border: 1px solid var(--l1-border);
-	background: var(--l2-background);
-	margin-bottom: 16px;
-
-	&:hover {
-		cursor: pointer;
-	}
-}
-
-.alertCardText {
-	display: flex;
-	gap: 2px;
-	flex-direction: column;
-}
-
-.alertCardTextHeader {
-	color: var(--l1-foreground);
-	font-family: Inter;
-	font-size: 14px;
-	font-style: normal;
-	font-weight: 500;
-	line-height: 20px;
-	letter-spacing: -0.07px;
-}
-
-.alertCardTextSubheader {
-	color: var(--l2-foreground);
-	font-family: Inter;
-	font-size: 12px;
-	font-style: normal;
-	font-weight: 400;
-	line-height: 18px;
-}
-
-.infoText {
-	color: var(--primary);
-	font-family: Inter;
-	font-size: 12px;
-	font-style: normal;
-	font-weight: 500;
-	line-height: 16px;
-	letter-spacing: -0.06px;
-	margin: 0 8px;
-	white-space: nowrap;
-}
-
-.infoLinkContainer {
-	svg {
-		color: var(--primary);
-	}
-
-	&:hover {
-		cursor: pointer;
-	}
-}

frontend/src/container/ListAlertRules/AlertsEmptyState/AlertsEmptyState.styles.scss

@@ -0,0 +1,178 @@
+.alert-list-container {
+	margin-top: 104px;
+	margin-bottom: 30px;
+	display: flex;
+	justify-content: center;
+	width: 100%;
+
+	.alert-list-view-content {
+		width: calc(100% - 30px);
+		max-width: 836px;
+
+		.alert-list-title-container {
+			.title {
+				color: var(--l1-foreground);
+				font-size: var(--font-size-lg);
+				font-style: normal;
+				font-weight: var(--font-weight-normal);
+				line-height: 28px; /* 155.556% */
+				letter-spacing: -0.09px;
+			}
+
+			.subtitle {
+				color: var(--l2-foreground);
+				font-size: var(--font-size-sm);
+				font-style: normal;
+				font-weight: var(--font-weight-normal);
+				line-height: 20px; /* 142.857% */
+				letter-spacing: -0.07px;
+			}
+		}
+
+		.empty-alert-info-container {
+			display: flex;
+			padding: 71px 193.5px;
+			justify-content: center;
+			align-items: center;
+			border-radius: 6px;
+			border: 1px dashed var(--l1-border);
+			margin-top: 16px;
+
+			.alert-content {
+				display: flex;
+				flex-direction: column;
+				align-items: flex-start;
+				gap: 12px;
+
+				.heading {
+					display: flex;
+					flex-direction: column;
+					gap: 4px;
+
+					.icons {
+						color: white;
+					}
+
+					.empty-alert-action {
+						color: var(--l2-foreground);
+						font-family: Inter;
+						font-size: 14px;
+						font-style: normal;
+						font-weight: 400;
+						line-height: 24px; /* 171.429% */
+						letter-spacing: -0.07px;
+					}
+
+					.empty-info {
+						color: var(--l1-foreground);
+						font-family: Inter;
+						font-size: 14px;
+						font-style: normal;
+						font-weight: 500;
+						line-height: 24px;
+						letter-spacing: -0.07px;
+					}
+				}
+
+				.action-container {
+					display: flex;
+					gap: 24px;
+					align-items: center;
+					padding-top: 24px;
+					padding-bottom: 24px;
+					width: 100%;
+				}
+			}
+		}
+
+		.get-started-text {
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			gap: 16px;
+			margin-top: 24px;
+			margin-bottom: 24px;
+			width: 100%;
+
+			.ant-divider::before,
+			.ant-divider::after {
+				border-bottom: 2px dotted var(--l1-border);
+				border-top: 2px dotted var(--l1-border);
+				height: 8px;
+			}
+
+			.ant-typography {
+				color: var(--l2-foreground);
+				font-family: Inter;
+				font-size: 12px;
+				font-style: normal;
+				font-weight: 500;
+				line-height: 20px; /* 166.667% */
+				letter-spacing: 0.48px;
+				text-transform: uppercase;
+				padding-top: 8px;
+			}
+		}
+
+		.alert-info-card {
+			display: flex;
+			padding: 16px;
+			justify-content: space-between;
+			align-items: center;
+
+			border-radius: 6px;
+			border: 1px solid var(--l1-border);
+			background: var(--l2-background);
+			margin-bottom: 16px;
+
+			&:hover {
+				cursor: pointer;
+			}
+
+			.alert-card-text {
+				display: flex;
+				gap: 2px;
+				flex-direction: column;
+
+				.alert-card-text-header {
+					color: var(--l1-foreground);
+					font-family: Inter;
+					font-size: 14px;
+					font-style: normal;
+					font-weight: 500;
+					line-height: 20px; /* 142.857% */
+					letter-spacing: -0.07px;
+				}
+
+				.alert-card-text-subheader {
+					color: var(--l2-foreground);
+					font-family: Inter;
+					font-size: 12px;
+					font-style: normal;
+					font-weight: 400;
+					line-height: 18px; /* 150% */
+				}
+			}
+		}
+	}
+}
+
+.info-text {
+	color: var(--bg-robin-400) !important;
+	font-family: Inter;
+	font-size: 12px;
+	font-style: normal;
+	font-weight: 500;
+	line-height: 16px; /* 133.333% */
+	letter-spacing: -0.06px;
+}
+
+.info-link-container {
+	.anticon {
+		color: var(--bg-robin-400);
+	}
+
+	:hover {
+		cursor: pointer;
+	}
+}

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

@@ -1,7 +1,6 @@
 import React, { useCallback, useState } from 'react';
-import { Plus, RefreshCw } from '@signozhq/icons';
-import { Divider } from 'antd';
-import { Button } from '@signozhq/ui/button';
+import { Plus } from '@signozhq/icons';
+import { Button, Divider, Flex } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
 import ROUTES from 'constants/routes';
@@ -17,7 +16,7 @@ import AlertInfoCard from './AlertInfoCard';
 import { ALERT_CARDS, ALERT_INFO_LINKS } from './alertLinks';
 import InfoLinkText from './InfoLinkText';
 
-import styles from './AlertsEmptyState.module.scss';
+import './AlertsEmptyState.styles.scss';
 
 const alertLogEvents = (
 	title: string,
@@ -29,16 +28,10 @@ const alertLogEvents = (
 		page: 'Alert empty state page',
 	};
 
-	void logEvent(title, dataSource ? { ...attributes, dataSource } : attributes);
+	logEvent(title, dataSource ? { ...attributes, dataSource } : attributes);
 };
 
-interface AlertsEmptyStateProps {
-	onRefresh?: () => void;
-}
-
-export function AlertsEmptyState({
-	onRefresh,
-}: AlertsEmptyStateProps): JSX.Element {
+export function AlertsEmptyState(): JSX.Element {
 	const { user } = useAppContext();
 	const { safeNavigate } = useSafeNavigate();
 	const [addNewAlert] = useComponentPermission(
@@ -57,51 +50,45 @@ export function AlertsEmptyState({
 	);
 
 	return (
-		<div className={styles.alertListContainer}>
-			<div className={styles.alertListViewContent}>
-				<div>
-					<Typography.Title className={styles.title}>Alert Rules</Typography.Title>
-					<Typography.Text className={styles.subtitle}>
+		<div className="alert-list-container">
+			<div className="alert-list-view-content">
+				<div className="alert-list-title-container">
+					<Typography.Title className="title">Alert Rules</Typography.Title>
+					<Typography.Text className="subtitle">
 						Create and manage alert rules for your resources.
 					</Typography.Text>
 				</div>
-				<section className={styles.emptyAlertInfoContainer}>
-					<div className={styles.alertContent}>
-						<section className={styles.heading}>
+				<section className="empty-alert-info-container">
+					<div className="alert-content">
+						<section className="heading">
 							<img
 								src={alertEmojiUrl}
 								alt="alert-header"
 								style={{ height: '32px', width: '32px' }}
 							/>
 							<div>
-								<Typography.Text className={styles.emptyInfo}>
+								<Typography.Text className="empty-info">
 									No Alert rules yet.{' '}
 								</Typography.Text>
-								<br />
-								<Typography.Text className={styles.emptyAlertAction}>
+								<Typography.Text className="empty-alert-action">
 									Create an Alert Rule to get started
 								</Typography.Text>
 							</div>
 						</section>
-						<div className={styles.actionContainer}>
-							<div className={styles.buttonGroup}>
-								<Button
-									onClick={onClickNewAlertHandler}
-									disabled={!addNewAlert}
-									loading={loading}
-									data-testid="add-alert"
-								>
-									<span className={styles.buttonContent}>
-										<Plus size="md" />
-										New Alert Rule
-									</span>
-								</Button>
-								{onRefresh && (
-									<Button onClick={onRefresh} prefix={<RefreshCw />} color="secondary">
-										Refresh
-									</Button>
-								)}
-							</div>
+						<div className="action-container">
+							<Button
+								className="add-alert-btn"
+								onClick={onClickNewAlertHandler}
+								disabled={!addNewAlert}
+								loading={loading}
+								type="primary"
+								data-testid="add-alert"
+							>
+								<Flex align="center" justify="center" gap={4}>
+									<Plus size="md" />
+									New Alert Rule
+								</Flex>
+							</Button>
 							<InfoLinkText
 								infoText="Watch a tutorial on creating a sample alert"
 								link="https://youtu.be/xjxNIqiv4_M"
@@ -136,9 +123,11 @@ export function AlertsEmptyState({
 						})}
 					</div>
 				</section>
-				<div className={styles.getStartedText}>
+				<div className="get-started-text">
 					<Divider>
-						<Typography.Text>Or get started with these sample alerts</Typography.Text>
+						<Typography.Text className="get-started-text">
+							Or get started with these sample alerts
+						</Typography.Text>
 					</Divider>
 				</div>
 

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

@@ -3,8 +3,6 @@ import { Flex } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import { openInNewTab } from 'utils/navigation';
 
-import styles from './AlertsEmptyState.module.scss';
-
 interface InfoLinkTextProps {
 	infoText: string;
 	link: string;
@@ -26,12 +24,12 @@ function InfoLinkText({
 				onClick();
 				openInNewTab(link);
 			}}
-			className={styles.infoLinkContainer}
+			className="info-link-container"
 		>
-			{leftIconVisible && <CirclePlay size={16} />}
-			<Typography.Text className={styles.infoText}>{infoText}</Typography.Text>
+			{leftIconVisible && <CirclePlay size="md" />}
+			<Typography.Text className="info-text">{infoText}</Typography.Text>
 			{rightIconVisible && (
-				<ArrowRight size={16} style={{ transform: 'rotate(315deg)' }} />
+				<ArrowRight size="md" style={{ transform: 'rotate(315deg)' }} />
 			)}
 		</Flex>
 	);

frontend/src/container/ListAlertRules/DeleteAlert.tsx

@@ -0,0 +1,86 @@
+import { Dispatch, SetStateAction, useState } from 'react';
+import type { NotificationInstance } from 'antd/es/notification/interface';
+import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
+import { deleteRuleByID } from 'api/generated/services/rules';
+import type {
+	RenderErrorResponseDTO,
+	RuletypesRuleDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import { AxiosError } from 'axios';
+import { State } from 'hooks/useFetch';
+import { useErrorModal } from 'providers/ErrorModalProvider';
+import { PayloadProps as DeleteAlertPayloadProps } from 'types/api/alerts/delete';
+import APIError from 'types/api/error';
+
+import { ColumnButton } from './styles';
+
+function DeleteAlert({
+	id,
+	setData,
+	notifications,
+}: DeleteAlertProps): JSX.Element {
+	const [deleteAlertState, setDeleteAlertState] = useState<
+		State<DeleteAlertPayloadProps>
+	>({
+		error: false,
+		errorMessage: '',
+		loading: false,
+		success: false,
+		payload: undefined,
+	});
+
+	const { showErrorModal } = useErrorModal();
+
+	const onDeleteHandler = async (id: string): Promise<void> => {
+		try {
+			await deleteRuleByID({ id });
+
+			setData((state) => state.filter((alert) => alert.id !== id));
+
+			setDeleteAlertState((state) => ({
+				...state,
+				loading: false,
+			}));
+			notifications.success({
+				message: 'Success',
+			});
+		} catch (error) {
+			setDeleteAlertState((state) => ({
+				...state,
+				loading: false,
+				error: true,
+			}));
+
+			showErrorModal(
+				convertToApiError(error as AxiosError<RenderErrorResponseDTO>) as APIError,
+			);
+		}
+	};
+
+	const onClickHandler = (): void => {
+		setDeleteAlertState((state) => ({
+			...state,
+			loading: true,
+		}));
+		onDeleteHandler(id);
+	};
+
+	return (
+		<ColumnButton
+			disabled={deleteAlertState.loading || false}
+			loading={deleteAlertState.loading || false}
+			onClick={onClickHandler}
+			type="link"
+		>
+			Delete
+		</ColumnButton>
+	);
+}
+
+interface DeleteAlertProps {
+	id: string;
+	setData: Dispatch<SetStateAction<RuletypesRuleDTO[]>>;
+	notifications: NotificationInstance;
+}
+
+export default DeleteAlert;

frontend/src/container/ListAlertRules/ListAlert.tsx

@@ -0,0 +1,429 @@
+import React, { useCallback, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { UseQueryResult } from 'react-query';
+import { Button, Flex, Input } from 'antd';
+import { Typography } from '@signozhq/ui/typography';
+import { Plus } from '@signozhq/icons';
+import type { ColumnsType } from 'antd/es/table/interface';
+import logEvent from 'api/common/logEvent';
+import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
+import { createRule } from 'api/generated/services/rules';
+import type {
+	ListRules200,
+	RenderErrorResponseDTO,
+	RuletypesRuleDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import type { ErrorType } from 'api/generatedAPIInstance';
+import { AxiosError } from 'axios';
+import DropDown from 'components/DropDown/DropDown';
+import {
+	DynamicColumnsKey,
+	TableDataSource,
+} from 'components/ResizeTable/contants';
+import DynamicColumnTable from 'components/ResizeTable/DynamicColumnTable';
+import DateComponent from 'components/ResizeTable/TableComponent/DateComponent';
+import LabelColumn from 'components/TableRenderer/LabelColumn';
+import TextToolTip from 'components/TextToolTip';
+import { QueryParams } from 'constants/query';
+import ROUTES from 'constants/routes';
+import { sanitizeDefaultAlertQuery } from 'container/EditAlertV2/utils';
+import useSortableTable from 'hooks/ResizeTable/useSortableTable';
+import useComponentPermission from 'hooks/useComponentPermission';
+import useDebouncedFn from 'hooks/useDebouncedFunction';
+import useInterval from 'hooks/useInterval';
+import { useNotifications } from 'hooks/useNotifications';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
+import useUrlQuery from 'hooks/useUrlQuery';
+import { mapQueryDataFromApi } from 'lib/newQueryBuilder/queryBuilderMappers/mapQueryDataFromApi';
+import { useAppContext } from 'providers/App/App';
+import { useErrorModal } from 'providers/ErrorModalProvider';
+import { toCompositeMetricQuery } from 'types/api/alerts/convert';
+import APIError from 'types/api/error';
+import { isModifierKeyPressed } from 'utils/app';
+
+import DeleteAlert from './DeleteAlert';
+import { ColumnButton, SearchContainer } from './styles';
+import Status from './TableComponents/Status';
+import ToggleAlertState from './ToggleAlertState';
+import { alertActionLogEvent, filterAlerts } from './utils';
+
+const { Search } = Input;
+
+function ListAlert({ allAlertRules, refetch }: ListAlertProps): JSX.Element {
+	const { t } = useTranslation('common');
+	const { safeNavigate } = useSafeNavigate();
+	const { user } = useAppContext();
+	const [addNewAlert, action] = useComponentPermission(
+		['add_new_alert', 'action'],
+		user.role,
+	);
+
+	const [editLoader, setEditLoader] = useState<boolean>(false);
+	const [cloneLoader, setCloneLoader] = useState<boolean>(false);
+
+	const params = useUrlQuery();
+	const orderColumnParam = params.get('columnKey');
+	const orderQueryParam = params.get('order');
+	const paginationParam = params.get('page');
+	const searchParams = params.get('search');
+	const [searchString, setSearchString] = useState<string>(searchParams || '');
+	const [data, setData] = useState<RuletypesRuleDTO[]>(() => {
+		const value = searchString.toLowerCase();
+		const filteredData = filterAlerts(allAlertRules, value);
+		return filteredData || [];
+	});
+
+	// Type asuring
+	const sortingOrder: 'ascend' | 'descend' | null =
+		orderQueryParam === 'ascend' || orderQueryParam === 'descend'
+			? orderQueryParam
+			: null;
+
+	const { sortedInfo, handleChange } = useSortableTable<RuletypesRuleDTO>(
+		sortingOrder,
+		orderColumnParam || '',
+		searchString,
+	);
+
+	const { notifications: notificationsApi } = useNotifications();
+
+	useInterval(() => {
+		(async (): Promise<void> => {
+			const { data: refetchData, status } = await refetch();
+			if (status === 'success') {
+				const value = searchString.toLowerCase();
+				const filteredData = filterAlerts(refetchData?.data ?? [], value);
+				setData(filteredData || []);
+			}
+			if (status === 'error') {
+				notificationsApi.error({
+					message: t('something_went_wrong'),
+				});
+			}
+		})();
+	}, 30000);
+
+	const { showErrorModal } = useErrorModal();
+
+	const onClickNewAlertHandler = useCallback(
+		(e: React.MouseEvent): void => {
+			logEvent('Alert: New alert button clicked', {
+				number: allAlertRules?.length,
+				layout: 'new',
+			});
+			safeNavigate(ROUTES.ALERT_TYPE_SELECTION, {
+				newTab: isModifierKeyPressed(e),
+			});
+		},
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+		[],
+	);
+
+	const onEditHandler = (
+		record: RuletypesRuleDTO,
+		options?: { newTab?: boolean },
+	): void => {
+		const compositeQuery = sanitizeDefaultAlertQuery(
+			mapQueryDataFromApi(toCompositeMetricQuery(record.condition.compositeQuery)),
+			record.alertType,
+		);
+		params.set(
+			QueryParams.compositeQuery,
+			encodeURIComponent(JSON.stringify(compositeQuery)),
+		);
+
+		const panelType = record.condition.compositeQuery.panelType;
+		if (panelType) {
+			params.set(QueryParams.panelTypes, panelType);
+		}
+
+		params.set(QueryParams.ruleId, record.id);
+
+		setEditLoader(false);
+
+		safeNavigate(`${ROUTES.ALERT_OVERVIEW}?${params.toString()}`, {
+			newTab: options?.newTab,
+		});
+	};
+
+	const onCloneHandler =
+		(originalAlert: RuletypesRuleDTO) => async (): Promise<void> => {
+			const copyAlert: RuletypesRuleDTO = {
+				...originalAlert,
+				alert: `${originalAlert.alert} - Copy`,
+			};
+
+			try {
+				setCloneLoader(true);
+				await createRule(copyAlert);
+
+				notificationsApi.success({
+					message: 'Success',
+					description: 'Alert cloned successfully',
+				});
+
+				const { data: refetchData, status } = await refetch();
+				const rules = refetchData?.data;
+				if (status === 'success' && rules) {
+					setData(rules);
+					setTimeout(() => {
+						const clonedAlert = rules[rules.length - 1];
+						params.set(QueryParams.ruleId, String(clonedAlert.id));
+						safeNavigate(`${ROUTES.EDIT_ALERTS}?${params.toString()}`);
+					}, 2000);
+				}
+				if (status === 'error') {
+					notificationsApi.error({
+						message: t('something_went_wrong'),
+					});
+				}
+			} catch (error) {
+				showErrorModal(
+					convertToApiError(error as AxiosError<RenderErrorResponseDTO>) as APIError,
+				);
+			} finally {
+				setCloneLoader(false);
+			}
+		};
+
+	const handleSearch = useDebouncedFn((e: unknown) => {
+		const value = (e as React.BaseSyntheticEvent).target.value.toLowerCase();
+		setSearchString(value);
+		const filteredData = filterAlerts(allAlertRules, value);
+		setData(filteredData);
+	});
+
+	const dynamicColumns: ColumnsType<RuletypesRuleDTO> = [
+		{
+			title: 'Created At',
+			dataIndex: 'createdAt',
+			width: 80,
+			key: DynamicColumnsKey.CreatedAt,
+			align: 'center',
+			sorter: (a: RuletypesRuleDTO, b: RuletypesRuleDTO): number => {
+				const prev = a.createdAt ? new Date(a.createdAt).getTime() : 0;
+				const next = b.createdAt ? new Date(b.createdAt).getTime() : 0;
+
+				return prev - next;
+			},
+			render: DateComponent,
+			sortOrder:
+				sortedInfo.columnKey === DynamicColumnsKey.CreatedAt
+					? sortedInfo.order
+					: null,
+		},
+		{
+			title: 'Created By',
+			dataIndex: 'createdBy',
+			width: 80,
+			key: DynamicColumnsKey.CreatedBy,
+			align: 'center',
+		},
+		{
+			title: 'Updated At',
+			dataIndex: 'updatedAt',
+			width: 80,
+			key: DynamicColumnsKey.UpdatedAt,
+			align: 'center',
+			sorter: (a: RuletypesRuleDTO, b: RuletypesRuleDTO): number => {
+				const prev = a.updatedAt ? new Date(a.updatedAt).getTime() : 0;
+				const next = b.updatedAt ? new Date(b.updatedAt).getTime() : 0;
+
+				return prev - next;
+			},
+			render: DateComponent,
+			sortOrder:
+				sortedInfo.columnKey === DynamicColumnsKey.UpdatedAt
+					? sortedInfo.order
+					: null,
+		},
+		{
+			title: 'Updated By',
+			dataIndex: 'updatedBy',
+			width: 80,
+			key: DynamicColumnsKey.UpdatedBy,
+			align: 'center',
+		},
+	];
+
+	const columns: ColumnsType<RuletypesRuleDTO> = [
+		{
+			title: 'Status',
+			dataIndex: 'state',
+			width: 80,
+			key: 'state',
+			sorter: (a, b): number =>
+				(b.state ? b.state.charCodeAt(0) : 1000) -
+				(a.state ? a.state.charCodeAt(0) : 1000),
+			render: (value): JSX.Element => <Status status={value} />,
+			sortOrder: sortedInfo.columnKey === 'state' ? sortedInfo.order : null,
+		},
+		{
+			title: 'Alert Name',
+			dataIndex: 'alert',
+			width: 100,
+			key: 'name',
+			sorter: (alertA, alertB): number => {
+				if (alertA.alert && alertB.alert) {
+					return alertA.alert.localeCompare(alertB.alert);
+				}
+				return 0;
+			},
+			render: (value, record): JSX.Element => {
+				const onClickHandler = (e: React.MouseEvent<HTMLElement>): void => {
+					e.stopPropagation();
+					e.preventDefault();
+					onEditHandler(record, { newTab: isModifierKeyPressed(e) });
+				};
+
+				return <Typography.Link onClick={onClickHandler}>{value}</Typography.Link>;
+			},
+			sortOrder: sortedInfo.columnKey === 'name' ? sortedInfo.order : null,
+		},
+		{
+			title: 'Severity',
+			dataIndex: 'labels',
+			width: 80,
+			key: 'severity',
+			sorter: (a, b): number =>
+				(a?.labels?.severity?.length || 0) - (b?.labels?.severity?.length || 0),
+			render: (value): JSX.Element => {
+				const objectKeys = value ? Object.keys(value) : [];
+				const withSeverityKey = objectKeys.find((e) => e === 'severity') || '';
+				const severityValue = withSeverityKey ? value[withSeverityKey] : '-';
+
+				return <Typography>{severityValue}</Typography>;
+			},
+			sortOrder: sortedInfo.columnKey === 'severity' ? sortedInfo.order : null,
+		},
+		{
+			title: 'Labels',
+			dataIndex: 'labels',
+			key: 'tags',
+			align: 'center',
+			width: 100,
+			render: (value): JSX.Element => {
+				const objectKeys = value ? Object.keys(value) : [];
+				const withOutSeverityKeys = objectKeys.filter((e) => e !== 'severity');
+
+				if (withOutSeverityKeys.length === 0) {
+					return <Typography>-</Typography>;
+				}
+
+				return (
+					<LabelColumn labels={withOutSeverityKeys} value={value} color="magenta" />
+				);
+			},
+		},
+	];
+
+	if (action) {
+		columns.push({
+			title: 'Action',
+			dataIndex: 'id',
+			key: 'action',
+			width: 10,
+			render: (id: RuletypesRuleDTO['id'], record): JSX.Element => (
+				<div data-testid="alert-actions">
+					<DropDown
+						onDropDownItemClick={(item): void =>
+							alertActionLogEvent(item.key, record)
+						}
+						element={[
+							<ToggleAlertState
+								key="1"
+								disabled={record.disabled ?? false}
+								setData={setData}
+								id={id ?? ''}
+							/>,
+							<ColumnButton
+								key="2"
+								onClick={(e: React.MouseEvent): void =>
+									onEditHandler(record, { newTab: isModifierKeyPressed(e) })
+								}
+								type="link"
+								loading={editLoader}
+							>
+								Edit
+							</ColumnButton>,
+							<ColumnButton
+								key="3"
+								onClick={(): void => onEditHandler(record, { newTab: true })}
+								type="link"
+								loading={editLoader}
+							>
+								Edit in New Tab
+							</ColumnButton>,
+							<ColumnButton
+								key="3"
+								onClick={onCloneHandler(record)}
+								type="link"
+								loading={cloneLoader}
+							>
+								Clone
+							</ColumnButton>,
+							<DeleteAlert
+								key="4"
+								notifications={notificationsApi}
+								setData={setData}
+								id={id ?? ''}
+							/>,
+						]}
+					/>
+				</div>
+			),
+		});
+	}
+
+	const paginationConfig = {
+		defaultCurrent: Number(paginationParam) || 1,
+	};
+	return (
+		<div className="alert-rules-list-container">
+			<SearchContainer>
+				<Search
+					placeholder="Search by Alert Name, Severity and Labels"
+					onChange={handleSearch}
+					defaultValue={searchString}
+				/>
+				<Flex gap={12} align="center">
+					{addNewAlert && (
+						<Button type="primary" onClick={onClickNewAlertHandler}>
+							<Flex align="center" gap={4}>
+								<Plus size="md" />
+								New Alert
+							</Flex>
+						</Button>
+					)}
+					<TextToolTip
+						{...{
+							text: `More details on how to create alerts`,
+							url: 'https://signoz.io/docs/alerts/?utm_source=product&utm_medium=list-alerts',
+							urlText: 'Learn More',
+						}}
+					/>
+				</Flex>
+			</SearchContainer>
+			<DynamicColumnTable
+				tablesource={TableDataSource.Alert}
+				columns={columns}
+				rowKey="id"
+				dataSource={data}
+				shouldSendAlertsLogEvent
+				dynamicColumns={dynamicColumns}
+				onChange={handleChange}
+				pagination={paginationConfig}
+			/>
+		</div>
+	);
+}
+
+interface ListAlertProps {
+	allAlertRules: RuletypesRuleDTO[];
+	refetch: UseQueryResult<
+		ListRules200,
+		ErrorType<RenderErrorResponseDTO>
+	>['refetch'];
+}
+
+export default ListAlert;

frontend/src/container/ListAlertRules/ListAlertRules.module.scss

@@ -1,82 +0,0 @@
-.container {
-	display: flex;
-	flex-direction: column;
-	gap: 1rem;
-	height: calc(100vh - 62px);
-	min-height: 400px;
-}
-
-.header {
-	position: relative;
-	z-index: 10;
-	display: flex;
-	justify-content: flex-end;
-	gap: 1rem;
-	flex-shrink: 0;
-	padding: 0 var(--spacing-8);
-}
-
-.refreshRow {
-	display: flex;
-	align-items: center;
-	gap: 8px;
-}
-
-.filtersRow {
-	position: relative;
-	z-index: 10;
-	display: flex;
-	align-items: center;
-	gap: 1rem;
-	flex-shrink: 0;
-	padding: 0 var(--spacing-8);
-
-	--combobox-trigger-height: 2rem;
-}
-
-.searchInput {
-	min-width: 250px;
-}
-
-.filterSelect {
-	min-width: 300px;
-	flex: 1;
-}
-
-.tableContainer {
-	flex: 1;
-	min-height: 0;
-	display: flex;
-	flex-direction: column;
-
-	--tanstack-table-header-cell-bg: var(--l2-background);
-	--tanstack-table-header-cell-color: var(--l2-foreground);
-	--tanstack-table-cell-bg: var(--l2-background);
-	--tanstack-table-cell-color: var(--l2-foreground);
-	--tanstack-table-row-hover-bg: var(--l2-background-hover);
-	--tanstack-table-row-active-bg: var(--l2-background-active);
-	--tanstack-table-resize-handle-bg: var(--l2-background);
-	--tanstack-table-resize-handle-hover-bg: var(--l2-border);
-	--tanstack-table-row-height: 42px;
-
-	--tanstack-cell-padding-top-override: 5px;
-	--tanstack-cell-padding-bottom-override: 5px;
-	--tanstack-cell-padding-left-override: 5px;
-	--tanstack-cell-padding-right-override: 5px;
-
-	--badge-cursor: pointer;
-}
-
-.searchIcon {
-	color: var(--l2-foreground);
-}
-
-.actionsColumn {
-	display: flex;
-	justify-content: flex-end;
-}
-
-.paginationContainer {
-	padding-right: var(--spacing-12);
-	height: 62px;
-}

frontend/src/container/ListAlertRules/TableComponents/Status.tsx

@@ -0,0 +1,32 @@
+import { Tag } from 'antd';
+import type { RuletypesRuleDTO } from 'api/generated/services/sigNoz.schemas';
+
+function Status({ status }: StatusProps): JSX.Element {
+	switch (status) {
+		case 'inactive': {
+			return <Tag color="green">OK</Tag>;
+		}
+
+		case 'pending': {
+			return <Tag color="orange">Pending</Tag>;
+		}
+
+		case 'firing': {
+			return <Tag color="red">Firing</Tag>;
+		}
+
+		case 'disabled': {
+			return <Tag>Disabled</Tag>;
+		}
+
+		default: {
+			return <Tag color="default">Unknown</Tag>;
+		}
+	}
+}
+
+interface StatusProps {
+	status: RuletypesRuleDTO['state'];
+}
+
+export default Status;

frontend/src/container/ListAlertRules/ToggleAlertState.tsx

@@ -0,0 +1,103 @@
+import { Dispatch, SetStateAction, useState } from 'react';
+import { useQueryClient } from 'react-query';
+import { patchRulePartial } from 'api/alerts/patchRulePartial';
+import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
+import { invalidateGetRuleByID } from 'api/generated/services/rules';
+import type {
+	RenderErrorResponseDTO,
+	RuletypesRuleDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import { AxiosError } from 'axios';
+import { State } from 'hooks/useFetch';
+import { useNotifications } from 'hooks/useNotifications';
+import { useErrorModal } from 'providers/ErrorModalProvider';
+import APIError from 'types/api/error';
+
+import { ColumnButton } from './styles';
+
+function ToggleAlertState({
+	id,
+	disabled,
+	setData,
+}: ToggleAlertStateProps): JSX.Element {
+	const [apiStatus, setAPIStatus] = useState<State<RuletypesRuleDTO>>({
+		error: false,
+		errorMessage: '',
+		loading: false,
+		success: false,
+		payload: undefined,
+	});
+
+	const { notifications } = useNotifications();
+	const { showErrorModal } = useErrorModal();
+	const queryClient = useQueryClient();
+
+	const onToggleHandler = async (
+		id: string,
+		disabled: boolean,
+	): Promise<void> => {
+		try {
+			setAPIStatus((state) => ({
+				...state,
+				loading: true,
+			}));
+
+			const response = await patchRulePartial(id, { disabled });
+			const { data: updatedRule } = response;
+
+			setData((state) =>
+				state.map((alert) => {
+					if (alert.id === id) {
+						return {
+							...alert,
+							disabled: updatedRule.disabled,
+							state: updatedRule.state,
+						};
+					}
+					return alert;
+				}),
+			);
+
+			setAPIStatus((state) => ({
+				...state,
+				loading: false,
+				payload: updatedRule,
+			}));
+
+			invalidateGetRuleByID(queryClient, { id });
+
+			notifications.success({
+				message: 'Success',
+			});
+		} catch (error) {
+			setAPIStatus((state) => ({
+				...state,
+				loading: false,
+				error: true,
+			}));
+
+			showErrorModal(
+				convertToApiError(error as AxiosError<RenderErrorResponseDTO>) as APIError,
+			);
+		}
+	};
+
+	return (
+		<ColumnButton
+			disabled={apiStatus.loading || false}
+			loading={apiStatus.loading || false}
+			onClick={(): Promise<void> => onToggleHandler(id, !disabled)}
+			type="link"
+		>
+			{disabled ? 'Enable' : 'Disable'}
+		</ColumnButton>
+	);
+}
+
+interface ToggleAlertStateProps {
+	id: string;
+	disabled: boolean;
+	setData: Dispatch<SetStateAction<RuletypesRuleDTO[]>>;
+}
+
+export default ToggleAlertState;

frontend/src/container/ListAlertRules/__test__/utils.test.ts

@@ -0,0 +1,147 @@
+import type {
+	RuletypesAlertStateDTO,
+	RuletypesCompareOperatorDTO,
+	RuletypesMatchTypeDTO,
+	RuletypesPanelTypeDTO,
+	RuletypesQueryTypeDTO,
+	RuletypesRuleDTO,
+} from 'api/generated/services/sigNoz.schemas';
+
+import { filterAlerts } from '../utils';
+
+describe('filterAlerts', () => {
+	const mockAlertBase: Partial<RuletypesRuleDTO> = {
+		state: 'active' as RuletypesAlertStateDTO,
+		disabled: false,
+		createdAt: new Date('2024-01-01T00:00:00Z'),
+		createdBy: 'test-user',
+		updatedAt: new Date('2024-01-01T00:00:00Z'),
+		updatedBy: 'test-user',
+		version: '1',
+		condition: {
+			compositeQuery: {
+				queries: [],
+				panelType: 'graph' as RuletypesPanelTypeDTO,
+				queryType: 'builder' as RuletypesQueryTypeDTO,
+			},
+			matchType: 'at_least_once' as RuletypesMatchTypeDTO,
+			op: 'above' as RuletypesCompareOperatorDTO,
+		},
+		ruleType: 'threshold_rule' as RuletypesRuleDTO['ruleType'],
+	};
+
+	const mockAlerts: RuletypesRuleDTO[] = [
+		{
+			...mockAlertBase,
+			id: '1',
+			alert: 'High CPU Usage',
+			alertType: 'METRIC_BASED_ALERT',
+			labels: {
+				severity: 'warning',
+				status: 'ok',
+				environment: 'production',
+			},
+		} as RuletypesRuleDTO,
+		{
+			...mockAlertBase,
+			id: '2',
+			alert: 'Memory Leak Detected',
+			alertType: 'METRIC_BASED_ALERT',
+			labels: {
+				severity: 'critical',
+				status: 'firing',
+				environment: 'staging',
+			},
+		} as RuletypesRuleDTO,
+		{
+			...mockAlertBase,
+			id: '3',
+			alert: 'Database Connection Error',
+			alertType: 'METRIC_BASED_ALERT',
+			labels: {
+				severity: 'error',
+				status: 'pending',
+				environment: 'production',
+			},
+		} as RuletypesRuleDTO,
+	];
+
+	it('should return all alerts when filter is empty', () => {
+		const result = filterAlerts(mockAlerts, '');
+		expect(result).toStrictEqual(mockAlerts);
+	});
+
+	it('should return all alerts when filter is only whitespace', () => {
+		const result = filterAlerts(mockAlerts, '   ');
+		expect(result).toStrictEqual(mockAlerts);
+	});
+
+	it('should filter alerts by alert name', () => {
+		const result = filterAlerts(mockAlerts, 'CPU');
+		expect(result).toHaveLength(1);
+		expect(result[0].alert).toBe('High CPU Usage');
+	});
+
+	it('should filter alerts by severity', () => {
+		const result = filterAlerts(mockAlerts, 'warning');
+		expect(result).toHaveLength(1);
+		expect(result[0].labels?.severity).toBe('warning');
+	});
+
+	it('should filter alerts by label key', () => {
+		const result = filterAlerts(mockAlerts, 'environment');
+		expect(result).toHaveLength(3); // All alerts have environment label
+	});
+
+	it('should filter alerts by label value', () => {
+		const result = filterAlerts(mockAlerts, 'production');
+		expect(result).toHaveLength(2);
+		expect(
+			result.every((alert) => alert.labels?.environment === 'production'),
+		).toBe(true);
+	});
+
+	it('should be case insensitive', () => {
+		const result = filterAlerts(mockAlerts, 'cpu');
+		expect(result).toHaveLength(1);
+		expect(result[0].alert).toBe('High CPU Usage');
+	});
+
+	it('should handle partial matches', () => {
+		const result = filterAlerts(mockAlerts, 'mem');
+		expect(result).toHaveLength(1);
+		expect(result[0].alert).toBe('Memory Leak Detected');
+	});
+
+	it('should handle alerts with missing labels', () => {
+		const alertsWithMissingLabels: RuletypesRuleDTO[] = [
+			{
+				...mockAlertBase,
+				id: '4',
+				alert: 'Test Alert',
+				alertType: 'METRIC_BASED_ALERT',
+				labels: undefined,
+			} as RuletypesRuleDTO,
+		];
+		const result = filterAlerts(alertsWithMissingLabels, 'test');
+		expect(result).toHaveLength(1);
+		expect(result[0].alert).toBe('Test Alert');
+	});
+
+	it('should handle alerts with missing alert name', () => {
+		const alertsWithMissingName: RuletypesRuleDTO[] = [
+			{
+				...mockAlertBase,
+				id: '5',
+				alert: '',
+				alertType: 'METRIC_BASED_ALERT',
+				labels: {
+					severity: 'warning',
+				},
+			} as RuletypesRuleDTO,
+		];
+		const result = filterAlerts(alertsWithMissingName, 'warning');
+		expect(result).toHaveLength(1);
+		expect(result[0].labels?.severity).toBe('warning');
+	});
+});

frontend/src/container/ListAlertRules/components/ActionsMenu.module.scss

@@ -1,16 +0,0 @@
-.actionButton {
-	opacity: 0.7;
-	transition: opacity 0.15s ease;
-
-	&:hover {
-		opacity: 1;
-	}
-}
-
-.deleteItem {
-	color: var(--bg-cherry-500);
-
-	&:hover {
-		background: color-mix(in srgb, var(--bg-cherry-500) 10%, transparent);
-	}
-}

frontend/src/container/ListAlertRules/components/ActionsMenu.tsx

@@ -1,172 +0,0 @@
-import { useMemo } from 'react';
-import { useQueryClient } from 'react-query';
-import { Ellipsis } from '@signozhq/icons';
-import { Button } from '@signozhq/ui/button';
-import { DropdownMenuSimple } from '@signozhq/ui/dropdown-menu';
-import { toast } from '@signozhq/ui/sonner';
-import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
-import {
-	createRule,
-	deleteRuleByID,
-	invalidateListRules,
-	patchRuleByID,
-} from 'api/generated/services/rules';
-import type {
-	RenderErrorResponseDTO,
-	RuletypesPostableRuleDTO,
-} from 'api/generated/services/sigNoz.schemas';
-import type { AxiosError } from 'axios';
-
-import type { AlertRule } from '../types';
-import { ALERT_ACTIONS, alertActionLogEvent } from '../utils';
-import styles from './ActionsMenu.module.scss';
-
-interface ActionsMenuProps {
-	rule: AlertRule;
-	onEdit: (rule: AlertRule, options?: { newTab?: boolean }) => void;
-	isLoading?: boolean;
-}
-
-function ActionsMenu({
-	rule,
-	onEdit,
-	isLoading: externalLoading = false,
-}: ActionsMenuProps): JSX.Element {
-	const queryClient = useQueryClient();
-
-	const handleClone = (): void => {
-		alertActionLogEvent(ALERT_ACTIONS.CLONE, rule);
-		toast.promise(
-			createRule({
-				...rule,
-				alert: `${rule.alert} - Copy`,
-			} as RuletypesPostableRuleDTO).then(async (response) => {
-				await invalidateListRules(queryClient);
-				const newRule = response.data;
-				if (newRule) {
-					onEdit(newRule as AlertRule);
-				}
-			}),
-			{
-				loading: 'Cloning alert...',
-				success: 'Alert cloned successfully',
-				error: (error): string => {
-					const apiError = convertToApiError(
-						error as AxiosError<RenderErrorResponseDTO>,
-					);
-					return apiError?.getErrorMessage() || 'Failed to clone alert';
-				},
-				position: 'top-right',
-			},
-		);
-	};
-
-	const handleDelete = (): void => {
-		alertActionLogEvent(ALERT_ACTIONS.DELETE, rule);
-		toast.promise(
-			deleteRuleByID({ id: rule.id ?? '' }).then(() =>
-				invalidateListRules(queryClient),
-			),
-			{
-				loading: 'Deleting alert...',
-				success: 'Alert deleted successfully',
-				error: (error): string => {
-					const apiError = convertToApiError(
-						error as AxiosError<RenderErrorResponseDTO>,
-					);
-					return apiError?.getErrorMessage() || 'Failed to delete alert';
-				},
-				position: 'top-right',
-			},
-		);
-	};
-
-	const handleToggle = (): void => {
-		alertActionLogEvent(ALERT_ACTIONS.TOGGLE, rule);
-		const newDisabled = !rule.disabled;
-		toast.promise(
-			patchRuleByID({ id: rule.id ?? '' }, {
-				disabled: newDisabled,
-			} as RuletypesPostableRuleDTO).then(() => invalidateListRules(queryClient)),
-			{
-				loading: newDisabled ? 'Disabling alert...' : 'Enabling alert...',
-				success: newDisabled ? 'Alert disabled' : 'Alert enabled',
-				error: (error): string => {
-					const apiError = convertToApiError(
-						error as AxiosError<RenderErrorResponseDTO>,
-					);
-					return apiError?.getErrorMessage() || 'Failed to toggle alert state';
-				},
-				position: 'top-right',
-			},
-		);
-	};
-
-	const menuItems = useMemo(
-		() => [
-			{
-				key: 'toggle',
-				label: rule.disabled ? 'Enable' : 'Disable',
-				disabled: externalLoading,
-				onClick: handleToggle,
-			},
-			{
-				key: 'edit',
-				label: 'Edit',
-				disabled: externalLoading,
-				onClick: (): void => {
-					alertActionLogEvent(ALERT_ACTIONS.EDIT, rule);
-					onEdit(rule);
-				},
-			},
-			{
-				key: 'edit-new-tab',
-				label: 'Edit in New Tab',
-				disabled: externalLoading,
-				onClick: (): void => {
-					alertActionLogEvent(ALERT_ACTIONS.EDIT, rule);
-					onEdit(rule, { newTab: true });
-				},
-			},
-			{
-				key: 'clone',
-				label: 'Clone',
-				disabled: externalLoading,
-				onClick: handleClone,
-			},
-			{ key: 'divider', type: 'divider' as const },
-			{
-				key: 'delete',
-				label: 'Delete',
-				disabled: externalLoading,
-				danger: true,
-				onClick: handleDelete,
-			},
-		],
-		// eslint-disable-next-line react-hooks/exhaustive-deps
-		[rule, externalLoading, onEdit],
-	);
-
-	const handleClick = (e: React.MouseEvent): void => {
-		e.stopPropagation();
-	};
-
-	return (
-		// eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
-		<div onClick={handleClick}>
-			<DropdownMenuSimple menu={{ items: menuItems }} align="end">
-				<Button
-					variant="outlined"
-					color="secondary"
-					size="icon"
-					className={styles.actionButton}
-					data-testid="alert-actions"
-				>
-					<Ellipsis size={16} />
-				</Button>
-			</DropdownMenuSimple>
-		</div>
-	);
-}
-
-export default ActionsMenu;

frontend/src/container/ListAlertRules/components/ColumnSelector.module.scss

@@ -1,34 +0,0 @@
-.popoverContent {
-	min-width: 180px;
-	padding: 8px;
-}
-
-.title {
-	font-size: 12px;
-	font-weight: 600;
-	color: var(--l2-foreground);
-	padding: 4px 8px;
-	margin-bottom: 4px;
-}
-
-.columnList {
-	display: flex;
-	flex-direction: column;
-	gap: 2px;
-}
-
-.columnItem {
-	display: flex;
-	align-items: center;
-	gap: 8px;
-	padding: 6px 8px;
-	border-radius: 4px;
-	cursor: pointer;
-	font-size: 13px;
-	color: var(--l1-foreground);
-	transition: background-color 0.15s ease;
-
-	&:hover {
-		background: var(--l2-background-hover);
-	}
-}

frontend/src/container/ListAlertRules/components/ColumnSelector.tsx

@@ -1,78 +0,0 @@
-import { useMemo } from 'react';
-import { Columns3 } from '@signozhq/icons';
-import { Button } from '@signozhq/ui/button';
-import { Checkbox } from '@signozhq/ui/checkbox';
-import { Popover, PopoverContent, PopoverTrigger } from '@signozhq/ui/popover';
-import type { TableColumnDef } from 'components/TanStackTableView';
-import {
-	hideColumn,
-	showColumn,
-	useHiddenColumnIds,
-} from 'components/TanStackTableView';
-
-import styles from './ColumnSelector.module.scss';
-
-interface ColumnSelectorProps<TData> {
-	columns: TableColumnDef<TData>[];
-	storageKey: string;
-}
-
-function ColumnSelector<TData>({
-	columns,
-	storageKey,
-}: ColumnSelectorProps<TData>): JSX.Element {
-	const hiddenColumnIds = useHiddenColumnIds(storageKey);
-
-	const selectableColumns = useMemo(
-		() =>
-			columns.filter(
-				(col) => col.canBeHidden !== false && col.enableRemove !== false,
-			),
-		[columns],
-	);
-
-	const handleToggle = (columnId: string, checked: boolean): void => {
-		if (checked) {
-			showColumn(storageKey, columnId);
-		} else {
-			hideColumn(storageKey, columnId);
-		}
-	};
-
-	return (
-		<Popover>
-			<PopoverTrigger asChild>
-				<Button
-					variant="outlined"
-					size="sm"
-					color="secondary"
-					prefix={<Columns3 size={14} />}
-				>
-					Columns
-				</Button>
-			</PopoverTrigger>
-			<PopoverContent align="end" className={styles.popoverContent}>
-				<div className={styles.title}>Toggle Columns</div>
-				<div className={styles.columnList}>
-					{selectableColumns.map((col) => {
-						const isVisible = !hiddenColumnIds.includes(col.id);
-						const label = typeof col.header === 'string' ? col.header : col.id;
-
-						return (
-							<label key={col.id} className={styles.columnItem}>
-								<Checkbox
-									id={`col-${col.id}`}
-									value={isVisible}
-									onChange={(): void => handleToggle(col.id, !isVisible)}
-								/>
-								<span>{label}</span>
-							</label>
-						);
-					})}
-				</div>
-			</PopoverContent>
-		</Popover>
-	);
-}
-
-export default ColumnSelector;

frontend/src/container/ListAlertRules/components/index.ts

@@ -1,2 +0,0 @@
-export { default as ActionsMenu } from './ActionsMenu';
-export { default as ColumnSelector } from './ColumnSelector';

frontend/src/container/ListAlertRules/hooks.ts

@@ -1,46 +0,0 @@
-import {
-	Options,
-	parseAsInteger,
-	useQueryState,
-	UseQueryStateReturn,
-} from 'nuqs';
-import { parseAsJsonNoValidate } from 'utils/nuqsParsers';
-
-const defaultNuqsOptions: Options = {
-	history: 'push',
-};
-
-export const ALERT_RULES_PARAMS = {
-	SEARCH: 'search',
-	PAGE: 'page',
-	RULE_TYPE: 'ruleType',
-	FILTERS: 'alertRulesFilters',
-} as const;
-
-export const useAlertRulesPage = (): UseQueryStateReturn<number, number> =>
-	useQueryState(
-		ALERT_RULES_PARAMS.PAGE,
-		parseAsInteger.withDefault(1).withOptions(defaultNuqsOptions),
-	);
-
-export const useAlertRulesRuleType = (): UseQueryStateReturn<
-	string[],
-	string[]
-> =>
-	useQueryState(
-		ALERT_RULES_PARAMS.RULE_TYPE,
-		parseAsJsonNoValidate<string[]>()
-			.withDefault([])
-			.withOptions(defaultNuqsOptions),
-	);
-
-export const useAlertRulesFilters = (): UseQueryStateReturn<
-	string[],
-	string[]
-> =>
-	useQueryState(
-		ALERT_RULES_PARAMS.FILTERS,
-		parseAsJsonNoValidate<string[]>()
-			.withDefault([])
-			.withOptions(defaultNuqsOptions),
-	);

frontend/src/container/ListAlertRules/index.tsx

@@ -1,179 +1,67 @@
-import { useCallback, useMemo } from 'react';
-import { Plus, Search } from '@signozhq/icons';
-import { Button } from '@signozhq/ui/button';
-import { Input } from '@signozhq/ui/input';
-import ErrorEmptyState from 'components/Alerts/ErrorEmptyState';
-import NoResultsEmptyState from 'components/Alerts/NoResultsEmptyState';
-import TanStackTable from 'components/TanStackTableView';
-import { useTableParams } from 'components/TanStackTableView/useTableParams';
-import useComponentPermission from 'hooks/useComponentPermission';
-import { useUrlSearchState } from 'hooks/useUrlSearchState';
-import { useAppContext } from 'providers/App/App';
-import { useTimezone } from 'providers/Timezone';
-
-import TextToolTip from 'components/TextToolTip';
+import { useEffect, useMemo, useRef } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Space } from 'antd';
+import logEvent from 'api/common/logEvent';
+import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
+import { useListRules } from 'api/generated/services/rules';
+import { RenderErrorResponseDTO } from 'api/generated/services/sigNoz.schemas';
+import { AxiosError } from 'axios';
+import Spinner from 'components/Spinner';
+import { useNotifications } from 'hooks/useNotifications';
 
 import { AlertsEmptyState } from './AlertsEmptyState/AlertsEmptyState';
-import { ActionsMenu, ColumnSelector } from './components';
-import { ALERT_RULES_PARAMS, useAlertRulesFilters } from './hooks';
-import styles from './ListAlertRules.module.scss';
-import { getAlertRuleColumns } from './table.config';
-import type { AlertRule } from './types';
-import { useAlertRulesData } from './useAlertRulesData';
-import { useAlertRulesHandlers } from './useAlertRulesHandlers';
-
-const QUERY_PARAMS_CONFIG = {
-	orderBy: 'orderBy',
-	page: 'page',
-	limit: 'limit',
-} as const;
-
-const DEFAULT_PAGE = 1;
-const DEFAULT_LIMIT = 10;
+import ListAlert from './ListAlert';
 
 function ListAlertRules(): JSX.Element {
-	const { user } = useAppContext();
-	const [addNewAlert, action] = useComponentPermission(
-		['add_new_alert', 'action'],
-		user.role,
-	);
-
-	const [filterValues, setFilterValues] = useAlertRulesFilters();
-	const { searchText, debouncedSearch, handleSearchChange, clearSearch } =
-		useUrlSearchState(ALERT_RULES_PARAMS.SEARCH);
-	const { formatTimezoneAdjustedTimestamp } = useTimezone();
-	const { orderBy, page, limit } = useTableParams(QUERY_PARAMS_CONFIG, {
-		page: DEFAULT_PAGE,
-		limit: DEFAULT_LIMIT,
+	const { t } = useTranslation('common');
+	const { data, isError, isLoading, refetch, error } = useListRules({
+		query: { cacheTime: 0 },
 	});
 
-	const { filteredRules, isFetching, isError, allRules, refetch } =
-		useAlertRulesData(orderBy, debouncedSearch, filterValues ?? []);
+	const rules = data?.data ?? [];
+	const hasLoaded = !isLoading && data !== undefined;
+	const logEventCalledRef = useRef(false);
 
-	const { handleEdit, handleNewAlert, handleRowClick, handleRowClickNewTab } =
-		useAlertRulesHandlers(allRules.length);
+	const { notifications } = useNotifications();
 
-	const handleClearFilters = useCallback((): void => {
-		void setFilterValues(null);
-		clearSearch();
-	}, [setFilterValues, clearSearch]);
-
-	const columns = useMemo(
-		() => getAlertRuleColumns(formatTimezoneAdjustedTimestamp),
-		[formatTimezoneAdjustedTimestamp],
+	const apiError = useMemo(
+		() => convertToApiError(error as AxiosError<RenderErrorResponseDTO> | null),
+		[error],
 	);
 
-	const paginatedRules = useMemo(() => {
-		const start = (page - 1) * limit;
-		return filteredRules.slice(start, start + limit);
-	}, [filteredRules, page, limit]);
-
-	const columnsWithActions = useMemo(() => {
-		if (!action) {
-			return columns;
+	useEffect(() => {
+		if (!logEventCalledRef.current && hasLoaded) {
+			logEvent('Alert: List page visited', {
+				number: rules.length,
+			});
+			logEventCalledRef.current = true;
 		}
+	}, [hasLoaded, rules.length]);
 
-		return [
-			...columns,
-			{
-				id: 'actions',
-				header: '',
-				accessorKey: 'id',
-				width: { min: 50, default: 50 },
-				enableSort: false,
-				enableRemove: false,
-				enableMove: false,
-				pin: 'right' as const,
-				cell: ({ row }: { row: AlertRule }): JSX.Element => (
-					<div className={styles.actionsColumn}>
-						<ActionsMenu rule={row} onEdit={handleEdit} />
-					</div>
-				),
-			},
-		];
-	}, [action, columns, handleEdit]);
+	useEffect(() => {
+		if (isError) {
+			notifications.error({
+				message: apiError?.getErrorMessage() || t('something_went_wrong'),
+			});
+		}
+	}, [isError, apiError, t, notifications]);
 
-	const hasActiveFilters =
-		searchText.length > 0 || (filterValues ?? []).length > 0;
-	const isEmptyDueToFilters =
-		!isFetching &&
-		filteredRules.length === 0 &&
-		hasActiveFilters &&
-		allRules.length > 0;
-	const isEmptyNoRules = !isFetching && !isError && allRules.length === 0;
+	if (isError) {
+		return <div>{apiError?.getErrorMessage() || t('something_went_wrong')}</div>;
+	}
+
+	if (isLoading || !data) {
+		return <Spinner height="75vh" tip="Loading Rules..." />;
+	}
+
+	if (rules.length === 0) {
+		return <AlertsEmptyState />;
+	}
 
 	return (
-		<div className={styles.container}>
-			{!isEmptyNoRules && (
-				<div className={styles.header}>
-					<div className={styles.refreshRow}>
-						<ColumnSelector columns={columns} storageKey="alert-rules-columns" />
-						{addNewAlert && (
-							<Button
-								variant="solid"
-								size="sm"
-								prefix={<Plus size={14} />}
-								onClick={handleNewAlert}
-								color="primary"
-							>
-								New Alert
-							</Button>
-						)}
-						<TextToolTip
-							text="More details on how to create alerts"
-							url="https://signoz.io/docs/alerts/?utm_source=product&utm_medium=list-alerts"
-							urlText="Learn More"
-						/>
-					</div>
-				</div>
-			)}
-
-			{!isEmptyNoRules && (
-				<div className={styles.filtersRow}>
-					<Input
-						className={styles.searchInput}
-						placeholder="Search by Alert Name, Severity and Labels"
-						value={searchText}
-						onChange={handleSearchChange}
-						suffix={<Search size={14} className={styles.searchIcon} />}
-					/>
-				</div>
-			)}
-
-			<div className={styles.tableContainer}>
-				{isError ? (
-					<ErrorEmptyState title="Failed to load alert rules" onRefresh={refetch} />
-				) : isEmptyDueToFilters ? (
-					<NoResultsEmptyState
-						title="No matching alert rules"
-						subtitle="No alert rules match your search. Try adjusting your search criteria."
-						onClear={handleClearFilters}
-						clearButtonText="Clear Search"
-					/>
-				) : isEmptyNoRules ? (
-					<AlertsEmptyState onRefresh={refetch} />
-				) : (
-					<TanStackTable<AlertRule>
-						data={paginatedRules}
-						columns={columnsWithActions}
-						isLoading={isFetching}
-						getRowKey={(row): string => row.id ?? ''}
-						getItemKey={(row): string => row.id ?? ''}
-						columnStorageKey="alert-rules-columns"
-						enableQueryParams={QUERY_PARAMS_CONFIG}
-						onRowClick={handleRowClick}
-						onRowClickNewTab={handleRowClickNewTab}
-						pagination={{
-							total: filteredRules.length,
-							defaultPage: DEFAULT_PAGE,
-							defaultLimit: DEFAULT_LIMIT,
-							showTotalCount: true,
-						}}
-						paginationClassname={styles.paginationContainer}
-					/>
-				)}
-			</div>
-		</div>
+		<Space direction="vertical" size="large" style={{ width: '100%' }}>
+			<ListAlert allAlertRules={rules} refetch={refetch} />
+		</Space>
 	);
 }
 

frontend/src/container/ListAlertRules/styles.ts

@@ -0,0 +1,28 @@
+import { Button as ButtonComponent } from 'antd';
+import styled from 'styled-components';
+
+export const SearchContainer = styled.div`
+	&&& {
+		display: flex;
+		margin-bottom: 2rem;
+		align-items: center;
+		gap: 2rem;
+	}
+`;
+
+export const Button = styled(ButtonComponent)`
+	&&& {
+		margin-left: 1em;
+	}
+`;
+
+export const ColumnButton = styled(ButtonComponent)`
+	&&& {
+		padding-left: 0;
+		padding-right: 0;
+		margin-right: 1.5em;
+		width: 100%;
+		display: flex;
+		align-items: center;
+	}
+`;

frontend/src/container/ListAlertRules/table.config.tsx

@@ -1,154 +0,0 @@
-import { Badge, BadgeColor } from '@signozhq/ui/badge';
-import { SEVERITY_BADGE_COLORS } from 'components/Alerts/constants';
-import LabelColumn from 'components/Alerts/LabelColumn';
-import type { TableColumnDef } from 'components/TanStackTableView';
-import TanStackTable from 'components/TanStackTableView';
-import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
-
-import type { AlertRule } from './types';
-
-const STATE_CONFIG: Record<string, { color: BadgeColor; label: string }> = {
-	firing: { color: 'error', label: 'Firing' },
-	inactive: { color: 'success', label: 'OK' },
-	pending: { color: 'warning', label: 'Pending' },
-	disabled: { color: 'secondary', label: 'Disabled' },
-};
-
-export function getAlertRuleColumns(
-	formatTimezoneAdjustedTimestamp: (date: string, format: string) => string,
-): TableColumnDef<AlertRule>[] {
-	return [
-		{
-			id: 'state',
-			header: 'Status',
-			accessorKey: 'state',
-			width: { min: 80, default: 100 },
-			enableSort: true,
-			enableRemove: false,
-			enableMove: false,
-			cell: ({ value }): JSX.Element => {
-				const state = String(value ?? '').toLowerCase();
-				const config = STATE_CONFIG[state] ?? {
-					color: 'secondary' as BadgeColor,
-					label: 'Unknown',
-				};
-				return (
-					<Badge color={config.color} variant="outline">
-						{config.label}
-					</Badge>
-				);
-			},
-		},
-		{
-			id: 'name',
-			header: 'Alert Name',
-			accessorKey: 'alert',
-			width: { min: 200, default: 300 },
-			enableSort: true,
-			enableRemove: false,
-			enableMove: false,
-			cell: ({ value }): JSX.Element => (
-				<TanStackTable.Text>{String(value ?? '-')}</TanStackTable.Text>
-			),
-		},
-		{
-			id: 'severity',
-			header: 'Severity',
-			accessorFn: (row) => row.labels?.severity ?? '',
-			width: { min: 120, default: 120 },
-			enableSort: true,
-			enableMove: false,
-			cell: ({ value }): JSX.Element => {
-				const severity = String(value ?? '').toLowerCase();
-				if (!severity) {
-					return <TanStackTable.Text>-</TanStackTable.Text>;
-				}
-				return (
-					<Badge
-						color={SEVERITY_BADGE_COLORS[severity] ?? 'secondary'}
-						variant="outline"
-					>
-						{severity}
-					</Badge>
-				);
-			},
-		},
-		{
-			id: 'labels',
-			header: 'Labels',
-			accessorKey: 'labels',
-			width: { min: 150, default: 250 },
-			enableSort: false,
-			enableMove: false,
-			cell: ({ value }): JSX.Element => {
-				const labels = value as Record<string, string> | undefined;
-				if (!labels) {
-					return <TanStackTable.Text>-</TanStackTable.Text>;
-				}
-
-				const tagKeys = Object.keys(labels).filter((k) => k !== 'severity');
-				if (!tagKeys.length) {
-					return <TanStackTable.Text>-</TanStackTable.Text>;
-				}
-
-				return <LabelColumn labels={tagKeys} value={labels} color="sakura" />;
-			},
-		},
-		{
-			id: 'createdAt',
-			header: 'Created At',
-			accessorKey: 'createdAt',
-			width: { min: 180, default: 200 },
-			enableSort: true,
-			enableMove: false,
-			defaultVisibility: false,
-			cell: ({ value }): JSX.Element => (
-				<TanStackTable.Text>
-					{value
-						? formatTimezoneAdjustedTimestamp(String(value), DATE_TIME_FORMATS.UTC_US)
-						: '-'}
-				</TanStackTable.Text>
-			),
-		},
-		{
-			id: 'createdBy',
-			header: 'Created By',
-			accessorKey: 'createdBy',
-			width: { min: 100, default: 120 },
-			enableSort: false,
-			enableMove: false,
-			defaultVisibility: false,
-			cell: ({ value }): JSX.Element => (
-				<TanStackTable.Text>{String(value ?? '-')}</TanStackTable.Text>
-			),
-		},
-		{
-			id: 'updatedAt',
-			header: 'Updated At',
-			accessorKey: 'updatedAt',
-			width: { min: 180, default: 200 },
-			enableSort: true,
-			enableMove: false,
-			defaultVisibility: false,
-			cell: ({ value }): JSX.Element => (
-				<TanStackTable.Text>
-					{value
-						? formatTimezoneAdjustedTimestamp(String(value), DATE_TIME_FORMATS.UTC_US)
-						: '-'}
-				</TanStackTable.Text>
-			),
-		},
-		{
-			id: 'updatedBy',
-			header: 'Updated By',
-			accessorKey: 'updatedBy',
-			width: { min: 100, default: 120 },
-			enableSort: false,
-			enableMove: false,
-			defaultVisibility: false,
-			cell: ({ value }): JSX.Element => (
-				<TanStackTable.Text>{String(value ?? '-')}</TanStackTable.Text>
-			),
-		},
-	];
-}

frontend/src/container/ListAlertRules/types.ts

@@ -1,3 +0,0 @@
-import type { RuletypesRuleDTO } from 'api/generated/services/sigNoz.schemas';
-
-export type AlertRule = RuletypesRuleDTO;

frontend/src/container/ListAlertRules/useAlertRulesData.ts

@@ -1,55 +0,0 @@
-import { useEffect, useMemo, useRef } from 'react';
-import logEvent from 'api/common/logEvent';
-import { useListRules } from 'api/generated/services/rules';
-import { searchByLabels } from 'components/Alerts/utils';
-import type { SortState } from 'components/TanStackTableView/types';
-import { isUndefined } from 'lodash-es';
-
-import type { AlertRule } from './types';
-import { filterRulesByFilters, sortRules } from './utils';
-
-interface UseAlertRulesDataReturn {
-	allRules: AlertRule[];
-	filteredRules: AlertRule[];
-	isFetching: boolean;
-	isError: boolean;
-	refetch: () => void;
-}
-
-export function useAlertRulesData(
-	orderBy: SortState | null,
-	searchText = '',
-	filters: string[] = [],
-): UseAlertRulesDataReturn {
-	const hasLoggedEvent = useRef(false);
-
-	const rulesResponse = useListRules();
-
-	const allRules = useMemo(
-		() => rulesResponse.data?.data ?? [],
-		[rulesResponse.data],
-	);
-
-	useEffect(() => {
-		if (!hasLoggedEvent.current && !isUndefined(rulesResponse.data?.data)) {
-			void logEvent('Alert: List page visited', {
-				number: allRules.length,
-			});
-			hasLoggedEvent.current = true;
-		}
-	}, [rulesResponse.data, allRules.length]);
-
-	const filteredRules = useMemo(() => {
-		const filtered = filterRulesByFilters(allRules, filters);
-		const searched = searchByLabels(filtered, searchText, (r) => r.alert ?? '');
-		return sortRules(searched, orderBy);
-	}, [allRules, filters, searchText, orderBy]);
-
-	return {
-		allRules,
-		filteredRules,
-		isFetching: rulesResponse.isFetching,
-		isError: rulesResponse.isError,
-		refetch: rulesResponse.refetch,
-	};
-}

frontend/src/container/ListAlertRules/useAlertRulesHandlers.ts

@@ -1,82 +0,0 @@
-import { useCallback } from 'react';
-import logEvent from 'api/common/logEvent';
-import { QueryParams } from 'constants/query';
-import ROUTES from 'constants/routes';
-import { sanitizeDefaultAlertQuery } from 'container/EditAlertV2/utils';
-import { useSafeNavigate } from 'hooks/useSafeNavigate';
-import { useTableRowClick } from 'hooks/useTableRowClick';
-import useUrlQuery from 'hooks/useUrlQuery';
-import { mapQueryDataFromApi } from 'lib/newQueryBuilder/queryBuilderMappers/mapQueryDataFromApi';
-import { toCompositeMetricQuery } from 'types/api/alerts/convert';
-import { isModifierKeyPressed } from 'utils/app';
-
-import type { AlertRule } from './types';
-
-interface UseAlertRulesHandlersReturn {
-	handleEdit: (rule: AlertRule, options?: { newTab?: boolean }) => void;
-	handleNewAlert: (e: React.MouseEvent) => void;
-	handleRowClick: (rule: AlertRule) => void;
-	handleRowClickNewTab: (rule: AlertRule) => void;
-}
-
-export function useAlertRulesHandlers(
-	allRulesCount: number,
-): UseAlertRulesHandlersReturn {
-	const { safeNavigate } = useSafeNavigate();
-	const params = useUrlQuery();
-
-	const getEditUrl = useCallback(
-		(rule: AlertRule): string => {
-			const compositeQuery = sanitizeDefaultAlertQuery(
-				mapQueryDataFromApi(toCompositeMetricQuery(rule.condition.compositeQuery)),
-				rule.alertType,
-			);
-			params.set(
-				QueryParams.compositeQuery,
-				encodeURIComponent(JSON.stringify(compositeQuery)),
-			);
-
-			const panelType = rule.condition.compositeQuery.panelType;
-			if (panelType) {
-				params.set(QueryParams.panelTypes, panelType);
-			}
-
-			params.set(QueryParams.ruleId, rule.id);
-
-			return `${ROUTES.ALERT_OVERVIEW}?${params.toString()}`;
-		},
-		[params],
-	);
-
-	const handleEdit = useCallback(
-		(rule: AlertRule, options?: { newTab?: boolean }): void => {
-			safeNavigate(getEditUrl(rule), options);
-		},
-		[getEditUrl, safeNavigate],
-	);
-
-	const handleNewAlert = useCallback(
-		(e: React.MouseEvent): void => {
-			void logEvent('Alert: New alert button clicked', {
-				number: allRulesCount,
-				layout: 'new',
-			});
-			safeNavigate(ROUTES.ALERT_TYPE_SELECTION, {
-				newTab: isModifierKeyPressed(e),
-			});
-		},
-		[allRulesCount, safeNavigate],
-	);
-
-	const { handleRowClick, handleRowClickNewTab } = useTableRowClick<AlertRule>({
-		getUrl: getEditUrl,
-		onNavigate: safeNavigate,
-	});
-
-	return {
-		handleEdit,
-		handleNewAlert,
-		handleRowClick,
-		handleRowClickNewTab,
-	};
-}

frontend/src/container/ListAlertRules/utils.ts

@@ -1,92 +1,59 @@
 import logEvent from 'api/common/logEvent';
 import type { RuletypesRuleDTO } from 'api/generated/services/sigNoz.schemas';
-import { sortByColumn } from 'components/Alerts/utils';
-import type { SortState } from 'components/TanStackTableView/types';
 import { dataSourceForAlertType } from 'constants/alerts';
 
-import type { AlertRule } from './types';
+export const filterAlerts = (
+	allAlertRules: RuletypesRuleDTO[],
+	filter: string,
+): RuletypesRuleDTO[] => {
+	if (!filter.trim()) {
+		return allAlertRules;
+	}
 
-export const ALERT_RULES_REFRESH_INTERVAL = 30_000;
+	const value = filter.trim().toLowerCase();
+	return allAlertRules.filter((alert) => {
+		const alertName = alert.alert.toLowerCase();
+		const severity = alert.labels?.severity?.toLowerCase();
 
-export const ALERT_ACTIONS = {
-	TOGGLE: 'toggle',
-	EDIT: 'edit',
-	CLONE: 'clone',
-	DELETE: 'delete',
-} as const;
+		// Create a string of all label keys and values for searching
+		const labelSearchString = Object.entries(alert.labels || {})
+			.map(([key, val]) => `${key} ${val}`)
+			.join(' ')
+			.toLowerCase();
 
-const ACTION_LABELS: Record<string, string> = {
-	[ALERT_ACTIONS.TOGGLE]: 'Enable/Disable',
-	[ALERT_ACTIONS.EDIT]: 'Edit',
-	[ALERT_ACTIONS.CLONE]: 'Clone',
-	[ALERT_ACTIONS.DELETE]: 'Delete',
+		return (
+			alertName.includes(value) ||
+			severity?.includes(value) ||
+			labelSearchString.includes(value)
+		);
+	});
 };
 
 export const alertActionLogEvent = (
 	action: string,
 	record: RuletypesRuleDTO,
 ): void => {
-	const actionValue = ACTION_LABELS[action] ?? action;
-	void logEvent('Alert: Action', {
+	let actionValue = '';
+	switch (action) {
+		case '0':
+			actionValue = 'Enable/Disable';
+			break;
+		case '1':
+			actionValue = 'Edit';
+			break;
+		case '2':
+			actionValue = 'Clone';
+			break;
+		case '3':
+			actionValue = 'Delete';
+			break;
+		default:
+			break;
+	}
+	logEvent('Alert: Action', {
 		ruleId: record.id,
 		dataSource: dataSourceForAlertType(record.alertType),
 		name: record.alert,
 		action: actionValue,
 	});
 };
-
-export function getAlertSortValue(
-	rule: AlertRule,
-	columnName: string,
-): string | number {
-	switch (columnName) {
-		case 'state':
-			return rule.state ?? '';
-		case 'name':
-			return rule.alert ?? '';
-		case 'severity':
-			return rule.labels?.severity ?? '';
-		case 'createdAt':
-			return rule.createdAt ? new Date(rule.createdAt).getTime() : 0;
-		case 'updatedAt':
-			return rule.updatedAt ? new Date(rule.updatedAt).getTime() : 0;
-		default:
-			return '';
-	}
-}
-
-export function sortRules(
-	rules: AlertRule[],
-	orderBy: SortState | null,
-): AlertRule[] {
-	return sortByColumn(rules, orderBy, getAlertSortValue);
-}
-
-export function filterRulesByFilters(
-	rules: AlertRule[],
-	filters: string[],
-): AlertRule[] {
-	if (filters.length === 0) {
-		return rules;
-	}
-
-	const stateFilters = filters
-		.filter((f) => f.startsWith('state:'))
-		.map((f) => f.replace('state:', '').toLowerCase());
-
-	const severityFilters = filters
-		.filter((f) => f.startsWith('severity:'))
-		.map((f) => f.replace('severity:', '').toLowerCase());
-
-	return rules.filter((rule) => {
-		const state = rule.state?.toLowerCase() ?? '';
-		const severity = rule.labels?.severity?.toLowerCase() ?? '';
-
-		const matchesState =
-			stateFilters.length === 0 || stateFilters.includes(state);
-		const matchesSeverity =
-			severityFilters.length === 0 || severityFilters.includes(severity);
-
-		return matchesState && matchesSeverity;
-	});
-}

frontend/src/container/MCPServerSettings/CopyIconButton.tsx

@@ -1,5 +1,5 @@
 import { Button } from '@signozhq/ui/button';
-import { TooltipSimple } from '@signozhq/ui/tooltip';
+import { Tooltip, TooltipProvider } from '@signozhq/ui/tooltip';
 import { Copy } from '@signozhq/icons';
 import './CopyIconButton.styles.scss';
 
@@ -19,20 +19,22 @@ function CopyIconButton({
 		: 'Copy to clipboard';
 
 	return (
-		<TooltipSimple title={tooltipTitle}>
-			<span>
-				<Button
-					color="secondary"
-					variant="ghost"
-					size="icon"
-					aria-label={ariaLabel}
-					disabled={disabled}
-					className="mcp-copy-btn"
-					prefix={<Copy size={14} />}
-					onClick={onCopy}
-				/>
-			</span>
-		</TooltipSimple>
+		<TooltipProvider>
+			<Tooltip title={tooltipTitle}>
+				<span>
+					<Button
+						color="secondary"
+						variant="ghost"
+						size="icon"
+						aria-label={ariaLabel}
+						disabled={disabled}
+						className="mcp-copy-btn"
+						prefix={<Copy size={14} />}
+						onClick={onCopy}
+					/>
+				</span>
+			</Tooltip>
+		</TooltipProvider>
 	);
 }
 

frontend/src/container/MembersSettings/__tests__/MembersSettings.integration.test.tsx

@@ -1,6 +1,6 @@
 import type { TypesUserDTO } from 'api/generated/services/sigNoz.schemas';
 import { rest, server } from 'mocks-server/server';
-import { render, screen, userEvent } from 'tests/test-utils';
+import { fireEvent, render, screen } from 'tests/test-utils';
 
 import MembersSettings from '../MembersSettings';
 
@@ -76,32 +76,27 @@ describe('MembersSettings (integration)', () => {
 	});
 
 	it('filters to pending invites via the filter dropdown', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-
 		render(<MembersSettings />);
 
 		await screen.findByText('Alice Smith');
 
-		await user.click(screen.getByRole('button', { name: /all members/i }));
+		fireEvent.click(screen.getByRole('button', { name: /all members/i }));
 
 		const pendingOption = await screen.findByText(/pending invites/i);
-		await user.click(pendingOption);
+		fireEvent.click(pendingOption);
 
 		await screen.findByText('charlie@signoz.io');
 		expect(screen.queryByText('Alice Smith')).not.toBeInTheDocument();
 	});
 
 	it('filters members by name using the search input', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-
 		render(<MembersSettings />);
 
 		await screen.findByText('Alice Smith');
 
-		await user.type(
-			screen.getByPlaceholderText(/Search by name or email/i),
-			'bob',
-		);
+		fireEvent.change(screen.getByPlaceholderText(/Search by name or email/i), {
+			target: { value: 'bob' },
+		});
 
 		await screen.findByText('Bob Jones');
 		expect(screen.queryByText('Alice Smith')).not.toBeInTheDocument();
@@ -109,31 +104,25 @@ describe('MembersSettings (integration)', () => {
 	});
 
 	it('opens EditMemberDrawer when an active member row is clicked', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-
 		render(<MembersSettings />);
 
-		await user.click(await screen.findByText('Alice Smith'));
+		fireEvent.click(await screen.findByText('Alice Smith'));
 
 		await screen.findByText('Member Details');
 	});
 
 	it('opens EditMemberDrawer when a deleted member row is clicked', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-
 		render(<MembersSettings />);
 
-		await user.click(await screen.findByText('Dave Deleted'));
+		fireEvent.click(await screen.findByText('Dave Deleted'));
 
 		expect(screen.queryByText('Member Details')).toBeInTheDocument();
 	});
 
 	it('opens InviteMembersModal when "Invite member" button is clicked', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-
 		render(<MembersSettings />);
 
-		await user.click(screen.getByRole('button', { name: /invite member/i }));
+		fireEvent.click(screen.getByRole('button', { name: /invite member/i }));
 
 		await expect(
 			screen.findAllByPlaceholderText('john@signoz.io'),

frontend/src/container/OrganizationSettings/AuthDomain/__tests__/CreateEdit.test.tsx

@@ -117,8 +117,7 @@ describe('CreateEdit Modal', () => {
 		});
 	});
 
-	// Todo: to fixed properly - failing with - due to timeout > 5000ms
-	describe.skip('Form Validation', () => {
+	describe('Form Validation', () => {
 		it('shows validation error when submitting without required fields', async () => {
 			const user = userEvent.setup({ pointerEventsCheck: 0 });
 
@@ -127,7 +126,7 @@ describe('CreateEdit Modal', () => {
 			const configureButtons = await screen.findAllByRole('button', {
 				name: /configure/i,
 			});
-			await user.click(configureButtons[0]);
+			fireEvent.click(configureButtons[0]);
 
 			const saveButton = await screen.findByRole('button', {
 				name: /save changes/i,
@@ -338,11 +337,8 @@ describe('CreateEdit Modal', () => {
 		});
 	});
 
-	// Todo: to fixed properly - failing with - due to timeout > 5000ms
-	describe.skip('Modal Actions', () => {
-		it('calls onClose when cancel button is clicked', async () => {
-			const user = userEvent.setup({ pointerEventsCheck: 0 });
-
+	describe('Modal Actions', () => {
+		it('calls onClose when cancel button is clicked', () => {
 			render(
 				<CreateEdit
 					isCreate={false}
@@ -352,7 +348,7 @@ describe('CreateEdit Modal', () => {
 			);
 
 			const cancelButton = screen.getByRole('button', { name: /cancel/i });
-			await user.click(cancelButton);
+			fireEvent.click(cancelButton);
 
 			expect(mockOnClose).toHaveBeenCalled();
 		});

frontend/src/container/RolesSettings/RoleDetails/__tests__/RoleDetailsPage.test.tsx

@@ -1,13 +1,20 @@
-// Ungate feature flag for all tests in this file
 jest.mock('../../config', () => ({ IS_ROLE_DETAILS_AND_CRUD_ENABLED: true }));
 
+import * as roleApi from 'api/generated/services/role';
 import {
 	customRoleResponse,
 	managedRoleResponse,
 } from 'mocks-server/__mockdata__/roles';
 import { server } from 'mocks-server/server';
 import { rest } from 'msw';
-import { render, screen, userEvent, waitFor, within } from 'tests/test-utils';
+import {
+	fireEvent,
+	render,
+	screen,
+	userEvent,
+	waitFor,
+	within,
+} from 'tests/test-utils';
 
 import RoleDetailsPage from '../RoleDetailsPage';
 
@@ -22,7 +29,7 @@ const allScopeObjectsResponse = {
 	status: 'success',
 	data: [
 		{
-			resource: { name: 'dashboard', type: 'dashboard' },
+			resource: { kind: 'role', type: 'metaresources' },
 			selectors: ['*'],
 		},
 	],
@@ -44,8 +51,7 @@ afterEach(() => {
 	server.resetHandlers();
 });
 
-// Todo: to fixed properly - failing with - due to timeout > 5000ms
-describe.skip('RoleDetailsPage', () => {
+describe('RoleDetailsPage', () => {
 	it('renders custom role header, tabs, description, permissions, and action buttons', async () => {
 		setupDefaultHandlers();
 
@@ -57,20 +63,16 @@ describe.skip('RoleDetailsPage', () => {
 			screen.findByText('Role — billing-manager'),
 		).resolves.toBeInTheDocument();
 
-		// Tab navigation
 		expect(screen.getByText('Overview')).toBeInTheDocument();
 		expect(screen.getByText('Members')).toBeInTheDocument();
 
-		// Role description (OverviewTab)
 		expect(
 			screen.getByText('Custom role for managing billing and invoices.'),
 		).toBeInTheDocument();
 
-		// Permission items derived from mocked authz relations
 		expect(screen.getByText('Create')).toBeInTheDocument();
 		expect(screen.getByText('Read')).toBeInTheDocument();
 
-		// Action buttons present for custom role
 		expect(
 			screen.getByRole('button', { name: /edit role details/i }),
 		).toBeInTheDocument();
@@ -96,14 +98,13 @@ describe.skip('RoleDetailsPage', () => {
 			),
 		).toBeInTheDocument();
 
-		// Action buttons absent for managed role
 		expect(screen.queryByText('Edit Role Details')).not.toBeInTheDocument();
 		expect(
 			screen.queryByRole('button', { name: /delete role/i }),
 		).not.toBeInTheDocument();
 	});
 
-	it('edit flow: modal opens pre-filled and calls PATCH on save and verify', async () => {
+	it('edit flow: modal opens pre-filled and calls PATCH on save', async () => {
 		const patchSpy = jest.fn();
 		let description = customRoleResponse.data.description;
 		server.use(
@@ -138,21 +139,16 @@ describe.skip('RoleDetailsPage', () => {
 
 		await screen.findByText('Role — billing-manager');
 
-		// Open the edit modal
 		await user.click(screen.getByRole('button', { name: /edit role details/i }));
 		await expect(
-			screen.findByText('Edit Role Details', {
-				selector: '.ant-modal-title',
-			}),
+			screen.findByText('Edit Role Details', { selector: '.ant-modal-title' }),
 		).resolves.toBeInTheDocument();
 
-		// Name field is disabled in edit mode (role rename is not allowed)
 		const nameInput = screen.getByPlaceholderText(
 			'Enter role name e.g. : Service Owner',
 		);
 		expect(nameInput).toBeDisabled();
 
-		// Update description and save
 		const descField = screen.getByPlaceholderText(
 			'A helpful description of the role',
 		);
@@ -168,9 +164,7 @@ describe.skip('RoleDetailsPage', () => {
 
 		await waitFor(() =>
 			expect(
-				screen.queryByText('Edit Role Details', {
-					selector: '.ant-modal-title',
-				}),
+				screen.queryByText('Edit Role Details', { selector: '.ant-modal-title' }),
 			).not.toBeInTheDocument(),
 		);
 
@@ -219,58 +213,61 @@ describe.skip('RoleDetailsPage', () => {
 	});
 
 	describe('permission side panel', () => {
-		async function openCreatePanel(
-			user: ReturnType<typeof userEvent.setup>,
-		): Promise<void> {
+		beforeEach(() => {
+			// Both hooks mocked so data renders synchronously — no React Query scheduler or MSW round-trip.
+			jest.spyOn(roleApi, 'useGetRole').mockReturnValue({
+				data: customRoleResponse,
+				isLoading: false,
+				isFetching: false,
+				isError: false,
+				error: null,
+			} as any);
+			jest
+				.spyOn(roleApi, 'useGetObjects')
+				.mockReturnValue({ data: emptyObjectsResponse, isLoading: false } as any);
+		});
+
+		afterEach(() => {
+			jest.restoreAllMocks();
+		});
+
+		async function openCreatePanel(): Promise<HTMLElement> {
 			await screen.findByText('Role — billing-manager');
-			await user.click(screen.getByText('Create'));
+			fireEvent.click(screen.getByText('Create'));
 			await screen.findByText('Edit Create Permissions');
-			await screen.findByRole('button', { name: /dashboard/i });
+			const panel = document.querySelector(
+				'.permission-side-panel',
+			) as HTMLElement;
+			await within(panel).findByRole('button', { name: 'Role' });
+			return panel;
 		}
 
 		it('Save Changes is disabled until a resource scope is changed', async () => {
-			setupDefaultHandlers();
-			server.use(
-				rest.get(
-					`${rolesApiBase}/:id/relation/:relation/objects`,
-					(_req, res, ctx) => res(ctx.status(200), ctx.json(emptyObjectsResponse)),
-				),
-			);
-
-			const user = userEvent.setup({ pointerEventsCheck: 0 });
-
 			render(<RoleDetailsPage />, undefined, {
 				initialRoute: `/settings/roles/${CUSTOM_ROLE_ID}`,
 			});
 
-			await openCreatePanel(user);
-
-			// No change yet — config matches initial, unsavedCount = 0
-			expect(screen.getByRole('button', { name: /save changes/i })).toBeDisabled();
-
-			// Expand Dashboard and flip to All — now Save is enabled
-			await user.click(screen.getByRole('button', { name: /dashboard/i }));
-			await user.click(screen.getByText('All'));
+			const panel = await openCreatePanel();
 
 			expect(
-				screen.getByRole('button', { name: /save changes/i }),
-			).not.toBeDisabled();
+				within(panel).getByRole('button', { name: /save changes/i }),
+			).toBeDisabled();
 
-			// check for what shown now - unsavedCount = 1
+			fireEvent.click(within(panel).getByRole('button', { name: 'Role' }));
+			fireEvent.click(screen.getByText('All'));
+
+			expect(
+				within(panel).getByRole('button', { name: /save changes/i }),
+			).not.toBeDisabled();
 			expect(screen.getByText('1 unsaved change')).toBeInTheDocument();
 		});
 
 		it('set scope to All → patchObjects additions: ["*"], deletions: null', async () => {
 			const patchSpy = jest.fn();
 
-			setupDefaultHandlers();
 			server.use(
-				rest.get(
-					`${rolesApiBase}/:id/relation/:relation/objects`,
-					(_req, res, ctx) => res(ctx.status(200), ctx.json(emptyObjectsResponse)),
-				),
 				rest.patch(
-					`${rolesApiBase}/:id/relation/:relation/objects`,
+					`${rolesApiBase}/:id/relations/:relation/objects`,
 					async (req, res, ctx) => {
 						patchSpy(await req.json());
 						return res(ctx.status(200), ctx.json({ status: 'success', data: null }));
@@ -278,23 +275,23 @@ describe.skip('RoleDetailsPage', () => {
 				),
 			);
 
-			const user = userEvent.setup({ pointerEventsCheck: 0 });
-
 			render(<RoleDetailsPage />, undefined, {
 				initialRoute: `/settings/roles/${CUSTOM_ROLE_ID}`,
 			});
 
-			await openCreatePanel(user);
+			const panel = await openCreatePanel();
 
-			await user.click(screen.getByRole('button', { name: /dashboard/i }));
-			await user.click(screen.getByText('All'));
-			await user.click(screen.getByRole('button', { name: /save changes/i }));
+			fireEvent.click(within(panel).getByRole('button', { name: 'Role' }));
+			fireEvent.click(screen.getByText('All'));
+			fireEvent.click(
+				within(panel).getByRole('button', { name: /save changes/i }),
+			);
 
 			await waitFor(() =>
 				expect(patchSpy).toHaveBeenCalledWith({
 					additions: [
 						{
-							resource: { name: 'dashboard', type: 'dashboard' },
+							resource: { kind: 'role', type: 'metaresources' },
 							selectors: ['*'],
 						},
 					],
@@ -306,14 +303,9 @@ describe.skip('RoleDetailsPage', () => {
 		it('set scope to Only selected with IDs → patchObjects additions contain those IDs', async () => {
 			const patchSpy = jest.fn();
 
-			setupDefaultHandlers();
 			server.use(
-				rest.get(
-					`${rolesApiBase}/:id/relation/:relation/objects`,
-					(_req, res, ctx) => res(ctx.status(200), ctx.json(emptyObjectsResponse)),
-				),
 				rest.patch(
-					`${rolesApiBase}/:id/relation/:relation/objects`,
+					`${rolesApiBase}/:id/relations/:relation/objects`,
 					async (req, res, ctx) => {
 						patchSpy(await req.json());
 						return res(ctx.status(200), ctx.json({ status: 'success', data: null }));
@@ -327,23 +319,25 @@ describe.skip('RoleDetailsPage', () => {
 				initialRoute: `/settings/roles/${CUSTOM_ROLE_ID}`,
 			});
 
-			await openCreatePanel(user);
+			const panel = await openCreatePanel();
 
-			await user.click(screen.getByRole('button', { name: /dashboard/i }));
+			fireEvent.click(within(panel).getByRole('button', { name: 'Role' }));
 
-			const combobox = screen.getByRole('combobox');
-			await user.click(combobox);
-			await user.type(combobox, 'dash-1');
+			const combobox = within(panel).getByRole('combobox');
+			await user.type(combobox, 'role-001');
 			await user.keyboard('{Enter}');
 
-			await user.click(screen.getByRole('button', { name: /save changes/i }));
+			// user.click waits for the tag-addition state to settle before clicking.
+			await user.click(
+				within(panel).getByRole('button', { name: /save changes/i }),
+			);
 
 			await waitFor(() =>
 				expect(patchSpy).toHaveBeenCalledWith({
 					additions: [
 						{
-							resource: { name: 'dashboard', type: 'dashboard' },
-							selectors: ['dash-1'],
+							resource: { kind: 'role', type: 'metaresources' },
+							selectors: ['role-001'],
 						},
 					],
 					deletions: null,
@@ -354,15 +348,13 @@ describe.skip('RoleDetailsPage', () => {
 		it('existing All scope changed to Only selected (empty) → patchObjects deletions: ["*"], additions: null', async () => {
 			const patchSpy = jest.fn();
 
-			setupDefaultHandlers();
+			jest.spyOn(roleApi, 'useGetObjects').mockReturnValue({
+				data: allScopeObjectsResponse,
+				isLoading: false,
+			} as any);
 			server.use(
-				rest.get(
-					`${rolesApiBase}/:id/relation/:relation/objects`,
-					(_req, res, ctx) =>
-						res(ctx.status(200), ctx.json(allScopeObjectsResponse)),
-				),
 				rest.patch(
-					`${rolesApiBase}/:id/relation/:relation/objects`,
+					`${rolesApiBase}/:id/relations/:relation/objects`,
 					async (req, res, ctx) => {
 						patchSpy(await req.json());
 						return res(ctx.status(200), ctx.json({ status: 'success', data: null }));
@@ -370,26 +362,24 @@ describe.skip('RoleDetailsPage', () => {
 				),
 			);
 
-			const user = userEvent.setup({ pointerEventsCheck: 0 });
-
 			render(<RoleDetailsPage />, undefined, {
 				initialRoute: `/settings/roles/${CUSTOM_ROLE_ID}`,
 			});
 
-			await openCreatePanel(user);
+			const panel = await openCreatePanel();
 
-			await user.click(screen.getByRole('button', { name: /dashboard/i }));
+			fireEvent.click(within(panel).getByRole('button', { name: 'Role' }));
+			fireEvent.click(screen.getByText('Only selected'));
+			fireEvent.click(
+				within(panel).getByRole('button', { name: /save changes/i }),
+			);
 
-			await user.click(screen.getByText('Only selected'));
-			await user.click(screen.getByRole('button', { name: /save changes/i }));
-
-			// Should delete the '*' selector and add nothing
 			await waitFor(() =>
 				expect(patchSpy).toHaveBeenCalledWith({
 					additions: null,
 					deletions: [
 						{
-							resource: { name: 'dashboard', type: 'dashboard' },
+							resource: { kind: 'role', type: 'metaresources' },
 							selectors: ['*'],
 						},
 					],
@@ -398,36 +388,25 @@ describe.skip('RoleDetailsPage', () => {
 		});
 
 		it('unsaved changes counter shown on scope change, Discard resets it', async () => {
-			setupDefaultHandlers();
-			server.use(
-				rest.get(
-					`${rolesApiBase}/:id/relation/:relation/objects`,
-					(_req, res, ctx) => res(ctx.status(200), ctx.json(emptyObjectsResponse)),
-				),
-			);
-
-			const user = userEvent.setup({ pointerEventsCheck: 0 });
-
 			render(<RoleDetailsPage />, undefined, {
 				initialRoute: `/settings/roles/${CUSTOM_ROLE_ID}`,
 			});
 
-			await openCreatePanel(user);
+			const panel = await openCreatePanel();
 
-			// No unsaved changes indicator yet
 			expect(screen.queryByText(/unsaved change/)).not.toBeInTheDocument();
 
-			// Change dashboard scope to "All"
-			await user.click(screen.getByRole('button', { name: /dashboard/i }));
-			await user.click(screen.getByText('All'));
+			fireEvent.click(within(panel).getByRole('button', { name: 'Role' }));
+			fireEvent.click(screen.getByText('All'));
 
 			expect(screen.getByText('1 unsaved change')).toBeInTheDocument();
 
-			// Discard reverts to initial config — counter disappears, Save re-disabled
-			await user.click(screen.getByRole('button', { name: /discard/i }));
+			fireEvent.click(within(panel).getByRole('button', { name: /discard/i }));
 
 			expect(screen.queryByText(/unsaved change/)).not.toBeInTheDocument();
-			expect(screen.getByRole('button', { name: /save changes/i })).toBeDisabled();
+			expect(
+				within(panel).getByRole('button', { name: /save changes/i }),
+			).toBeDisabled();
 		});
 	});
 });

frontend/src/container/RolesSettings/__tests__/RolesSettings.test.tsx

@@ -4,24 +4,27 @@ import {
 } from 'mocks-server/__mockdata__/roles';
 import { server } from 'mocks-server/server';
 import { rest } from 'msw';
-import { render, screen, userEvent } from 'tests/test-utils';
+import { fireEvent, render, screen } from 'tests/test-utils';
 
 import RolesSettings from '../RolesSettings';
 
 const rolesApiURL = 'http://localhost/api/v1/roles';
 
 describe('RolesSettings', () => {
-	afterEach(() => {
-		jest.clearAllMocks();
-	});
-
-	it('renders the header and search input', () => {
+	beforeEach(() => {
 		server.use(
 			rest.get(rolesApiURL, (_req, res, ctx) =>
 				res(ctx.status(200), ctx.json(listRolesSuccessResponse)),
 			),
 		);
+	});
 
+	afterEach(() => {
+		jest.clearAllMocks();
+		server.resetHandlers();
+	});
+
+	it('renders the header and search input', () => {
 		render(<RolesSettings />);
 
 		expect(screen.getByText('Roles')).toBeInTheDocument();
@@ -34,12 +37,6 @@ describe('RolesSettings', () => {
 	});
 
 	it('displays roles grouped by managed and custom sections', async () => {
-		server.use(
-			rest.get(rolesApiURL, (_req, res, ctx) =>
-				res(ctx.status(200), ctx.json(listRolesSuccessResponse)),
-			),
-		);
-
 		render(<RolesSettings />);
 
 		await expect(screen.findByText('signoz-admin')).resolves.toBeInTheDocument();
@@ -68,20 +65,13 @@ describe('RolesSettings', () => {
 	});
 
 	it('filters roles by search query on name', async () => {
-		server.use(
-			rest.get(rolesApiURL, (_req, res, ctx) =>
-				res(ctx.status(200), ctx.json(listRolesSuccessResponse)),
-			),
-		);
-
 		render(<RolesSettings />);
 
 		await expect(screen.findByText('signoz-admin')).resolves.toBeInTheDocument();
 
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-		const searchInput = screen.getByPlaceholderText('Search for roles...');
-
-		await user.type(searchInput, 'billing');
+		fireEvent.change(screen.getByPlaceholderText('Search for roles...'), {
+			target: { value: 'billing' },
+		});
 
 		await expect(
 			screen.findByText('billing-manager'),
@@ -92,20 +82,13 @@ describe('RolesSettings', () => {
 	});
 
 	it('filters roles by search query on description', async () => {
-		server.use(
-			rest.get(rolesApiURL, (_req, res, ctx) =>
-				res(ctx.status(200), ctx.json(listRolesSuccessResponse)),
-			),
-		);
-
 		render(<RolesSettings />);
 
 		await expect(screen.findByText('signoz-admin')).resolves.toBeInTheDocument();
 
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-		const searchInput = screen.getByPlaceholderText('Search for roles...');
-
-		await user.type(searchInput, 'read-only');
+		fireEvent.change(screen.getByPlaceholderText('Search for roles...'), {
+			target: { value: 'read-only' },
+		});
 
 		await expect(screen.findByText('signoz-viewer')).resolves.toBeInTheDocument();
 		expect(screen.queryByText('signoz-admin')).not.toBeInTheDocument();
@@ -113,20 +96,13 @@ describe('RolesSettings', () => {
 	});
 
 	it('shows empty state when search matches nothing', async () => {
-		server.use(
-			rest.get(rolesApiURL, (_req, res, ctx) =>
-				res(ctx.status(200), ctx.json(listRolesSuccessResponse)),
-			),
-		);
-
 		render(<RolesSettings />);
 
 		await expect(screen.findByText('signoz-admin')).resolves.toBeInTheDocument();
 
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-		const searchInput = screen.getByPlaceholderText('Search for roles...');
-
-		await user.type(searchInput, 'nonexistentrole');
+		fireEvent.change(screen.getByPlaceholderText('Search for roles...'), {
+			target: { value: 'nonexistentrole' },
+		});
 
 		await expect(
 			screen.findByText('No roles match your search.'),
@@ -183,12 +159,6 @@ describe('RolesSettings', () => {
 	});
 
 	it('renders descriptions for all roles', async () => {
-		server.use(
-			rest.get(rolesApiURL, (_req, res, ctx) =>
-				res(ctx.status(200), ctx.json(listRolesSuccessResponse)),
-			),
-		);
-
 		render(<RolesSettings />);
 
 		await expect(screen.findByText('signoz-admin')).resolves.toBeInTheDocument();

frontend/src/container/ServiceAccountsSettings/__tests__/ServiceAccountsSettings.integration.test.tsx

@@ -2,7 +2,7 @@ import type { ReactNode } from 'react';
 import { listRolesSuccessResponse } from 'mocks-server/__mockdata__/roles';
 import { rest, server } from 'mocks-server/server';
 import { NuqsTestingAdapter } from 'nuqs/adapters/testing';
-import { render, screen, userEvent, waitFor } from 'tests/test-utils';
+import { fireEvent, render, screen, waitFor } from 'tests/test-utils';
 
 import ServiceAccountsSettings from '../ServiceAccountsSettings';
 
@@ -123,8 +123,6 @@ describe('ServiceAccountsSettings (integration)', () => {
 	});
 
 	it('filter dropdown to "Active" hides DISABLED accounts', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-
 		render(
 			<NuqsTestingAdapter>
 				<ServiceAccountsSettings />
@@ -133,18 +131,16 @@ describe('ServiceAccountsSettings (integration)', () => {
 
 		await screen.findByText('CI Bot');
 
-		await user.click(screen.getByRole('button', { name: /All accounts/i }));
+		fireEvent.click(screen.getByRole('button', { name: /All accounts/i }));
 
 		const activeOption = await screen.findByText(/Active ⎯/i);
-		await user.click(activeOption);
+		fireEvent.click(activeOption);
 
 		await screen.findByText('CI Bot');
 		expect(screen.queryByText('Legacy Bot')).not.toBeInTheDocument();
 	});
 
 	it('search by name filters accounts in real-time', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-
 		render(
 			<NuqsTestingAdapter>
 				<ServiceAccountsSettings />
@@ -153,10 +149,9 @@ describe('ServiceAccountsSettings (integration)', () => {
 
 		await screen.findByText('CI Bot');
 
-		await user.type(
-			screen.getByPlaceholderText(/Search by name or email/i),
-			'legacy',
-		);
+		fireEvent.change(screen.getByPlaceholderText(/Search by name or email/i), {
+			target: { value: 'legacy' },
+		});
 
 		await screen.findByText('Legacy Bot');
 		expect(screen.queryByText('CI Bot')).not.toBeInTheDocument();
@@ -164,15 +159,13 @@ describe('ServiceAccountsSettings (integration)', () => {
 	});
 
 	it('clicking a row opens the drawer with account details visible', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-
 		render(
 			<NuqsTestingAdapter hasMemory>
 				<ServiceAccountsSettings />
 			</NuqsTestingAdapter>,
 		);
 
-		await user.click(
+		fireEvent.click(
 			await screen.findByRole('button', {
 				name: /View service account CI Bot/i,
 			}),
@@ -184,7 +177,6 @@ describe('ServiceAccountsSettings (integration)', () => {
 	});
 
 	it('saving changes in the drawer refetches the list', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
 		const listRefetchSpy = jest.fn();
 
 		server.use(
@@ -206,15 +198,14 @@ describe('ServiceAccountsSettings (integration)', () => {
 		await screen.findByText('CI Bot');
 		listRefetchSpy.mockClear();
 
-		await user.click(
+		fireEvent.click(
 			await screen.findByRole('button', { name: /View service account CI Bot/i }),
 		);
 
 		const nameInput = await screen.findByDisplayValue('CI Bot');
-		await user.clear(nameInput);
-		await user.type(nameInput, 'CI Bot Updated');
+		fireEvent.change(nameInput, { target: { value: 'CI Bot Updated' } });
 
-		await user.click(screen.getByRole('button', { name: /Save Changes/i }));
+		fireEvent.click(screen.getByRole('button', { name: /Save Changes/i }));
 
 		await screen.findByDisplayValue('CI Bot Updated');
 		await waitFor(() => {
@@ -223,8 +214,6 @@ describe('ServiceAccountsSettings (integration)', () => {
 	});
 
 	it('"New Service Account" button opens the Create Service Account modal', async () => {
-		const user = userEvent.setup({ pointerEventsCheck: 0 });
-
 		render(
 			<NuqsTestingAdapter hasMemory>
 				<ServiceAccountsSettings />
@@ -233,9 +222,7 @@ describe('ServiceAccountsSettings (integration)', () => {
 
 		await screen.findByText('CI Bot');
 
-		await user.click(
-			screen.getByRole('button', { name: /New Service Account/i }),
-		);
+		fireEvent.click(screen.getByRole('button', { name: /New Service Account/i }));
 
 		await screen.findByRole('dialog', { name: /New Service Account/i });
 		expect(screen.getByPlaceholderText('Enter a name')).toBeInTheDocument();

frontend/src/container/TriggeredAlerts/Filter.tsx

@@ -0,0 +1,137 @@
+import { useCallback, useMemo, useRef } from 'react';
+import type { SelectProps } from 'antd';
+import { Tag, Tooltip } from 'antd';
+import type { BaseOptionType } from 'antd/es/select';
+import { Alerts } from 'types/api/alerts/getTriggered';
+
+import { Container, Select } from './styles';
+
+function TextOverflowTooltip({
+	option,
+}: {
+	option: BaseOptionType;
+}): JSX.Element {
+	const contentRef = useRef<HTMLDivElement | null>(null);
+	const isOverflow = contentRef.current
+		? contentRef.current?.offsetWidth < contentRef.current?.scrollWidth
+		: false;
+	return (
+		<Tooltip
+			placement="left"
+			title={option.value}
+			{...(!isOverflow ? { open: false } : {})}
+		>
+			<div className="ant-select-item-option-content" ref={contentRef}>
+				{option.value}
+			</div>
+		</Tooltip>
+	);
+}
+
+function Filter({
+	onSelectedFilterChange,
+	onSelectedGroupChange,
+	allAlerts,
+	selectedGroup,
+	selectedFilter,
+}: FilterProps): JSX.Element {
+	const onChangeSelectGroupHandler = useCallback(
+		(value: unknown) => {
+			if (typeof value === 'object' && Array.isArray(value)) {
+				onSelectedGroupChange(
+					value.map((e) => ({
+						value: e,
+					})),
+				);
+			}
+		},
+		[onSelectedGroupChange],
+	);
+
+	const onChangeSelectedFilterHandler = useCallback(
+		(value: unknown) => {
+			if (typeof value === 'object' && Array.isArray(value)) {
+				onSelectedFilterChange(
+					value.map((e) => ({
+						value: e,
+					})),
+				);
+			}
+		},
+		[onSelectedFilterChange],
+	);
+
+	const uniqueLabels: Array<string> = useMemo(() => {
+		const allLabelsSet = new Set<string>();
+		allAlerts.forEach((e) => {
+			if (!e.labels) {
+				return;
+			}
+			Object.keys(e.labels).forEach((e) => {
+				allLabelsSet.add(e);
+			});
+		});
+		return [...allLabelsSet];
+	}, [allAlerts]);
+
+	const options = uniqueLabels.map((e) => ({
+		value: e,
+		title: '',
+	}));
+
+	const getTags: SelectProps['tagRender'] = (props): JSX.Element => {
+		const { closable, onClose, label } = props;
+
+		return (
+			<Tag
+				color="magenta"
+				closable={closable}
+				onClose={onClose}
+				style={{ marginRight: 3 }}
+			>
+				{label}
+			</Tag>
+		);
+	};
+
+	return (
+		<Container>
+			<Select
+				allowClear
+				onChange={onChangeSelectedFilterHandler}
+				mode="tags"
+				value={selectedFilter.map((e) => e.value)}
+				placeholder="Filter by Tags - e.g. severity:warning, alertname:Sample Alert"
+				tagRender={(props): JSX.Element => getTags(props)}
+				options={[]}
+			/>
+			<Select
+				allowClear
+				onChange={onChangeSelectGroupHandler}
+				mode="tags"
+				defaultValue={selectedGroup.map((e) => e.value)}
+				showArrow
+				placeholder="Group by any tag"
+				tagRender={(props): JSX.Element => getTags(props)}
+				options={options}
+				optionRender={(option): JSX.Element => (
+					<TextOverflowTooltip option={option} />
+				)}
+			/>
+		</Container>
+	);
+}
+
+interface FilterProps {
+	onSelectedFilterChange: (value: Array<Value>) => void;
+	onSelectedGroupChange: (value: Array<Value>) => void;
+	allAlerts: Alerts[];
+	selectedGroup: Array<Value>;
+	selectedFilter: Array<Value>;
+}
+
+export interface Value {
+	value: string;
+}
+
+export default Filter;

frontend/src/container/TriggeredAlerts/FilteredTable/ExapandableRow.tsx

@@ -0,0 +1,77 @@
+import { Tag } from 'antd';
+import { Typography } from '@signozhq/ui/typography';
+import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
+import { useTimezone } from 'providers/Timezone';
+import { Alerts } from 'types/api/alerts/getTriggered';
+
+import Status from '../TableComponents/AlertStatus';
+import { TableCell, TableRow } from './styles';
+
+function ExapandableRow({ allAlerts }: ExapandableRowProps): JSX.Element {
+	const { formatTimezoneAdjustedTimestamp } = useTimezone();
+	return (
+		<>
+			{allAlerts.map((alert) => {
+				const { labels = {} } = alert;
+				const labelsObject = Object.keys(labels);
+
+				const tags = labelsObject.filter((e) => e !== 'severity');
+
+				const formatedDate = new Date(alert.startsAt);
+
+				return (
+					<TableRow
+						bodyStyle={{
+							minHeight: '5rem',
+							marginLeft: '2rem',
+						}}
+						translate="yes"
+						hoverable
+						key={alert.fingerprint}
+					>
+						<TableCell minWidth="90px">
+							<Status severity={alert.status.state} />
+						</TableCell>
+
+						<TableCell minWidth="90px" overflowX="scroll">
+							<Typography>{labels.alertname || '-'}</Typography>
+						</TableCell>
+
+						<TableCell minWidth="90px">
+							<Typography>{labels.severity || '-'}</Typography>
+						</TableCell>
+
+						<TableCell minWidth="90px">
+							<Typography>{`${formatTimezoneAdjustedTimestamp(
+								formatedDate,
+								DATE_TIME_FORMATS.UTC_US,
+							)}`}</Typography>
+						</TableCell>
+
+						<TableCell minWidth="90px" overflowX="scroll">
+							<div>
+								{tags.map((e) => (
+									<Tag key={e}>{`${e}:${labels[e]}`}</Tag>
+								))}
+							</div>
+						</TableCell>
+
+						{/* <TableCell>
+						<TableHeaderContainer>
+							<Button type="link">Edit</Button>
+							<Button type="link">Delete</Button>
+							<Button type="link">Pause</Button>
+						</TableHeaderContainer>
+					</TableCell> */}
+					</TableRow>
+				);
+			})}
+		</>
+	);
+}
+
+interface ExapandableRowProps {
+	allAlerts: Alerts[];
+}
+
+export default ExapandableRow;

frontend/src/container/TriggeredAlerts/FilteredTable/TableRow.tsx

@@ -0,0 +1,54 @@
+import { useState } from 'react';
+import { SquareMinus, SquarePlus } from '@signozhq/icons';
+import { Tag } from 'antd';
+import { Alerts } from 'types/api/alerts/getTriggered';
+
+import ExapandableRow from './ExapandableRow';
+import { IconContainer, StatusContainer, TableCell, TableRow } from './styles';
+
+function TableRowComponent({
+	tags,
+	tagsAlert,
+}: TableRowComponentProps): JSX.Element {
+	const [isClicked, setIsClicked] = useState<boolean>(false);
+
+	const onClickHandler = (): void => {
+		setIsClicked((state) => !state);
+	};
+
+	return (
+		<div>
+			<TableRow>
+				<TableCell minWidth="90px">
+					<StatusContainer>
+						<IconContainer onClick={onClickHandler}>
+							{!isClicked ? <SquarePlus size="md" /> : <SquareMinus size="md" />}
+						</IconContainer>
+						<>
+							{tags.map((tag) => (
+								<Tag color="magenta" key={tag}>
+									{tag}
+								</Tag>
+							))}
+						</>
+					</StatusContainer>
+				</TableCell>
+				<TableCell minWidth="90px" />
+				<TableCell minWidth="90px" />
+				<TableCell minWidth="90px" />
+				<TableCell minWidth="90px" />
+				{/* <TableCell minWidth="200px">
+					<Button type="primary">Resume Group</Button>
+				</TableCell> */}
+			</TableRow>
+			{isClicked && <ExapandableRow allAlerts={tagsAlert} />}
+		</div>
+	);
+}
+
+interface TableRowComponentProps {
+	tags: string[];
+	tagsAlert: Alerts[];
+}
+
+export default TableRowComponent;

frontend/src/container/TriggeredAlerts/FilteredTable/index.tsx

@@ -0,0 +1,77 @@
+import { useMemo } from 'react';
+import groupBy from 'lodash-es/groupBy';
+import { Alerts } from 'types/api/alerts/getTriggered';
+
+import { Value } from '../Filter';
+import { FilterAlerts } from '../utils';
+import { Container, TableHeader, TableHeaderContainer } from './styles';
+import TableRowComponent from './TableRow';
+
+function FilteredTable({
+	selectedGroup,
+	allAlerts,
+	selectedFilter,
+}: FilteredTableProps): JSX.Element {
+	const allGroupsAlerts = useMemo(
+		() =>
+			groupBy(FilterAlerts(allAlerts, selectedFilter), (obj) =>
+				selectedGroup.map((e) => obj.labels?.[`${e.value}`]).join('+'),
+			),
+		[selectedGroup, allAlerts, selectedFilter],
+	);
+
+	const tags = Object.keys(allGroupsAlerts);
+	const tagsAlerts = Object.values(allGroupsAlerts);
+
+	const headers = [
+		'Status',
+		'Alert Name',
+		'Severity',
+		'Firing Since',
+		'Tags',
+		// 'Actions',
+	];
+
+	return (
+		<Container>
+			<TableHeaderContainer>
+				{headers.map((header) => (
+					<TableHeader key={header} minWidth="90px">
+						{header}
+					</TableHeader>
+				))}
+			</TableHeaderContainer>
+
+			{tags.map((e, index) => {
+				const tagsValue = e.split('+').filter((e) => e);
+				const tagsAlert: Alerts[] = tagsAlerts[index];
+
+				if (tagsAlert.length === 0) {
+					return null;
+				}
+
+				const { labels = {} } = tagsAlert[0];
+				const keysArray = Object.keys(labels);
+				const valueArray: string[] = [];
+
+				keysArray.forEach((e) => {
+					valueArray.push(labels[e]);
+				});
+
+				const tags = tagsValue
+					.map((e) => keysArray[valueArray.findIndex((value) => value === e) || 0])
+					.map((e, index) => `${e}:${tagsValue[index]}`);
+
+				return <TableRowComponent key={e} tagsAlert={tagsAlert} tags={tags} />;
+			})}
+		</Container>
+	);
+}
+
+interface FilteredTableProps {
+	selectedGroup: Value[];
+	allAlerts: Alerts[];
+	selectedFilter: Value[];
+}
+
+export default FilteredTable;

frontend/src/container/TriggeredAlerts/FilteredTable/styles.ts

@@ -0,0 +1,70 @@
+import { Card } from 'antd';
+import styled from 'styled-components';
+
+export const TableHeader = styled(Card)<Props>`
+	&&& {
+		flex: 1;
+		text-align: center;
+		.ant-card-body {
+			padding: 1rem;
+		}
+		min-width: ${(props): string => props.minWidth || ''};
+	}
+`;
+
+export const TableHeaderContainer = styled.div`
+	display: flex;
+`;
+
+export const Container = styled.div`
+	&&& {
+		display: flex;
+		margin-top: 1rem;
+		flex-direction: column;
+	}
+`;
+
+export const TableRow = styled(Card)`
+	&&& {
+		flex: 1;
+		.ant-card-body {
+			padding: 0rem;
+			display: flex;
+
+			min-height: 3rem;
+		}
+	}
+`;
+
+interface Props {
+	minWidth?: string;
+	overflowX?: string;
+}
+export const TableCell = styled.div<Props>`
+	&&& {
+		flex: 1;
+		min-width: ${(props): string => props.minWidth || ''};
+		display: flex;
+		justify-content: flex-start;
+		align-items: center;
+		overflow-x: ${(props): string => props.overflowX || 'none'};
+		::-webkit-scrollbar {
+			height: ${(props): string => (props.overflowX ? '2px' : '8px')};
+		}
+	}
+`;
+
+export const StatusContainer = styled.div`
+	&&& {
+		display: flex;
+		align-items: center;
+		height: 100%;
+	}
+`;
+
+export const IconContainer = styled.div`
+	&&& {
+		margin-left: 1rem;
+		margin-right: 1rem;
+	}
+`;

frontend/src/container/TriggeredAlerts/NoFilterTable.tsx

@@ -0,0 +1,110 @@
+import { TableColumnsType as ColumnsType } from 'antd';
+import { Typography } from '@signozhq/ui/typography';
+import { ResizeTable } from 'components/ResizeTable';
+import LabelColumn from 'components/TableRenderer/LabelColumn';
+import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
+import AlertStatus from 'container/TriggeredAlerts/TableComponents/AlertStatus';
+import { useTimezone } from 'providers/Timezone';
+import { Alerts } from 'types/api/alerts/getTriggered';
+
+import { Value } from './Filter';
+import { FilterAlerts } from './utils';
+
+const severitySorter = (a: Alerts, b: Alerts): number => {
+	const severityLengthOfA = a.labels?.severity?.length || 0;
+	const severityLengthOfB = b.labels?.severity?.length || 0;
+	return severityLengthOfB - severityLengthOfA;
+};
+
+function NoFilterTable({
+	allAlerts,
+	selectedFilter,
+}: NoFilterTableProps): JSX.Element {
+	const filteredAlerts = FilterAlerts(allAlerts, selectedFilter);
+	const { formatTimezoneAdjustedTimestamp } = useTimezone();
+
+	// need to add the filter
+	const columns: ColumnsType<Alerts> = [
+		{
+			title: 'Status',
+			dataIndex: 'status',
+			width: 80,
+			key: 'status',
+			sorter: (a, b): number => severitySorter(a, b),
+			render: (value): JSX.Element => <AlertStatus severity={value.state} />,
+		},
+		{
+			title: 'Alert Name',
+			dataIndex: 'labels',
+			key: 'alertName',
+			width: 100,
+			sorter: (a, b): number =>
+				(a.labels?.alertname?.charCodeAt(0) || 0) -
+				(b.labels?.alertname?.charCodeAt(0) || 0),
+			render: (data): JSX.Element => {
+				const name = data?.alertname || '';
+				return <Typography>{name}</Typography>;
+			},
+		},
+		{
+			title: 'Tags',
+			dataIndex: 'labels',
+			key: 'tags',
+			width: 100,
+			render: (labels): JSX.Element => {
+				const objectKeys = Object.keys(labels);
+				const withOutSeverityKeys = objectKeys.filter((e) => e !== 'severity');
+
+				if (withOutSeverityKeys.length === 0) {
+					return <Typography>-</Typography>;
+				}
+
+				return (
+					<LabelColumn labels={withOutSeverityKeys} value={labels} color="magenta" />
+				);
+			},
+		},
+		{
+			title: 'Severity',
+			dataIndex: 'labels',
+			key: 'severity',
+			width: 100,
+			sorter: (a, b): number => severitySorter(a, b),
+			render: (value): JSX.Element => {
+				const objectKeys = Object.keys(value);
+				const withSeverityKey = objectKeys.find((e) => e === 'severity') || '';
+				const severityValue = value[withSeverityKey];
+
+				return <Typography>{severityValue}</Typography>;
+			},
+		},
+		{
+			title: 'Firing Since',
+			dataIndex: 'startsAt',
+			width: 100,
+			sorter: (a, b): number =>
+				new Date(a.startsAt).getTime() - new Date(b.startsAt).getTime(),
+			render: (date): JSX.Element => (
+				<Typography>{`${formatTimezoneAdjustedTimestamp(
+					date,
+					DATE_TIME_FORMATS.UTC_US,
+				)}`}</Typography>
+			),
+		},
+	];
+
+	return (
+		<ResizeTable
+			columns={columns}
+			rowKey={(record): string => `${record.startsAt}-${record.fingerprint}`}
+			dataSource={filteredAlerts}
+		/>
+	);
+}
+
+interface NoFilterTableProps {
+	allAlerts: Alerts[];
+	selectedFilter: Value[];
+}
+
+export default NoFilterTable;

frontend/src/container/TriggeredAlerts/TableComponents/AlertStatus.tsx

@@ -0,0 +1,27 @@
+import { Tag } from 'antd';
+
+function Severity({ severity }: SeverityProps): JSX.Element {
+	switch (severity) {
+		case 'unprocessed': {
+			return <Tag color="green">UnProcessed</Tag>;
+		}
+
+		case 'active': {
+			return <Tag color="red">Firing</Tag>;
+		}
+
+		case 'suppressed': {
+			return <Tag color="red">Suppressed</Tag>;
+		}
+
+		default: {
+			return <Tag color="default">Unknown Status</Tag>;
+		}
+	}
+}
+
+interface SeverityProps {
+	severity: string;
+}
+
+export default Severity;

frontend/src/container/TriggeredAlerts/TriggeredAlert.tsx

@@ -0,0 +1,56 @@
+import { Alerts } from 'types/api/alerts/getTriggered';
+
+import Filter, { Value } from './Filter';
+import FilteredTable from './FilteredTable';
+import NoFilterTable from './NoFilterTable';
+import { NoTableContainer } from './styles';
+
+function TriggeredAlerts({
+	allAlerts,
+	selectedFilter,
+	selectedGroup,
+	onSelectedFilterChange,
+	onSelectedGroupChange,
+}: TriggeredAlertsProps): JSX.Element {
+	return (
+		<div>
+			<Filter
+				allAlerts={allAlerts}
+				selectedFilter={selectedFilter}
+				selectedGroup={selectedGroup}
+				onSelectedFilterChange={onSelectedFilterChange}
+				onSelectedGroupChange={onSelectedGroupChange}
+			/>
+
+			{selectedFilter.length === 0 && selectedGroup.length === 0 ? (
+				<NoTableContainer>
+					<NoFilterTable selectedFilter={selectedFilter} allAlerts={allAlerts} />
+				</NoTableContainer>
+			) : (
+				<div>
+					{selectedFilter.length !== 0 && selectedGroup.length === 0 ? (
+						<NoTableContainer>
+							<NoFilterTable selectedFilter={selectedFilter} allAlerts={allAlerts} />
+						</NoTableContainer>
+					) : (
+						<FilteredTable
+							allAlerts={allAlerts}
+							selectedFilter={selectedFilter}
+							selectedGroup={selectedGroup}
+						/>
+					)}
+				</div>
+			)}
+		</div>
+	);
+}
+
+interface TriggeredAlertsProps {
+	allAlerts: Alerts[];
+	selectedFilter: Array<Value>;
+	selectedGroup: Array<Value>;
+	onSelectedFilterChange: (value: Array<Value>) => void;
+	onSelectedGroupChange: (value: Array<Value>) => void;
+}
+
+export default TriggeredAlerts;

frontend/src/container/TriggeredAlerts/TriggeredAlerts.module.scss

@@ -1,109 +0,0 @@
-.container {
-	display: flex;
-	flex-direction: column;
-	gap: 1rem;
-	height: calc(100vh - 62px);
-	min-height: 400px;
-}
-
-.header {
-	position: relative;
-	z-index: 10;
-	display: flex;
-	justify-content: space-between;
-	align-items: flex-start;
-	gap: 1rem;
-	flex-shrink: 0;
-	padding: 0 var(--spacing-8);
-}
-
-.filtersRow {
-	position: relative;
-	z-index: 10;
-	display: flex;
-	align-items: center;
-	gap: 1rem;
-	flex-shrink: 0;
-	padding: 0 var(--spacing-8);
-
-	--combobox-trigger-height: 2rem;
-}
-
-.searchInput {
-	min-width: 250px;
-}
-
-.filterSelect {
-	min-width: 300px;
-	flex: 1;
-}
-
-.tableContainer {
-	flex: 1;
-	min-height: 0;
-	display: flex;
-	flex-direction: column;
-
-	--tanstack-table-header-cell-bg: var(--l2-background);
-	--tanstack-table-header-cell-color: var(--l2-foreground);
-	--tanstack-table-cell-bg: var(--l2-background);
-	--tanstack-table-cell-color: var(--l2-foreground);
-	--tanstack-table-row-hover-bg: var(--l2-background-hover);
-	--tanstack-table-row-active-bg: var(--l2-background-active);
-	--tanstack-table-resize-handle-bg: var(--l2-background);
-	--tanstack-table-resize-handle-hover-bg: var(--l2-border);
-	--tanstack-table-row-height: 42px;
-
-	--tanstack-cell-padding-top-override: 5px;
-	--tanstack-cell-padding-bottom-override: 5px;
-	--tanstack-cell-padding-left-override: 5px;
-	--tanstack-cell-padding-right-override: 5px;
-
-	--tanstack-expansion-first-col-padding-left: 20px;
-
-	--badge-cursor: pointer;
-}
-
-.groupHeader {
-	display: flex;
-	align-items: center;
-	gap: 6px;
-}
-
-.groupCell {
-	display: flex;
-	align-items: center;
-	gap: 8px;
-}
-
-.tagsContainer {
-	display: flex;
-	flex-wrap: wrap;
-	gap: 4px;
-}
-
-.searchIcon {
-	color: var(--l2-foreground);
-}
-
-.filterBadge {
-	display: inline-flex;
-	align-items: center;
-	gap: 4px;
-	margin-right: 3px;
-}
-
-.filterBadgeClose {
-	cursor: pointer;
-	opacity: 0.7;
-	transition: opacity 0.15s ease;
-
-	&:hover {
-		opacity: 1;
-	}
-}
-
-.paginationContainer {
-	padding-right: var(--spacing-12);
-	height: 62px;
-}

frontend/src/container/TriggeredAlerts/__tests__/NoFilterTable.test.tsx

@@ -0,0 +1,84 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+
+import NoFilterTable from '../NoFilterTable';
+import { createAlert } from './mockUtils';
+
+jest.mock('providers/Timezone', () => ({
+	useTimezone: jest.requireActual('./mockUtils').useMockTimezone,
+}));
+
+const allAlerts = [
+	createAlert({
+		name: 'Alert B',
+		labels: {
+			severity: 'warning',
+			alertname: 'Alert B',
+		},
+	}),
+	createAlert({
+		name: 'Alert C',
+		labels: {
+			severity: 'info',
+			alertname: 'Alert C',
+		},
+	}),
+	createAlert({
+		name: 'Alert A',
+		labels: {
+			severity: 'critical',
+			alertname: 'Alert A',
+		},
+	}),
+];
+
+describe('NoFilterTable', () => {
+	it('should render the no filter table with correct rows', () => {
+		render(<NoFilterTable allAlerts={allAlerts} selectedFilter={[]} />);
+		const rows = screen.getAllByRole('row');
+		expect(rows).toHaveLength(4); // 1 header row + 2 data rows
+		const [headerRow, dataRow1, dataRow2, dataRow3] = rows;
+
+		// Verify header row
+		expect(headerRow).toHaveTextContent('Status');
+		expect(headerRow).toHaveTextContent('Alert Name');
+		expect(headerRow).toHaveTextContent('Tags');
+		expect(headerRow).toHaveTextContent('Severity');
+		expect(headerRow).toHaveTextContent('Firing Since');
+
+		// Verify 1st data row
+		expect(dataRow1).toHaveTextContent('Alert B');
+
+		// Verify 2nd data row
+		expect(dataRow2).toHaveTextContent('Alert C');
+
+		// Verify 3rd data row
+		expect(dataRow3).toHaveTextContent('Alert A');
+	});
+
+	it('should sort the table by severity when header is clicked', () => {
+		render(<NoFilterTable allAlerts={allAlerts} selectedFilter={[]} />);
+
+		const headers = screen.getAllByRole('columnheader');
+		const severityHeader = headers.find((header) =>
+			header.textContent?.includes('Severity'),
+		);
+
+		expect(severityHeader).toBeInTheDocument();
+
+		if (severityHeader) {
+			const initialRows = screen.getAllByRole('row');
+			expect(initialRows).toHaveLength(4);
+			expect(initialRows[1]).toHaveTextContent('Alert B');
+			expect(initialRows[2]).toHaveTextContent('Alert C');
+			expect(initialRows[3]).toHaveTextContent('Alert A');
+
+			fireEvent.click(severityHeader);
+
+			const sortedRows = screen.getAllByRole('row');
+			expect(sortedRows).toHaveLength(4);
+			expect(sortedRows[1]).toHaveTextContent('Alert A');
+			expect(sortedRows[2]).toHaveTextContent('Alert B');
+			expect(sortedRows[3]).toHaveTextContent('Alert C');
+		}
+	});
+});

frontend/src/container/TriggeredAlerts/__tests__/mockUtils.ts

@@ -0,0 +1,53 @@
+import { Timezone } from 'components/CustomTimePicker/timezoneUtils';
+import { Alerts } from 'types/api/alerts/getTriggered';
+
+export function createAlert(overrides: Partial<Alerts> = {}): Alerts {
+	return {
+		labels: undefined,
+		annotations: {
+			description: 'Test Description',
+			summary: 'Test Summary',
+		},
+		state: 'firing',
+		name: 'Test Alert',
+		id: 1,
+		endsAt: '2021-01-02T00:00:00Z',
+		fingerprint: '1234567890',
+		generatorURL: 'https://test.com',
+		receivers: [{ name: 'Test Receiver' }],
+		startsAt: '2021-01-03T00:00:00Z',
+		status: {
+			inhibitedBy: [],
+			silencedBy: [],
+			state: 'firing',
+		},
+		updatedAt: '2021-01-01T00:00:00Z',
+		...overrides,
+	};
+}
+
+export function useMockTimezone(): {
+	timezone: Timezone;
+	browserTimezone: Timezone;
+	updateTimezone: (timezone: Timezone) => void;
+	formatTimezoneAdjustedTimestamp: (input: string, format?: string) => string;
+	isAdaptationEnabled: boolean;
+	setIsAdaptationEnabled: (enabled: boolean) => void;
+} {
+	const mockTimezone: Timezone = {
+		name: 'timezone',
+		value: 'mock-timezone',
+		offset: '+1.30',
+		searchIndex: '1',
+	};
+	return {
+		timezone: mockTimezone,
+		browserTimezone: mockTimezone,
+		updateTimezone: jest.fn(),
+		formatTimezoneAdjustedTimestamp: jest
+			.fn()
+			.mockImplementation((date: string) => new Date(date).toISOString()),
+		isAdaptationEnabled: true,
+		setIsAdaptationEnabled: jest.fn(),
+	};
+}

frontend/src/container/TriggeredAlerts/__tests__/utils.test.tsx

@@ -0,0 +1,85 @@
+import type { Value } from '../Filter';
+import { FilterAlerts } from '../utils';
+import { createAlert } from './mockUtils';
+
+describe('FilterAlerts', () => {
+	it('returns all alerts when no filters are selected', () => {
+		const alerts = [
+			createAlert({ fingerprint: 'fp-1' }),
+			createAlert({ fingerprint: 'fp-2' }),
+		];
+		const filters: Value[] = [];
+
+		const result = FilterAlerts(alerts, filters);
+
+		expect(result).toBe(alerts);
+	});
+
+	it('filters alerts that have matching label key and value', () => {
+		const warningAlert = createAlert({
+			fingerprint: 'warning',
+			labels: { severity: 'warning' },
+		});
+		const criticalAlert = createAlert({
+			fingerprint: 'critical',
+			labels: { severity: 'critical' },
+		});
+		const alerts = [warningAlert, criticalAlert];
+		const filters: Value[] = [{ value: 'severity:critical' }];
+
+		const result = FilterAlerts(alerts, filters);
+
+		expect(result).toStrictEqual([criticalAlert]);
+	});
+
+	it('includes alerts when any filter matches', () => {
+		const severityAlert = createAlert({
+			fingerprint: 'severity',
+			labels: { severity: 'warning' },
+		});
+		const teamAlert = createAlert({
+			fingerprint: 'team',
+			labels: { team: 'core-observability' },
+		});
+		const otherAlert = createAlert({
+			fingerprint: 'other',
+			labels: { service: 'ingestor' },
+		});
+		const alerts = [severityAlert, teamAlert, otherAlert];
+		const filters: Value[] = [
+			{ value: 'severity:warning' },
+			{ value: 'team:core-observability' },
+		];
+
+		const result = FilterAlerts(alerts, filters);
+
+		expect(result).toHaveLength(2);
+		expect(result).toStrictEqual([severityAlert, teamAlert]);
+	});
+
+	it('matches labels even when filters contain surrounding whitespace', () => {
+		const alert = createAlert({
+			fingerprint: 'trim-test',
+			labels: { severity: 'critical' },
+		});
+		const alerts = [alert];
+		const filters: Value[] = [{ value: '  severity  :  critical  ' }];
+
+		const result = FilterAlerts(alerts, filters);
+
+		expect(result).toStrictEqual([alert]);
+	});
+
+	it('ignores filters that do not contain a key/value delimiter', () => {
+		const alert = createAlert({
+			fingerprint: 'invalid-filter',
+			labels: { severity: 'warning' },
+		});
+		const alerts = [alert];
+		const filters: Value[] = [{ value: 'severitywarning' }];
+
+		const result = FilterAlerts(alerts, filters);
+
+		expect(result).toStrictEqual([]);
+	});
+});

frontend/src/container/TriggeredAlerts/components/AlertStatusTag.tsx

@@ -1,36 +0,0 @@
-import { Badge } from '@signozhq/ui/badge';
-
-interface AlertStatusTagProps {
-	state: string;
-}
-
-function AlertStatusTag({ state }: AlertStatusTagProps): JSX.Element {
-	switch (state) {
-		case 'unprocessed':
-			return (
-				<Badge color="success" variant="outline">
-					Unprocessed
-				</Badge>
-			);
-		case 'active':
-			return (
-				<Badge color="error" variant="outline">
-					Firing
-				</Badge>
-			);
-		case 'suppressed':
-			return (
-				<Badge color="error" variant="outline">
-					Suppressed
-				</Badge>
-			);
-		default:
-			return (
-				<Badge color="secondary" variant="outline">
-					Unknown
-				</Badge>
-			);
-	}
-}
-
-export default AlertStatusTag;

frontend/src/container/TriggeredAlerts/components/EmptyStates.module.scss

@@ -1,36 +0,0 @@
-.emptyState {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	justify-content: center;
-	padding: 48px 24px;
-	text-align: center;
-	gap: 16px;
-}
-
-.emptyStateIcon {
-	font-size: 48px;
-	color: var(--bg-forest-500);
-}
-
-.emptyStateIconMuted {
-	font-size: 48px;
-	color: var(--l2-foreground);
-}
-
-.emptyStateTitle {
-	font-size: 18px;
-	font-weight: 600;
-	color: var(--l1-foreground);
-}
-
-.emptyStateSubtitle {
-	font-size: 14px;
-	color: var(--l2-foreground);
-	max-width: 400px;
-}
-
-.emptyStateActions {
-	display: flex;
-	gap: 8px;
-}

frontend/src/container/TriggeredAlerts/components/EmptyStates.tsx

@@ -1,49 +0,0 @@
-import { useCallback } from 'react';
-import { CircleCheck, Plus, RefreshCw } from '@signozhq/icons';
-import { Button } from '@signozhq/ui/button';
-import ROUTES from 'constants/routes';
-import { useSafeNavigate } from 'hooks/useSafeNavigate';
-
-import styles from './EmptyStates.module.scss';
-
-interface EmptyStateProps {
-	onRefresh?: () => void;
-}
-
-export function EmptyState({ onRefresh }: EmptyStateProps): JSX.Element {
-	const { safeNavigate } = useSafeNavigate();
-
-	const handleCreateAlert = useCallback((): void => {
-		safeNavigate(ROUTES.ALERTS_NEW);
-	}, [safeNavigate]);
-
-	return (
-		<div className={styles.emptyState}>
-			<CircleCheck className={styles.emptyStateIcon} size={16} />
-			<div className={styles.emptyStateTitle}>No alerts firing</div>
-			<div className={styles.emptyStateSubtitle}>
-				All systems are healthy. No alerts are currently triggered.
-			</div>
-			<div className={styles.emptyStateActions}>
-				<Button
-					variant="solid"
-					color="primary"
-					prefix={<Plus size={14} />}
-					onClick={handleCreateAlert}
-				>
-					Create Alert Rule
-				</Button>
-				{onRefresh && (
-					<Button
-						variant="outlined"
-						color="secondary"
-						prefix={<RefreshCw size={14} />}
-						onClick={onRefresh}
-					>
-						Refresh
-					</Button>
-				)}
-			</div>
-		</div>
-	);
-}

frontend/src/container/TriggeredAlerts/components/ExpandedAlertsTable.module.scss

@@ -1,31 +0,0 @@
-.expandedRowContainer {
-	overflow-x: auto;
-
-	--tanstack-table-header-cell-bg: var(--l1-background);
-	--tanstack-table-header-cell-color: var(--l1-foreground);
-	--tanstack-table-cell-bg: var(--l1-background);
-	--tanstack-table-cell-color: var(--l1-foreground);
-	--tanstack-table-row-hover-bg: var(--l1-background-hover);
-	--tanstack-table-row-active-bg: var(--l1-background-active);
-	--tanstack-table-resize-handle-bg: var(--l1-background);
-	--tanstack-table-resize-handle-hover-bg: var(--l1-border);
-	--tanstack-table-row-height: 36px;
-
-	--tanstack-cell-padding-left-override: 15px;
-	--tanstack-cell-padding-right-override: 15px;
-
-	th {
-		position: unset;
-	}
-
-	background-color: var(--l1-background);
-}
-
-.expandedTable {
-	min-height: 290px;
-}
-
-.expandedPagination {
-	padding-right: var(--spacing-8);
-	min-height: 62px;
-}

frontend/src/container/TriggeredAlerts/components/ExpandedAlertsTable.tsx

@@ -1,78 +0,0 @@
-import { useCallback, useMemo, useState } from 'react';
-import TanStackTable, {
-	SortState,
-	TableColumnDef,
-} from 'components/TanStackTableView';
-
-import type { Alert } from '../types';
-import { sortAlerts } from '../utils';
-import styles from './ExpandedAlertsTable.module.scss';
-
-const EXPANDED_PAGE_SIZE = 5;
-
-interface ExpandedAlertsTableProps {
-	alerts: Alert[];
-	columns: TableColumnDef<Alert>[];
-	onRowClick: (alert: Alert) => void;
-	onRowClickNewTab: (alert: Alert) => void;
-	isLoading?: boolean;
-}
-
-function ExpandedAlertsTable({
-	alerts,
-	columns,
-	onRowClick,
-	onRowClickNewTab,
-	isLoading,
-}: ExpandedAlertsTableProps): JSX.Element {
-	const [page, setPage] = useState(1);
-	const [orderBy, setOrderBy] = useState<SortState | null>(null);
-
-	const handlePageChange = useCallback((newPage: number) => {
-		setPage(newPage);
-	}, []);
-
-	const handleSort = useCallback((sort: SortState | null) => {
-		setOrderBy(sort);
-		setPage(1);
-	}, []);
-
-	const sortedAlerts = useMemo(
-		() => sortAlerts(alerts, orderBy),
-		[alerts, orderBy],
-	);
-
-	const paginatedAlerts = useMemo(() => {
-		const start = (page - 1) * EXPANDED_PAGE_SIZE;
-		return sortedAlerts.slice(start, start + EXPANDED_PAGE_SIZE);
-	}, [sortedAlerts, page]);
-
-	return (
-		<div className={styles.expandedRowContainer}>
-			<TanStackTable<Alert>
-				className={styles.expandedTable}
-				data={paginatedAlerts}
-				columns={columns}
-				isLoading={isLoading}
-				getRowKey={(row): string => row.fingerprint ?? ''}
-				getItemKey={(row): string => row.fingerprint ?? ''}
-				onRowClick={onRowClick}
-				onRowClickNewTab={onRowClickNewTab}
-				onSort={handleSort}
-				disableVirtualScroll
-				pagination={{
-					total: alerts.length,
-					defaultPage: page,
-					defaultLimit: EXPANDED_PAGE_SIZE,
-					showTotalCount: true,
-					totalCountLabel: 'Alerts',
-					showPageSize: false,
-					onPageChange: handlePageChange,
-				}}
-				paginationClassname={styles.expandedPagination}
-			/>
-		</div>
-	);
-}
-
-export default ExpandedAlertsTable;

frontend/src/container/TriggeredAlerts/hooks.ts

@@ -1,34 +0,0 @@
-import { Options, useQueryState, UseQueryStateReturn } from 'nuqs';
-import { parseAsJsonNoValidate } from 'utils/nuqsParsers';
-
-const defaultNuqsOptions: Options = {
-	history: 'push',
-};
-
-export const TRIGGERED_ALERTS_PARAMS = {
-	FILTERS: 'alertFilters',
-	GROUP_BY: 'alertGroupBy',
-	SEARCH: 'alertSearch',
-} as const;
-
-export const useTriggeredAlertsFilters = (): UseQueryStateReturn<
-	string[],
-	string[]
-> =>
-	useQueryState(
-		TRIGGERED_ALERTS_PARAMS.FILTERS,
-		parseAsJsonNoValidate<string[]>()
-			.withDefault([])
-			.withOptions(defaultNuqsOptions),
-	);
-
-export const useTriggeredAlertsGroupBy = (): UseQueryStateReturn<
-	string[],
-	string[]
-> =>
-	useQueryState(
-		TRIGGERED_ALERTS_PARAMS.GROUP_BY,
-		parseAsJsonNoValidate<string[]>()
-			.withDefault([])
-			.withOptions(defaultNuqsOptions),
-	);

frontend/src/container/TriggeredAlerts/index.tsx

@@ -1,235 +1,82 @@
-import type { ReactNode } from 'react';
-import { useCallback, useMemo } from 'react';
-import { Search } from '@signozhq/icons';
-import { Input } from '@signozhq/ui/input';
-import { ComboboxSimple, ComboboxSimpleItem } from '@signozhq/ui/combobox';
-import ErrorEmptyState from 'components/Alerts/ErrorEmptyState';
-import NoResultsEmptyState from 'components/Alerts/NoResultsEmptyState';
-import type { FilterValue } from 'components/Alerts/types';
-import TanStackTable from 'components/TanStackTableView';
-import { useTableParams } from 'components/TanStackTableView/useTableParams';
-import { useUrlSearchState } from 'hooks/useUrlSearchState';
-import { useTimezone } from 'providers/Timezone';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { useQuery } from 'react-query';
+import getTriggeredApi from 'api/alerts/getTriggered';
+import logEvent from 'api/common/logEvent';
+import Spinner from 'components/Spinner';
+import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
+import useAxiosError from 'hooks/useAxiosError';
+import { isUndefined } from 'lodash-es';
+import { useAppContext } from 'providers/App/App';
 
-import { EmptyState } from './components/EmptyStates';
-import ExpandedAlertsTable from './components/ExpandedAlertsTable';
-
-import {
-	TRIGGERED_ALERTS_PARAMS,
-	useTriggeredAlertsFilters,
-	useTriggeredAlertsGroupBy,
-} from './hooks';
-import { getAlertColumns, groupedColumns } from './table.config';
-import styles from './TriggeredAlerts.module.scss';
-import type { Alert, GroupedAlert } from './types';
-import { useTriggeredAlertsData } from './useTriggeredAlertsData';
-import { useTriggeredAlertsHandlers } from './useTriggeredAlertsHandlers';
-
-const QUERY_PARAMS_CONFIG = {
-	orderBy: 'orderBy',
-	page: 'page',
-	limit: 'limit',
-} as const;
-
-const DEFAULT_PAGE = 1;
-const DEFAULT_LIMIT = 10;
-
-const severyFilters: ComboboxSimpleItem[] = [
-	{
-		value: 'severity:critical',
-		label: 'Critical (severity:critical)',
-		displayValue: 'Critical',
-	},
-	{
-		value: 'severity:error',
-		label: 'Error (severity:error)',
-		displayValue: 'Error',
-	},
-	{
-		value: 'severity:warning',
-		label: 'Warning (severity:warning)',
-		displayValue: 'Warning',
-	},
-	{
-		value: 'severity:info',
-		label: 'Info (severity:info)',
-		displayValue: 'Info',
-	},
-];
+import { Value } from './Filter';
+import TriggerComponent from './TriggeredAlert';
 
 function TriggeredAlerts(): JSX.Element {
-	const [filterValues, setFilterValues] = useTriggeredAlertsFilters();
-	const [selectedGroupBy, setSelectedGroupBy] = useTriggeredAlertsGroupBy();
-	const { searchText, debouncedSearch, handleSearchChange, clearSearch } =
-		useUrlSearchState(TRIGGERED_ALERTS_PARAMS.SEARCH);
-	const { formatTimezoneAdjustedTimestamp } = useTimezone();
-	const { orderBy, page, limit } = useTableParams(QUERY_PARAMS_CONFIG, {
-		page: DEFAULT_PAGE,
-		limit: DEFAULT_LIMIT,
-	});
+	const [selectedGroup, setSelectedGroup] = useState<Value[]>([]);
+	const [selectedFilter, setSelectedFilter] = useState<Value[]>([]);
 
-	const selectedFilter = useMemo(
-		(): FilterValue[] => (filterValues ?? []).map((v: string) => ({ value: v })),
-		[filterValues],
-	);
+	const { user } = useAppContext();
 
-	const {
-		filteredAlerts,
-		groupedData,
-		uniqueLabels,
-		isFetching,
-		isError,
-		isGrouped,
-		allAlerts,
-		refetch,
-	} = useTriggeredAlertsData(
-		selectedFilter,
-		selectedGroupBy,
-		orderBy,
-		debouncedSearch,
-	);
+	const hasLoggedEvent = useRef(false); // Track if logEvent has been called
 
-	const handleFilterChange = useCallback(
-		(values: unknown): void => {
-			if (Array.isArray(values)) {
-				void setFilterValues(values.length ? values : null);
-			}
+	const handleError = useAxiosError();
+
+	const alertsResponse = useQuery(
+		[REACT_QUERY_KEY.GET_TRIGGERED_ALERTS, user.id],
+		{
+			queryFn: () =>
+				getTriggeredApi({
+					active: true,
+					inhibited: true,
+					silenced: false,
+				}),
+			refetchInterval: 30000,
+			onError: handleError,
 		},
-		[setFilterValues],
 	);
 
-	const { handleGroupByChange, handleRowClick, handleRowClickNewTab } =
-		useTriggeredAlertsHandlers(setSelectedGroupBy);
+	const handleSelectedFilterChange = useCallback((newFilter: Value[]) => {
+		setSelectedFilter(newFilter);
+	}, []);
 
-	const columns = useMemo(
-		() => getAlertColumns(formatTimezoneAdjustedTimestamp),
-		[formatTimezoneAdjustedTimestamp],
-	);
+	const handleSelectedGroupChange = useCallback((newGroup: Value[]) => {
+		setSelectedGroup(newGroup);
+	}, []);
 
-	const labelOptions: ComboboxSimpleItem[] = uniqueLabels.map((label) => ({
-		value: label,
-		label,
-	}));
+	useEffect(() => {
+		if (!hasLoggedEvent.current && !isUndefined(alertsResponse.data?.payload)) {
+			logEvent('Alert: Triggered alert list page visited', {
+				number: alertsResponse.data?.payload?.length,
+			});
+			hasLoggedEvent.current = true;
+		}
+	}, [alertsResponse.data?.payload]);
 
-	const paginatedAlerts = useMemo(() => {
-		const start = (page - 1) * limit;
-		return filteredAlerts.slice(start, start + limit);
-	}, [filteredAlerts, page, limit]);
-
-	const paginatedGroupedData = useMemo(() => {
-		const start = (page - 1) * limit;
-		return groupedData.slice(start, start + limit);
-	}, [groupedData, page, limit]);
-
-	const renderExpandedRow = useCallback(
-		(group: GroupedAlert): ReactNode => (
-			<ExpandedAlertsTable
-				alerts={group.alerts}
-				columns={columns}
-				onRowClick={handleRowClick}
-				onRowClickNewTab={handleRowClickNewTab}
-				isLoading={isFetching}
+	if (alertsResponse.error) {
+		return (
+			<TriggerComponent
+				allAlerts={[]}
+				selectedFilter={selectedFilter}
+				selectedGroup={selectedGroup}
+				onSelectedFilterChange={handleSelectedFilterChange}
+				onSelectedGroupChange={handleSelectedGroupChange}
 			/>
-		),
-		[columns, handleRowClick, handleRowClickNewTab, isFetching],
-	);
+		);
+	}
 
-	const hasActiveFilters = selectedFilter.length > 0 || searchText.length > 0;
-	const isEmptyDueToFilters =
-		!isFetching &&
-		filteredAlerts.length === 0 &&
-		hasActiveFilters &&
-		allAlerts.length > 0;
-	const isEmptyNoAlerts = !isFetching && !isError && allAlerts.length === 0;
-
-	const handleClearFilters = useCallback((): void => {
-		void setFilterValues(null);
-		clearSearch();
-	}, [setFilterValues, clearSearch]);
+	if (alertsResponse.isFetching || alertsResponse?.data?.payload === undefined) {
+		return <Spinner height="75vh" tip="Loading Alerts..." />;
+	}
 
 	return (
-		<div className={styles.container}>
-			<div className={styles.filtersRow}>
-				<Input
-					className={styles.searchInput}
-					placeholder="Search alerts by name"
-					value={searchText}
-					onChange={handleSearchChange}
-					suffix={<Search size={14} className={styles.searchIcon} />}
-				/>
-				<ComboboxSimple
-					className={styles.filterSelect}
-					multiple
-					value={selectedFilter.map((f) => f.value)}
-					onChange={handleFilterChange}
-					placeholder="Filter by tags"
-					inputPlaceholder="Create new filters with 'label:value'"
-					allowCreate
-					items={severyFilters}
-					maxDisplayedPills={2}
-				/>
-				<ComboboxSimple
-					className={styles.filterSelect}
-					value={selectedGroupBy}
-					onChange={handleGroupByChange}
-					placeholder="Group by tag"
-					inputPlaceholder="Select one or more"
-					items={labelOptions}
-					multiple
-					maxDisplayedPills={2}
-				/>
-			</div>
-
-			<div className={styles.tableContainer}>
-				{isError ? (
-					<ErrorEmptyState title="Failed to load alerts" onRefresh={refetch} />
-				) : isEmptyDueToFilters ? (
-					<NoResultsEmptyState
-						title="No matching alerts"
-						subtitle="No alerts match your current filters. Try adjusting your search criteria."
-						onClear={handleClearFilters}
-					/>
-				) : isEmptyNoAlerts ? (
-					<EmptyState onRefresh={refetch} />
-				) : isGrouped ? (
-					<TanStackTable<GroupedAlert>
-						data={paginatedGroupedData}
-						columns={groupedColumns}
-						isLoading={isFetching}
-						getRowKey={(row): string => row.groupKey}
-						getItemKey={(row): string => row.groupKey}
-						renderExpandedRow={renderExpandedRow}
-						getRowCanExpand={(): boolean => true}
-						columnStorageKey="triggered-alerts-grouped-columns"
-						enableQueryParams={QUERY_PARAMS_CONFIG}
-						pagination={{
-							total: groupedData.length,
-							defaultPage: DEFAULT_PAGE,
-							defaultLimit: DEFAULT_LIMIT,
-						}}
-						paginationClassname={styles.paginationContainer}
-					/>
-				) : (
-					<TanStackTable<Alert>
-						data={paginatedAlerts}
-						columns={columns}
-						isLoading={isFetching}
-						getRowKey={(row): string => row.fingerprint ?? ''}
-						getItemKey={(row): string => row.fingerprint ?? ''}
-						onRowClick={handleRowClick}
-						onRowClickNewTab={handleRowClickNewTab}
-						columnStorageKey="triggered-alerts-columns"
-						enableQueryParams={QUERY_PARAMS_CONFIG}
-						pagination={{
-							total: filteredAlerts.length,
-							defaultPage: DEFAULT_PAGE,
-							defaultLimit: DEFAULT_LIMIT,
-							showTotalCount: true,
-						}}
-						paginationClassname={styles.paginationContainer}
-					/>
-				)}
-			</div>
+		<div className="triggered-alerts-container">
+			<TriggerComponent
+				allAlerts={alertsResponse?.data?.payload || []}
+				selectedFilter={selectedFilter}
+				selectedGroup={selectedGroup}
+				onSelectedFilterChange={handleSelectedFilterChange}
+				onSelectedGroupChange={handleSelectedGroupChange}
+			/>
 		</div>
 	);
 }

frontend/src/container/TriggeredAlerts/styles.ts

@@ -0,0 +1,29 @@
+import { Select as SelectComponent } from 'antd';
+import styled from 'styled-components';
+
+export const Select = styled(SelectComponent)`
+	&&& {
+		min-width: 350px;
+	}
+`;
+
+export const Container = styled.div`
+	&&& {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		margin-top: 1rem;
+	}
+`;
+
+export const TableContainer = styled.div`
+	&&& {
+		margin-top: 2rem;
+	}
+`;
+
+export const NoTableContainer = styled.div`
+	&&& {
+		margin-top: 2rem;
+	}
+`;

frontend/src/container/TriggeredAlerts/table.config.tsx

@@ -1,153 +0,0 @@
-import { BellDot, ChevronDown, ChevronRight } from '@signozhq/icons';
-import { Badge } from '@signozhq/ui/badge';
-import { Button } from '@signozhq/ui/button';
-import { SEVERITY_BADGE_COLORS } from 'components/Alerts/constants';
-import TanStackTable from 'components/TanStackTableView';
-import type { TableColumnDef } from 'components/TanStackTableView';
-import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
-import AlertStatusTag from './components/AlertStatusTag';
-import LabelColumn from 'components/Alerts/LabelColumn';
-import styles from './TriggeredAlerts.module.scss';
-import type { Alert, GroupedAlert } from './types';
-
-export function getAlertColumns(
-	formatTimezoneAdjustedTimestamp: (date: string, format: string) => string,
-): TableColumnDef<Alert>[] {
-	return [
-		{
-			id: 'status',
-			header: 'Status',
-			accessorFn: (row) => row.status?.state,
-			width: { min: 120, default: 120 },
-			enableSort: false,
-			enableMove: false,
-			cell: ({ value }): JSX.Element => (
-				<AlertStatusTag state={String(value ?? '')} />
-			),
-		},
-		{
-			id: 'alertName',
-			header: 'Alert Name',
-			accessorFn: (row) => row.labels?.alertname ?? '',
-			width: { min: 200, default: 330 },
-			enableSort: true,
-			enableMove: false,
-			cell: ({ value }): JSX.Element => (
-				<TanStackTable.Text>{String(value ?? '-')}</TanStackTable.Text>
-			),
-		},
-		{
-			id: 'severity',
-			header: 'Severity',
-			accessorFn: (row) => row.labels?.severity ?? '',
-			width: { min: 150, default: 150 },
-			enableSort: true,
-			enableMove: false,
-			cell: ({ value }): JSX.Element => {
-				const severity = String(value ?? '').toLowerCase();
-				if (!severity) {
-					return <TanStackTable.Text>-</TanStackTable.Text>;
-				}
-				return (
-					<Badge
-						color={SEVERITY_BADGE_COLORS[severity] ?? 'secondary'}
-						variant="outline"
-					>
-						{severity}
-					</Badge>
-				);
-			},
-		},
-		{
-			id: 'firingSince',
-			header: 'Firing Since',
-			accessorKey: 'startsAt',
-			width: { min: 280, default: 280 },
-			enableSort: true,
-			enableMove: false,
-			cell: ({ value }): JSX.Element => (
-				<TanStackTable.Text>
-					{value
-						? formatTimezoneAdjustedTimestamp(String(value), DATE_TIME_FORMATS.UTC_US)
-						: '-'}
-				</TanStackTable.Text>
-			),
-		},
-		{
-			id: 'labels',
-			header: 'Labels',
-			accessorKey: 'labels',
-			width: { min: 200, default: 300 },
-			enableMove: false,
-			cell: ({ value }): JSX.Element => {
-				const labels = value as Record<string, string> | undefined;
-				if (!labels) {
-					return <TanStackTable.Text>-</TanStackTable.Text>;
-				}
-
-				const tagKeys = Object.keys(labels).filter((k) => k !== 'severity');
-				if (!tagKeys.length) {
-					return <TanStackTable.Text>-</TanStackTable.Text>;
-				}
-
-				return <LabelColumn labels={tagKeys} value={labels} color="sakura" />;
-			},
-		},
-	];
-}
-
-export const groupedColumns: TableColumnDef<GroupedAlert>[] = [
-	{
-		id: 'groupTags',
-		header: (): JSX.Element => (
-			<div className={styles.groupHeader}>
-				<BellDot size={14} />
-				<span>Group</span>
-			</div>
-		),
-		accessorFn: (row) => row.groupKey,
-		width: { default: '100%' },
-		enableRemove: false,
-		enableMove: false,
-		pin: 'left',
-		cell: ({ row: groupRow, isExpanded, toggleExpanded }): JSX.Element => {
-			const tags = Object.entries(groupRow.groupLabels)
-				.filter(([, v]) => v)
-				.map(([k, v]) => `${k}:${v}`);
-
-			return (
-				<div className={styles.groupCell}>
-					<Button
-						variant="ghost"
-						color="secondary"
-						size="icon"
-						onClick={(e): void => {
-							e.stopPropagation();
-							toggleExpanded();
-						}}
-						prefix={
-							isExpanded ? <ChevronDown size={14} /> : <ChevronRight size={14} />
-						}
-					/>
-					<div className={styles.tagsContainer}>
-						{tags.map((tag) => (
-							<Badge color="error" key={tag} variant="outline">
-								{tag}
-							</Badge>
-						))}
-					</div>
-				</div>
-			);
-		},
-	},
-	{
-		id: 'alertCount',
-		header: 'Alerts',
-		accessorFn: (row) => row.alerts.length,
-		width: { min: 80, default: 100 },
-		enableMove: false,
-		cell: ({ value }): JSX.Element => (
-			<TanStackTable.Text>{String(value)}</TanStackTable.Text>
-		),
-	},
-];

frontend/src/container/TriggeredAlerts/types.ts

@@ -1,10 +0,0 @@
-import type { AlertmanagertypesDeprecatedGettableAlertDTO } from 'api/generated/services/sigNoz.schemas';
-
-export type Alert = AlertmanagertypesDeprecatedGettableAlertDTO;
-
-export interface GroupedAlert {
-	groupKey: string;
-	groupLabels: Record<string, string>;
-	alerts: Alert[];
-	firstAlert: Alert;
-}

frontend/src/container/TriggeredAlerts/useTriggeredAlertsData.ts

@@ -1,107 +0,0 @@
-import { useEffect, useMemo, useRef } from 'react';
-import logEvent from 'api/common/logEvent';
-import { useGetAlerts } from 'api/generated/services/alerts';
-import type { FilterValue } from 'components/Alerts/types';
-import { filterByLabels, searchByLabels } from 'components/Alerts/utils';
-import type { SortState } from 'components/TanStackTableView/types';
-import { groupBy as lodashGroupBy, isUndefined } from 'lodash-es';
-
-import type { Alert, GroupedAlert } from './types';
-import { normalizeAlerts, sortAlerts } from './utils';
-
-interface UseTriggeredAlertsDataReturn {
-	allAlerts: Alert[];
-	filteredAlerts: Alert[];
-	groupedData: GroupedAlert[];
-	uniqueLabels: string[];
-	isFetching: boolean;
-	isError: boolean;
-	isGrouped: boolean;
-	refetch: () => void;
-}
-
-const TRIGGERED_ALERTS_REFRESH_INTERVAL = 30_000;
-
-export function useTriggeredAlertsData(
-	selectedFilter: FilterValue[],
-	selectedGroupBy: string[],
-	orderBy: SortState | null,
-	searchText = '',
-): UseTriggeredAlertsDataReturn {
-	const hasLoggedEvent = useRef(false);
-
-	const alertsResponse = useGetAlerts({
-		query: {
-			refetchInterval: TRIGGERED_ALERTS_REFRESH_INTERVAL,
-		},
-	});
-
-	useEffect(() => {
-		const alerts = alertsResponse.data?.data;
-		if (!hasLoggedEvent.current && !isUndefined(alerts)) {
-			logEvent('Alert: Triggered alert list page visited', {
-				number: alerts?.length,
-			});
-			hasLoggedEvent.current = true;
-		}
-	}, [alertsResponse.data]);
-
-	const allAlerts = useMemo(
-		() => normalizeAlerts(alertsResponse.data?.data),
-		[alertsResponse.data],
-	);
-
-	const filteredAlerts = useMemo(() => {
-		let result = filterByLabels(allAlerts, selectedFilter);
-		result = searchByLabels(result, searchText, (a) => a.labels?.alertname ?? '');
-		return sortAlerts(result, orderBy);
-	}, [allAlerts, selectedFilter, searchText, orderBy]);
-
-	const uniqueLabels = useMemo(() => {
-		const labelsSet = new Set<string>();
-		allAlerts.forEach((alert) => {
-			if (alert.labels) {
-				Object.keys(alert.labels).forEach((key) => labelsSet.add(key));
-			}
-		});
-		return Array.from(labelsSet);
-	}, [allAlerts]);
-
-	const groupedData = useMemo((): GroupedAlert[] => {
-		if (!selectedGroupBy.length) {
-			return [];
-		}
-
-		const grouped = lodashGroupBy(filteredAlerts, (alert) =>
-			selectedGroupBy.map((key) => alert.labels?.[key] ?? '').join('+'),
-		);
-
-		return Object.entries(grouped)
-			.filter(([, alerts]) => alerts.length > 0)
-			.map(([groupKey, alerts]) => {
-				const firstAlert = alerts[0];
-				const groupLabels: Record<string, string> = {};
-				selectedGroupBy.forEach((key) => {
-					groupLabels[key] = firstAlert.labels?.[key] ?? '';
-				});
-
-				return {
-					groupKey,
-					groupLabels,
-					alerts,
-					firstAlert,
-				};
-			});
-	}, [filteredAlerts, selectedGroupBy]);
-
-	return {
-		allAlerts,
-		filteredAlerts,
-		groupedData,
-		uniqueLabels,
-		isFetching: alertsResponse.isFetching,
-		isError: alertsResponse.isError,
-		isGrouped: selectedGroupBy.length > 0,
-		refetch: alertsResponse.refetch,
-	};
-}

frontend/src/container/TriggeredAlerts/useTriggeredAlertsHandlers.ts

@@ -1,58 +0,0 @@
-import { useCallback } from 'react';
-import logEvent from 'api/common/logEvent';
-import { QueryParams } from 'constants/query';
-import ROUTES from 'constants/routes';
-import { useSafeNavigate } from 'hooks/useSafeNavigate';
-import { useTableRowClick } from 'hooks/useTableRowClick';
-
-import type { Alert } from './types';
-import { getRuleId } from './utils';
-
-interface UseTriggeredAlertsHandlersReturn {
-	handleGroupByChange: (values: unknown) => void;
-	handleRowClick: (alert: Alert) => void;
-	handleRowClickNewTab: (alert: Alert) => void;
-}
-
-export function useTriggeredAlertsHandlers(
-	setSelectedGroupBy: (groupBy: string[]) => void,
-): UseTriggeredAlertsHandlersReturn {
-	const { safeNavigate } = useSafeNavigate();
-
-	const handleGroupByChange = useCallback(
-		(values: unknown) => {
-			if (Array.isArray(values)) {
-				setSelectedGroupBy(values);
-			}
-		},
-		[setSelectedGroupBy],
-	);
-
-	const getAlertUrl = useCallback((alert: Alert): string | null => {
-		const ruleId = getRuleId(alert);
-		if (!ruleId) {
-			return null;
-		}
-		return `${ROUTES.ALERT_OVERVIEW}?${QueryParams.ruleId}=${ruleId}`;
-	}, []);
-
-	const onBeforeNavigate = useCallback((alert: Alert): void => {
-		const ruleId = getRuleId(alert);
-		logEvent('Alert: Triggered alert clicked', {
-			ruleId,
-			alertName: alert.labels?.alertname,
-		});
-	}, []);
-
-	const { handleRowClick, handleRowClickNewTab } = useTableRowClick<Alert>({
-		getUrl: getAlertUrl,
-		onNavigate: safeNavigate,
-		onBeforeNavigate,
-	});
-
-	return {
-		handleGroupByChange,
-		handleRowClick,
-		handleRowClickNewTab,
-	};
-}

frontend/src/container/TriggeredAlerts/utils.ts

@@ -1,78 +1,54 @@
-import { v4 as uuidv4 } from 'uuid';
+import { Alerts } from 'types/api/alerts/getTriggered';
 
-import type { FilterValue } from 'components/Alerts/types';
-import {
-	filterByLabels,
-	searchByLabels,
-	sortByColumn,
-} from 'components/Alerts/utils';
-import type { SortState } from 'components/TanStackTableView/types';
+import { Value } from './Filter';
 
-import { getElapsedMs } from 'utils/timeUtils';
+export const FilterAlerts = (
+	allAlerts: Alerts[],
+	selectedFilter: Value[],
+): Alerts[] => {
+	// also we need to update the alerts
+	// [[key,value]]
 
-import type { Alert } from './types';
-
-export function normalizeAlerts(rawAlerts: Alert[] | undefined): Alert[] {
-	if (!rawAlerts) {
-		return [];
-	}
-	return rawAlerts.map((alert) => ({
-		...alert,
-		fingerprint: alert.fingerprint ?? uuidv4(),
-	}));
-}
-
-export function getAlertSortValue(
-	alert: Alert,
-	columnName: string,
-): string | number {
-	switch (columnName) {
-		case 'status':
-			return alert.status?.state ?? '';
-		case 'alertName':
-			return alert.labels?.alertname ?? '';
-		case 'severity':
-			return alert.labels?.severity ?? '';
-		case 'firingSince':
-			return alert.startsAt ? getElapsedMs(alert.startsAt) : '';
-		case 'duration':
-			return getElapsedMs(alert.startsAt);
-		default:
-			return '';
-	}
-}
-
-export function sortAlerts(
-	alerts: Alert[],
-	orderBy: SortState | null,
-): Alert[] {
-	return sortByColumn(alerts, orderBy, getAlertSortValue, {
-		columnName: 'duration',
-		order: 'asc',
-	});
-}
-
-export { filterByLabels as filterAlerts, searchByLabels as searchAlerts };
-export type { FilterValue };
-
-export function getRuleId(alert: Alert): string | null {
-	// Primary: labels.ruleId
-	if (alert.labels?.ruleId) {
-		return alert.labels.ruleId;
+	if (selectedFilter?.length === 0 || selectedFilter === undefined) {
+		return allAlerts;
 	}
 
-	// Fallback: parse from generatorURL
-	if (alert.generatorURL) {
-		try {
-			const url = new URL(alert.generatorURL);
-			const ruleId = url.searchParams.get('ruleId');
-			if (ruleId) {
-				return ruleId;
-			}
-		} catch {
-			// Invalid URL, ignore
+	const filter: string[] = [];
+
+	// filtering the value
+	selectedFilter.forEach((e) => {
+		const valueKey = e.value.split(':');
+		if (valueKey.length === 2) {
+			filter.push(e.value);
 		}
-	}
+	});
 
-	return null;
-}
+	const tags = filter.map((e) => e.split(':'));
+	const objectMap = new Map();
+
+	const filteredKey = tags.reduce((acc, curr) => [...acc, curr[0]], []);
+	const filteredValue = tags.reduce((acc, curr) => [...acc, curr[1]], []);
+
+	filteredKey.forEach((key, index) =>
+		objectMap.set(key.trim(), filteredValue[index].trim()),
+	);
+
+	const filteredAlerts: Set<string> = new Set();
+
+	allAlerts.forEach((alert) => {
+		const { labels } = alert;
+		if (!labels) {
+			return;
+		}
+		Object.keys(labels).forEach((e) => {
+			const selectedKey = objectMap.get(e);
+
+			// alerts which does not have the key with value
+			if (selectedKey && labels[e] === selectedKey) {
+				filteredAlerts.add(alert.fingerprint);
+			}
+		});
+	});
+
+	return allAlerts.filter((e) => filteredAlerts.has(e.fingerprint));
+};

frontend/src/hooks/useTableRowClick.ts

@@ -1,65 +0,0 @@
-import { useCallback } from 'react';
-
-import { useIsTextSelected } from './useIsTextSelected';
-
-interface UseTableRowClickOptions<T> {
-	getUrl: (item: T) => string | null;
-	onNavigate: (url: string, options?: { newTab?: boolean }) => void;
-	onBeforeNavigate?: (item: T) => void;
-}
-
-interface UseTableRowClickReturn<T> {
-	handleRowClick: (item: T) => void;
-	handleRowClickNewTab: (item: T) => void;
-}
-
-/**
- * Hook for handling table row clicks with text selection check
- * Prevents navigation when user is selecting text
- */
-export function useTableRowClick<T>({
-	getUrl,
-	onNavigate,
-	onBeforeNavigate,
-}: UseTableRowClickOptions<T>): UseTableRowClickReturn<T> {
-	const isTextSelected = useIsTextSelected();
-
-	const handleRowClick = useCallback(
-		(item: T): void => {
-			if (isTextSelected()) {
-				return;
-			}
-
-			const url = getUrl(item);
-			if (!url) {
-				return;
-			}
-
-			onBeforeNavigate?.(item);
-			onNavigate(url);
-		},
-		[isTextSelected, getUrl, onNavigate, onBeforeNavigate],
-	);
-
-	const handleRowClickNewTab = useCallback(
-		(item: T): void => {
-			if (isTextSelected()) {
-				return;
-			}
-
-			const url = getUrl(item);
-			if (!url) {
-				return;
-			}
-
-			onBeforeNavigate?.(item);
-			onNavigate(url, { newTab: true });
-		},
-		[isTextSelected, getUrl, onNavigate, onBeforeNavigate],
-	);
-
-	return {
-		handleRowClick,
-		handleRowClickNewTab,
-	};
-}

frontend/src/hooks/useUrlSearchState.test.tsx

@@ -1,266 +0,0 @@
-import { act, renderHook } from '@testing-library/react';
-import { NuqsTestingAdapter } from 'nuqs/adapters/testing';
-
-import { useUrlSearchState } from './useUrlSearchState';
-
-jest.useFakeTimers();
-
-const DEFAULT_DEBOUNCE_MS = 300;
-
-function createWrapper(searchParams?: string) {
-	return function Wrapper({
-		children,
-	}: {
-		children: React.ReactNode;
-	}): JSX.Element {
-		return (
-			<NuqsTestingAdapter searchParams={searchParams}>
-				{children}
-			</NuqsTestingAdapter>
-		);
-	};
-}
-
-describe('useUrlSearchState', () => {
-	afterEach(() => {
-		jest.clearAllTimers();
-	});
-
-	describe('initialization', () => {
-		it('initializes with empty string when no URL param', () => {
-			const { result } = renderHook(() => useUrlSearchState('search'), {
-				wrapper: createWrapper(),
-			});
-
-			expect(result.current.searchText).toBe('');
-			expect(result.current.debouncedSearch).toBe('');
-		});
-
-		it('initializes from URL param', () => {
-			const { result } = renderHook(() => useUrlSearchState('search'), {
-				wrapper: createWrapper('?search=hello'),
-			});
-
-			expect(result.current.searchText).toBe('hello');
-			expect(result.current.debouncedSearch).toBe('hello');
-		});
-	});
-
-	describe('user typing', () => {
-		it('updates searchText immediately on handleSearchChange', () => {
-			const { result } = renderHook(() => useUrlSearchState('search'), {
-				wrapper: createWrapper(),
-			});
-
-			act(() => {
-				result.current.handleSearchChange({
-					target: { value: 'test' },
-				} as React.ChangeEvent<HTMLInputElement>);
-			});
-
-			expect(result.current.searchText).toBe('test');
-			expect(result.current.debouncedSearch).toBe('');
-		});
-
-		it('updates searchText immediately on setSearchText', () => {
-			const { result } = renderHook(() => useUrlSearchState('search'), {
-				wrapper: createWrapper(),
-			});
-
-			act(() => {
-				result.current.setSearchText('direct');
-			});
-
-			expect(result.current.searchText).toBe('direct');
-		});
-
-		it('updates debouncedSearch after debounce delay', () => {
-			const { result } = renderHook(() => useUrlSearchState('search'), {
-				wrapper: createWrapper(),
-			});
-
-			act(() => {
-				result.current.setSearchText('delayed');
-			});
-
-			expect(result.current.debouncedSearch).toBe('');
-
-			act(() => {
-				jest.advanceTimersByTime(DEFAULT_DEBOUNCE_MS);
-			});
-
-			expect(result.current.debouncedSearch).toBe('delayed');
-		});
-
-		it('respects custom debounce delay', () => {
-			const customDelay = 500;
-			const { result } = renderHook(
-				() => useUrlSearchState('search', { debounceMs: customDelay }),
-				{ wrapper: createWrapper() },
-			);
-
-			act(() => {
-				result.current.setSearchText('custom');
-			});
-
-			act(() => {
-				jest.advanceTimersByTime(DEFAULT_DEBOUNCE_MS);
-			});
-
-			expect(result.current.debouncedSearch).toBe('');
-
-			act(() => {
-				jest.advanceTimersByTime(customDelay - DEFAULT_DEBOUNCE_MS);
-			});
-
-			expect(result.current.debouncedSearch).toBe('custom');
-		});
-	});
-
-	describe('debounce behavior', () => {
-		it('does not update debouncedSearch before delay', () => {
-			const { result } = renderHook(() => useUrlSearchState('search'), {
-				wrapper: createWrapper(),
-			});
-
-			act(() => {
-				result.current.setSearchText('urltest');
-			});
-
-			// Advance less than debounce time
-			act(() => {
-				jest.advanceTimersByTime(DEFAULT_DEBOUNCE_MS - 50);
-			});
-
-			expect(result.current.debouncedSearch).toBe('');
-		});
-
-		it('updates debouncedSearch exactly at delay', () => {
-			const { result } = renderHook(() => useUrlSearchState('search'), {
-				wrapper: createWrapper(),
-			});
-
-			act(() => {
-				result.current.setSearchText('urltest');
-			});
-
-			act(() => {
-				jest.advanceTimersByTime(DEFAULT_DEBOUNCE_MS);
-			});
-
-			expect(result.current.debouncedSearch).toBe('urltest');
-		});
-
-		it('resets debounce timer on rapid typing', () => {
-			const { result } = renderHook(() => useUrlSearchState('search'), {
-				wrapper: createWrapper(),
-			});
-
-			act(() => {
-				result.current.setSearchText('a');
-			});
-
-			act(() => {
-				jest.advanceTimersByTime(200);
-			});
-
-			act(() => {
-				result.current.setSearchText('ab');
-			});
-
-			act(() => {
-				jest.advanceTimersByTime(200);
-			});
-
-			// Still hasn't debounced because timer reset
-			expect(result.current.debouncedSearch).toBe('');
-
-			act(() => {
-				jest.advanceTimersByTime(100);
-			});
-
-			// Now it should have debounced
-			expect(result.current.debouncedSearch).toBe('ab');
-		});
-	});
-
-	describe('clearSearch', () => {
-		it('clears searchText immediately', () => {
-			const { result } = renderHook(() => useUrlSearchState('search'), {
-				wrapper: createWrapper('?search=toclear'),
-			});
-
-			expect(result.current.searchText).toBe('toclear');
-
-			act(() => {
-				result.current.clearSearch();
-			});
-
-			expect(result.current.searchText).toBe('');
-		});
-
-		it('clears debouncedSearch after delay', () => {
-			const { result } = renderHook(() => useUrlSearchState('search'), {
-				wrapper: createWrapper('?search=toclear'),
-			});
-
-			act(() => {
-				result.current.clearSearch();
-			});
-
-			expect(result.current.debouncedSearch).toBe('toclear');
-
-			act(() => {
-				jest.advanceTimersByTime(DEFAULT_DEBOUNCE_MS);
-			});
-
-			expect(result.current.debouncedSearch).toBe('');
-		});
-	});
-
-	describe('browser navigation (back/forward)', () => {
-		it('syncs local state when URL changes externally', () => {
-			const { result, rerender } = renderHook(() => useUrlSearchState('search'), {
-				wrapper: createWrapper('?search=first'),
-			});
-
-			expect(result.current.searchText).toBe('first');
-
-			// Simulate user typing "second"
-			act(() => {
-				result.current.setSearchText('second');
-			});
-
-			act(() => {
-				jest.advanceTimersByTime(DEFAULT_DEBOUNCE_MS);
-			});
-
-			expect(result.current.searchText).toBe('second');
-			expect(result.current.debouncedSearch).toBe('second');
-
-			// Simulate browser back - URL changes externally to "first"
-			rerender();
-
-			// Note: In real scenario, NuqsTestingAdapter would update searchParam
-			// This test verifies the hook's internal logic is correct
-		});
-	});
-
-	describe('different query keys', () => {
-		it('reads from correct URL param key', () => {
-			const { result } = renderHook(() => useUrlSearchState('mySearch'), {
-				wrapper: createWrapper('?mySearch=fromurl&other=ignored'),
-			});
-
-			expect(result.current.searchText).toBe('fromurl');
-		});
-
-		it('ignores other URL params', () => {
-			const { result } = renderHook(() => useUrlSearchState('search'), {
-				wrapper: createWrapper('?other=value&search=correct&another=test'),
-			});
-
-			expect(result.current.searchText).toBe('correct');
-		});
-	});
-});

frontend/src/hooks/useUrlSearchState.ts

@@ -1,75 +0,0 @@
-import type { ChangeEvent } from 'react';
-import { useCallback, useEffect, useRef, useState } from 'react';
-import { parseAsString, useQueryState } from 'nuqs';
-
-import useDebounce from './useDebounce';
-
-interface UseUrlSearchStateOptions {
-	debounceMs?: number;
-}
-
-interface UseUrlSearchStateReturn {
-	searchText: string;
-	debouncedSearch: string;
-	setSearchText: (value: string) => void;
-	handleSearchChange: (e: ChangeEvent<HTMLInputElement>) => void;
-	clearSearch: () => void;
-}
-
-/**
- * Hook for managing search state synced with URL query params.
- * Uses ref to track last synced value, preventing race conditions
- * when browser back/forward changes URL externally.
- */
-export function useUrlSearchState(
-	key: string,
-	options: UseUrlSearchStateOptions = {},
-): UseUrlSearchStateReturn {
-	const { debounceMs = 300 } = options;
-
-	const [searchParam, setSearchParam] = useQueryState(
-		key,
-		parseAsString.withDefault('').withOptions({ history: 'push' }),
-	);
-
-	const [searchText, setSearchText] = useState(searchParam);
-	const debouncedSearch = useDebounce(searchText, debounceMs);
-
-	// Track what we last synced to URL to detect external changes
-	const lastSyncedToUrl = useRef(searchParam);
-
-	// Sync debounced value to URL (user typing -> URL)
-	useEffect(() => {
-		if (debouncedSearch !== lastSyncedToUrl.current) {
-			lastSyncedToUrl.current = debouncedSearch;
-			void setSearchParam(debouncedSearch || null);
-		}
-	}, [debouncedSearch, setSearchParam]);
-
-	// Sync URL to local state (browser back/forward -> input)
-	useEffect(() => {
-		if (searchParam !== lastSyncedToUrl.current) {
-			lastSyncedToUrl.current = searchParam;
-			setSearchText(searchParam);
-		}
-	}, [searchParam]);
-
-	const handleSearchChange = useCallback(
-		(e: ChangeEvent<HTMLInputElement>): void => {
-			setSearchText(e.target.value);
-		},
-		[],
-	);
-
-	const clearSearch = useCallback((): void => {
-		setSearchText('');
-	}, []);
-
-	return {
-		searchText,
-		debouncedSearch,
-		setSearchText,
-		handleSearchChange,
-		clearSearch,
-	};
-}

frontend/src/pages/AlertDetails/AlertHeader/AlertState/AlertState.tsx

@@ -17,7 +17,7 @@ export default function AlertState({
 	let label;
 	const isDarkMode = useIsDarkMode();
 	switch (state) {
-		case 'no-data':
+		case 'nodata':
 			icon = (
 				<CircleOff
 					size={18}

frontend/src/pages/AlertDetails/hooks.tsx

@@ -12,6 +12,7 @@ import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
 import {
 	createRule,
 	deleteRuleByID,
+	invalidateGetRuleByID,
 	updateRuleByID,
 	useGetRuleByID,
 	useListRules,
@@ -408,6 +409,7 @@ export const useAlertRuleStatusToggle = ({
 		{
 			onSuccess: (data) => {
 				setAlertRuleState(data.data.state);
+				invalidateGetRuleByID(queryClient, { id: ruleId });
 				queryClient.refetchQueries([REACT_QUERY_KEY.ALERT_RULE_DETAILS, ruleId]);
 				notifications.success({
 					message: `Alert has been ${
@@ -416,6 +418,7 @@ export const useAlertRuleStatusToggle = ({
 				});
 			},
 			onError: (error) => {
+				invalidateGetRuleByID(queryClient, { id: ruleId });
 				queryClient.refetchQueries([REACT_QUERY_KEY.ALERT_RULE_DETAILS, ruleId]);
 				showErrorModal(
 					convertToApiError(error as AxiosError<RenderErrorResponseDTO>) as APIError,

frontend/src/pages/TraceDetailsV3/SpanDetailsPanel/SpanDetailsPanel.tsx

@@ -6,7 +6,12 @@ import {
 	TabsRoot,
 	TabsTrigger,
 } from '@signozhq/ui/tabs';
-import { TooltipSimple } from '@signozhq/ui/tooltip';
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipProvider,
+	TooltipTrigger,
+} from '@signozhq/ui/tooltip';
 import {
 	Bookmark,
 	CalendarClock,
@@ -491,22 +496,27 @@ function SpanDetailsPanel({
 			actions.push({
 				key: 'dock-toggle',
 				component: (
-					<TooltipSimple
-						title={isDocked ? 'Open as floating panel' : 'Dock at the bottom'}
-					>
-						<Button
-							variant="ghost"
-							size="icon"
-							color="secondary"
-							onClick={(): void =>
-								onVariantChange(
-									isDocked ? SpanDetailVariant.DIALOG : SpanDetailVariant.DOCKED,
-								)
-							}
-						>
-							{isDocked ? <Dock size={14} /> : <PanelBottom size={14} />}
-						</Button>
-					</TooltipSimple>
+					<TooltipProvider>
+						<Tooltip>
+							<TooltipTrigger asChild>
+								<Button
+									variant="ghost"
+									size="icon"
+									color="secondary"
+									onClick={(): void =>
+										onVariantChange(
+											isDocked ? SpanDetailVariant.DIALOG : SpanDetailVariant.DOCKED,
+										)
+									}
+								>
+									{isDocked ? <Dock size={14} /> : <PanelBottom size={14} />}
+								</Button>
+							</TooltipTrigger>
+							<TooltipContent className="dock-toggle-tooltip">
+								{isDocked ? 'Open as floating panel' : 'Dock at the bottom'}
+							</TooltipContent>
+						</Tooltip>
+					</TooltipProvider>
 				),
 			});
 		}

frontend/src/pages/TraceDetailsV3/SpanHoverCard/SpanHoverCard.tsx

@@ -1,7 +1,7 @@
 import {
+	Tooltip,
 	TooltipContent,
 	TooltipProvider,
-	TooltipRoot,
 	TooltipTrigger,
 } from '@signozhq/ui/tooltip';
 import { convertTimeToRelevantUnit } from 'container/TraceDetail/utils';
@@ -149,7 +149,7 @@ export function SpanHoverCard({
 
 	return (
 		<TooltipProvider>
-			<TooltipRoot open={hoverCardData !== null} onOpenChange={onOpenChange}>
+			<Tooltip open={hoverCardData !== null} onOpenChange={onOpenChange}>
 				<TooltipTrigger asChild>
 					<div
 						className="span-hover-card-anchor"
@@ -168,7 +168,7 @@ export function SpanHoverCard({
 				>
 					{hoverCardData && <SpanTooltipContent {...hoverCardData.tooltip} />}
 				</TooltipContent>
-			</TooltipRoot>
+			</Tooltip>
 		</TooltipProvider>
 	);
 }

frontend/src/pages/TraceDetailsV3/TraceDetailsHeader/TraceDetailsHeader.tsx

@@ -2,9 +2,9 @@ import { useCallback, useState } from 'react';
 import { useParams } from 'react-router-dom';
 import { Button } from '@signozhq/ui/button';
 import {
+	Tooltip,
 	TooltipContent,
 	TooltipProvider,
-	TooltipRoot,
 	TooltipTrigger,
 } from '@signozhq/ui/tooltip';
 import { Skeleton } from 'antd';
@@ -145,7 +145,7 @@ function TraceDetailsHeader({
 						{!isFilterExpanded && (
 							<>
 								<TooltipProvider>
-									<TooltipRoot>
+									<Tooltip>
 										<TooltipTrigger asChild>
 											<Button
 												variant="ghost"
@@ -158,7 +158,7 @@ function TraceDetailsHeader({
 											</Button>
 										</TooltipTrigger>
 										<TooltipContent>Analytics</TooltipContent>
-									</TooltipRoot>
+									</Tooltip>
 								</TooltipProvider>
 								<TraceOptionsMenu
 									showTraceDetails={showTraceDetails}

frontend/src/pages/TraceDetailsV3/TraceWaterfall/SpanLineActionButtons/index.tsx

@@ -1,5 +1,10 @@
 import { Button } from '@signozhq/ui/button';
-import { TooltipSimple } from '@signozhq/ui/tooltip';
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipProvider,
+	TooltipTrigger,
+} from '@signozhq/ui/tooltip';
 import { useCopySpanLink } from 'hooks/trace/useCopySpanLink';
 import { Link } from '@signozhq/icons';
 import { Span } from 'types/api/trace/getTraceV2';
@@ -16,17 +21,24 @@ export default function SpanLineActionButtons({
 
 	return (
 		<div className="span-line-action-buttons">
-			<TooltipSimple title="Copy Span Link">
-				<Button
-					variant="ghost"
-					size="icon"
-					color="secondary"
-					onClick={onSpanCopy}
-					className="copy-span-btn"
-				>
-					<Link size={14} />
-				</Button>
-			</TooltipSimple>
+			<TooltipProvider>
+				<Tooltip>
+					<TooltipTrigger asChild>
+						<Button
+							variant="ghost"
+							size="icon"
+							color="secondary"
+							onClick={onSpanCopy}
+							className="copy-span-btn"
+						>
+							<Link size={14} />
+						</Button>
+					</TooltipTrigger>
+					<TooltipContent className="span-line-action-tooltip">
+						Copy Span Link
+					</TooltipContent>
+				</Tooltip>
+			</TooltipProvider>
 		</div>
 	);
 }