Merge branch 'main' of github.com:SigNoz/signoz into feat/trace-flamegraph

* fix: resource added in checkbox

* fix: resource name handling

* fix: added testcases

* fix: updated for other types as well

* fix: updated testcases

* fix: pr comments

docs/contributing/development.md

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

docs/contributing/onboarding.md

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

frontend/example.env

@@ -1,6 +1,6 @@
 NODE_ENV="development"
 BUNDLE_ANALYSER="true"
-VITE_FRONTEND_API_ENDPOINT="http://localhost:8080/"
+VITE_FRONTEND_API_ENDPOINT="http://localhost:8080"
 VITE_PYLON_APP_ID="pylon-app-id"
 VITE_APPCUES_APP_ID="appcess-app-id"
 VITE_PYLON_IDENTITY_SECRET="pylon-identity-secret"

frontend/jest.config.ts

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

frontend/public/Logos/deno.svg

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

frontend/public/Logos/haystack.svg

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

frontend/public/Logos/huggingface.svg

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

frontend/public/Logos/nvidia-dcgm.svg

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

frontend/public/Logos/ollama.svg

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

frontend/public/Logos/openrouter.svg

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

frontend/public/Logos/prometheus.svg

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

frontend/public/Logos/statsd.svg

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

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

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

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

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

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

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

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

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

frontend/src/components/TimelineV3/TimelineV3.tsx

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

frontend/src/components/TimelineV3/utils.ts

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

frontend/src/constants/query.ts

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

frontend/src/constants/theme.ts

@@ -33,6 +33,125 @@ const themeColors = {
 		purple: '#800080',
 		cyan: '#00FFFF',
 	},
+	traceDetailColorsV3: {
+		// Blues
+		dodgerBlue: '#2F80ED',
+		royalBlue: '#3366E6',
+		steelBlue: '#4682B4',
+
+		// Teals / Cyans
+		turquoise: '#00CEC9',
+		lagoon: '#1ABC9C',
+		cyanBright: '#22A6F2',
+
+		// Greens
+		emeraldGreen: '#27AE60',
+		mediumSeaGreen: '#3CB371',
+		limeGreen: '#A3E635',
+
+		// Yellows / Golds
+		festivalYellow: '#F2C94C',
+		sunflower: '#FFD93D',
+		warmAmber: '#FFCA28',
+
+		// Purples / Violets
+		mediumPurple: '#BB6BD9',
+		royalPurple: '#9B51E0',
+		orchid: '#DA77F2',
+
+		// Accent
+		neonViolet: '#C77DFF',
+		electricPurple: '#6C5CE7',
+		arcticBlue: '#48DBFB',
+
+		// Blues extended
+		blue1: '#1F63E0',
+		blue2: '#3A7AED',
+		blue3: '#5A9DF5',
+		blue4: '#2874A6',
+		blue5: '#2E86C1',
+		blue6: '#3498DB',
+
+		// Cyans
+		cyan1: '#00B0AA',
+		cyan2: '#33D6C2',
+		cyan3: '#66E9DA',
+
+		// Greens extended
+		green1: '#1E8449',
+		green2: '#2ECC71',
+		green3: '#58D68D',
+		green4: '#229954',
+		green5: '#27AE60',
+		green6: '#52BE80',
+
+		// Forest
+		forest1: '#27AE60',
+		forest2: '#2ECC71',
+		forest3: '#58D68D',
+
+		// Lime
+		lime1: '#A3E635',
+		lime2: '#B9F18D',
+		lime3: '#D4FFB0',
+
+		// Teals
+		teal1: '#009688',
+		teal2: '#1ABC9C',
+		teal3: '#48C9B0',
+		teal4: '#1ABC9C',
+		teal5: '#48C9B0',
+		teal6: '#76D7C4',
+
+		// Yellows
+		yellow1: '#F1C40F',
+		yellow2: '#F7DC6F',
+		yellow3: '#F9E79F',
+
+		// Gold
+		gold1: '#F39C12',
+		gold2: '#F1C40F',
+		gold3: '#F7DC6F',
+		gold4: '#B7950B',
+		gold5: '#F1C40F',
+		gold6: '#F4D03F',
+
+		// Mustard
+		mustard1: '#F1C40F',
+		mustard2: '#F7DC6F',
+		mustard3: '#F9E79F',
+
+		// Aqua
+		aqua1: '#00BFFF',
+		aqua2: '#1E90FF',
+		aqua3: '#63B8FF',
+
+		// Purple extended
+		purple1: '#8E44AD',
+		purple2: '#9B59B6',
+		purple3: '#BB8FCE',
+
+		violet1: '#8E44AD',
+		violet2: '#9B59B6',
+		violet3: '#BB8FCE',
+		violet4: '#7D3C98',
+		violet5: '#8E44AD',
+		violet6: '#9B59B6',
+
+		// Lavender
+		lavender1: '#9B59B6',
+		lavender2: '#AF7AC5',
+		lavender3: '#C39BD3',
+
+		// Oranges (safe ones, not red-ish)
+		orange4: '#D35400',
+		orange5: '#E67E22',
+		orange6: '#EB984E',
+
+		coral1: '#E67E22',
+		coral2: '#F39C12',
+		coral3: '#F5B041',
+	},
 	chartcolors: {
 		// Blues (3)
 		dodgerBlue: '#2F80ED',

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

@@ -204,8 +204,6 @@ describe('Dashboard landing page actions header tests', () => {
 			updateLocalStorageDashboardVariables: jest.fn(),
 			dashboardQueryRangeCalled: false,
 			setDashboardQueryRangeCalled: jest.fn(),
-			selectedRowWidgetId: null,
-			setSelectedRowWidgetId: jest.fn(),
 			isDashboardFetching: false,
 			columnWidths: {},
 			setColumnWidths: jest.fn(),

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

frontend/src/container/GridCardLayout/GridCardLayout.tsx

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

frontend/src/container/GridCardLayout/WidgetRow.tsx

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

frontend/src/container/LogsExplorerViews/index.tsx

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

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

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

frontend/src/container/NewWidget/index.tsx

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

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

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

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

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

frontend/src/hooks/useGetQueryLabels.test.ts

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

frontend/src/hooks/useGetQueryLabels.ts

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

frontend/src/hooks/useUrlYAxisUnit.ts

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

frontend/src/index.tsx

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

frontend/src/pages/TraceDetailV2/index.tsx

@@ -4,19 +4,11 @@ import ROUTES from 'constants/routes';
 import history from 'lib/history';
 import { Compass, Cone, TowerControl } from 'lucide-react';
 
-import TraceDetailsV2 from './TraceDetailV2';
+import TraceDetailsV3 from '../TraceDetailsV3';
 
 import './TraceDetailV2.styles.scss';
 
-interface INewTraceDetailProps {
-	items: {
-		label: JSX.Element;
-		key: string;
-		children: JSX.Element;
-	}[];
-}
-
-function NewTraceDetail(props: INewTraceDetailProps): JSX.Element {
+function NewTraceDetail(props: any): JSX.Element {
 	const { items } = props;
 	return (
 		<div className="traces-module-container">
@@ -50,7 +42,7 @@ export default function TraceDetailsPage(): JSX.Element {
 				</div>
 			),
 			key: 'trace-details',
-			children: <TraceDetailsV2 />,
+			children: <TraceDetailsV3 />,
 		},
 		{
 			label: (

frontend/src/pages/TraceDetailsV3/TraceDetailsHeader/TraceDetailsHeader.styles.scss

@@ -0,0 +1,91 @@
+.trace-details-header {
+	display: flex;
+	align-items: center;
+	padding: 0px 16px;
+
+	.previous-btn {
+		display: flex;
+		height: 30px;
+		padding: 6px 8px;
+		align-items: center;
+		gap: 4px;
+		border: 1px solid var(--bg-slate-300);
+		background: var(--bg-slate-500);
+		border-radius: 4px;
+		box-shadow: none;
+	}
+
+	.trace-name {
+		display: flex;
+		padding: 6px 8px;
+		margin-left: 6px;
+		align-items: center;
+		gap: 4px;
+		border: 1px solid var(--bg-slate-300);
+		border-radius: 4px 0px 0px 4px;
+		background: var(--bg-slate-500);
+
+		.drafting {
+			color: white;
+		}
+
+		.trace-id {
+			color: #fff;
+			font-family: Inter;
+			font-size: 13px;
+			font-style: normal;
+			font-weight: 400;
+			line-height: 18px;
+			letter-spacing: -0.07px;
+		}
+	}
+
+	.trace-id-value {
+		display: flex;
+		padding: 6px 8px;
+		justify-content: center;
+		align-items: center;
+		gap: 10px;
+		background: var(--bg-slate-400);
+		color: var(--Vanilla-400, #c0c1c3);
+		font-family: Inter;
+		font-size: 13px;
+		font-style: normal;
+		font-weight: 400;
+		line-height: 18px;
+		letter-spacing: -0.07px;
+		border: 1px solid var(--bg-slate-300);
+		border-left: unset;
+		border-radius: 0px 4px 4px 0px;
+	}
+}
+
+.lightMode {
+	.trace-details-header {
+		.previous-btn {
+			border: 1px solid var(--bg-vanilla-300);
+			background: var(--bg-vanilla-200);
+		}
+
+		.trace-name {
+			border: 1px solid var(--bg-vanilla-300);
+			background: var(--bg-vanilla-200);
+			border-right: none;
+
+			.drafting {
+				color: var(--bg-ink-100);
+			}
+
+			.trace-id {
+				color: var(--bg-ink-100);
+			}
+		}
+
+		.trace-id-value {
+			background: var(--bg-vanilla-300);
+			color: var(--bg-ink-400);
+			border: 1px solid var(--bg-vanilla-300);
+		}
+	}
+}
+// TODO: move to new css module name system

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

@@ -0,0 +1,38 @@
+import { useCallback } from 'react';
+import { useParams } from 'react-router-dom';
+import { Button, Typography } from 'antd';
+import ROUTES from 'constants/routes';
+import history from 'lib/history';
+import { ArrowLeft } from 'lucide-react';
+import { TraceDetailV2URLProps } from 'types/api/trace/getTraceV2';
+
+import './TraceDetailsHeader.styles.scss';
+
+function TraceDetailsHeader(): JSX.Element {
+	const { id: traceID } = useParams<TraceDetailV2URLProps>();
+
+	const handlePreviousBtnClick = useCallback((): void => {
+		const isSpaNavigate =
+			document.referrer &&
+			new URL(document.referrer).origin === window.location.origin;
+		if (isSpaNavigate) {
+			history.goBack();
+		} else {
+			history.push(ROUTES.TRACES_EXPLORER);
+		}
+	}, []);
+
+	return (
+		<div className="trace-details-header">
+			<Button className="previous-btn" onClick={handlePreviousBtnClick}>
+				<ArrowLeft size={14} />
+			</Button>
+			<div className="trace-name">
+				<Typography.Text className="trace-id">Trace ID</Typography.Text>
+			</div>
+			<Typography.Text className="trace-id-value">{traceID}</Typography.Text>
+		</div>
+	);
+}
+
+export default TraceDetailsHeader;

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/FlamegraphCanvas.tsx

@@ -0,0 +1,237 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import TimelineV3 from 'components/TimelineV3/TimelineV3';
+import { useIsDarkMode } from 'hooks/useDarkMode';
+
+import { DEFAULT_ROW_HEIGHT } from './constants';
+import { useCanvasSetup } from './hooks/useCanvasSetup';
+import { useFlamegraphDrag } from './hooks/useFlamegraphDrag';
+import { useFlamegraphDraw } from './hooks/useFlamegraphDraw';
+import { useFlamegraphHover } from './hooks/useFlamegraphHover';
+import { useFlamegraphZoom } from './hooks/useFlamegraphZoom';
+import { useScrollToSpan } from './hooks/useScrollToSpan';
+import { FlamegraphCanvasProps, SpanRect } from './types';
+import { formatDuration } from './utils';
+
+function FlamegraphCanvas(props: FlamegraphCanvasProps): JSX.Element {
+	const { spans, traceMetadata, firstSpanAtFetchLevel, onSpanClick } = props;
+
+	const isDarkMode = useIsDarkMode(); //TODO: see if can be removed or use a new hook
+	const canvasRef = useRef<HTMLCanvasElement>(null);
+	const containerRef = useRef<HTMLDivElement>(null);
+	const spanRectsRef = useRef<SpanRect[]>([]);
+
+	const [viewStartTs, setViewStartTs] = useState<number>(
+		traceMetadata.startTime,
+	);
+	const [viewEndTs, setViewEndTs] = useState<number>(traceMetadata.endTime);
+	const [scrollTop, setScrollTop] = useState<number>(0);
+	const [rowHeight, setRowHeight] = useState<number>(DEFAULT_ROW_HEIGHT);
+
+	// Mutable refs for zoom and drag hooks to read during rAF / mouse callbacks
+	const viewStartRef = useRef(viewStartTs);
+	const viewEndRef = useRef(viewEndTs);
+	const rowHeightRef = useRef(rowHeight);
+	const scrollTopRef = useRef(scrollTop);
+
+	useEffect(() => {
+		viewStartRef.current = viewStartTs;
+	}, [viewStartTs]);
+
+	useEffect(() => {
+		viewEndRef.current = viewEndTs;
+	}, [viewEndTs]);
+
+	useEffect(() => {
+		rowHeightRef.current = rowHeight;
+	}, [rowHeight]);
+
+	useEffect(() => {
+		scrollTopRef.current = scrollTop;
+	}, [scrollTop]);
+
+	useEffect(() => {
+		//TODO: see if this can be removed as once loaded the view start and end ts will not change
+		setViewStartTs(traceMetadata.startTime);
+		setViewEndTs(traceMetadata.endTime);
+		viewStartRef.current = traceMetadata.startTime;
+		viewEndRef.current = traceMetadata.endTime;
+	}, [traceMetadata.startTime, traceMetadata.endTime]);
+
+	const totalHeight = spans.length * rowHeight;
+
+	const { isOverFlamegraphRef } = useFlamegraphZoom({
+		canvasRef,
+		traceMetadata,
+		viewStartRef,
+		viewEndRef,
+		rowHeightRef,
+		setViewStartTs,
+		setViewEndTs,
+		setRowHeight,
+	});
+
+	const {
+		handleMouseDown,
+		handleMouseMove: handleDragMouseMove,
+		handleMouseUp,
+		handleDragMouseLeave,
+		suppressClickRef,
+		isDraggingRef,
+	} = useFlamegraphDrag({
+		canvasRef,
+		containerRef,
+		traceMetadata,
+		viewStartRef,
+		viewEndRef,
+		setViewStartTs,
+		setViewEndTs,
+		scrollTopRef,
+		setScrollTop,
+		totalHeight,
+	});
+
+	const {
+		hoveredSpanId,
+		handleHoverMouseMove,
+		handleHoverMouseLeave,
+		handleClick,
+		tooltipContent,
+	} = useFlamegraphHover({
+		canvasRef,
+		spanRectsRef,
+		traceMetadata,
+		viewStartTs,
+		viewEndTs,
+		isDraggingRef,
+		suppressClickRef,
+		onSpanClick,
+		isDarkMode,
+	});
+
+	const { drawFlamegraph } = useFlamegraphDraw({
+		canvasRef,
+		containerRef,
+		spans,
+		viewStartTs,
+		viewEndTs,
+		scrollTop,
+		rowHeight,
+		selectedSpanId: firstSpanAtFetchLevel || undefined,
+		hoveredSpanId: hoveredSpanId ?? '',
+		isDarkMode,
+		spanRectsRef,
+	});
+
+	useScrollToSpan({
+		firstSpanAtFetchLevel,
+		spans,
+		traceMetadata,
+		containerRef,
+		viewStartRef,
+		viewEndRef,
+		scrollTopRef,
+		rowHeight,
+		setViewStartTs,
+		setViewEndTs,
+		setScrollTop,
+	});
+
+	useCanvasSetup(canvasRef, containerRef, drawFlamegraph);
+
+	const handleMouseMove = useCallback(
+		(e: React.MouseEvent): void => {
+			handleDragMouseMove(e);
+			handleHoverMouseMove(e);
+		},
+		[handleDragMouseMove, handleHoverMouseMove],
+	);
+
+	const handleMouseLeave = useCallback((): void => {
+		isOverFlamegraphRef.current = false;
+		handleDragMouseLeave();
+		handleHoverMouseLeave();
+	}, [isOverFlamegraphRef, handleDragMouseLeave, handleHoverMouseLeave]);
+
+	// todo: move to a separate component/utils file
+	const tooltipElement = tooltipContent
+		? createPortal(
+				<div
+					style={{
+						position: 'fixed',
+						left: Math.min(tooltipContent.clientX + 15, window.innerWidth - 220),
+						top: Math.min(tooltipContent.clientY + 15, window.innerHeight - 100),
+						zIndex: 1000,
+						backgroundColor: 'rgba(30, 30, 30, 0.95)',
+						color: '#fff',
+						padding: '8px 12px',
+						borderRadius: 4,
+						fontSize: 12,
+						fontFamily: 'Inter, sans-serif',
+						boxShadow: '0 2px 8px rgba(0,0,0,0.3)',
+						pointerEvents: 'none',
+					}}
+				>
+					<div
+						style={{
+							fontWeight: 600,
+							marginBottom: 4,
+							color: tooltipContent.spanColor,
+						}}
+					>
+						{tooltipContent.spanName}
+					</div>
+					<div>Status: {tooltipContent.status}</div>
+					<div>Start: {tooltipContent.startMs.toFixed(2)} ms</div>
+					<div>Duration: {formatDuration(tooltipContent.durationMs * 1e6)}</div>
+				</div>,
+				document.body,
+		  )
+		: null;
+
+	return (
+		<div
+			style={{
+				display: 'flex',
+				flexDirection: 'column',
+				height: '100%',
+				padding: '0 15px',
+			}}
+		>
+			{tooltipElement}
+			<TimelineV3
+				startTimestamp={viewStartTs}
+				endTimestamp={viewEndTs}
+				offsetTimestamp={viewStartTs - traceMetadata.startTime}
+				timelineHeight={10}
+			/>
+			<div
+				ref={containerRef}
+				style={{
+					flex: 1,
+					overflow: 'hidden',
+					position: 'relative',
+				}}
+				onMouseEnter={(): void => {
+					isOverFlamegraphRef.current = true;
+				}}
+				onMouseLeave={handleMouseLeave}
+			>
+				<canvas
+					ref={canvasRef}
+					style={{
+						display: 'block',
+						width: '100%',
+						cursor: 'grab',
+					}}
+					onMouseDown={handleMouseDown}
+					onMouseMove={handleMouseMove}
+					onMouseUp={handleMouseUp}
+					onClick={handleClick}
+				/>
+			</div>
+		</div>
+	);
+}
+
+export default FlamegraphCanvas;

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/TraceFlamegraph.tsx

@@ -0,0 +1,107 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useHistory, useLocation, useParams } from 'react-router-dom';
+import useGetTraceFlamegraph from 'hooks/trace/useGetTraceFlamegraph';
+import useUrlQuery from 'hooks/useUrlQuery';
+import { TraceDetailFlamegraphURLProps } from 'types/api/trace/getTraceFlamegraph';
+
+import FlamegraphCanvas from './FlamegraphCanvas';
+
+//TODO: analyse if this is needed or not and move to separate file if needed else delete this enum.
+enum TraceFlamegraphState {
+	LOADING = 'LOADING',
+	SUCCESS = 'SUCCESS',
+	NO_DATA = 'NO_DATA',
+	ERROR = 'ERROR',
+	FETCHING_WITH_OLD_DATA = 'FETCHING_WITH_OLD_DATA',
+}
+
+function TraceFlamegraph(): JSX.Element {
+	const { id: traceId } = useParams<TraceDetailFlamegraphURLProps>();
+	const urlQuery = useUrlQuery();
+	const history = useHistory();
+	const { search } = useLocation();
+	const [firstSpanAtFetchLevel, setFirstSpanAtFetchLevel] = useState<string>(
+		urlQuery.get('spanId') || '',
+	);
+
+	useEffect(() => {
+		setFirstSpanAtFetchLevel(urlQuery.get('spanId') || '');
+	}, [urlQuery]);
+
+	const handleSpanClick = useCallback(
+		(spanId: string): void => {
+			setFirstSpanAtFetchLevel(spanId);
+			const searchParams = new URLSearchParams(search);
+			//tood: use from query params constants
+			if (searchParams.get('spanId') !== spanId) {
+				searchParams.set('spanId', spanId);
+				history.replace({ search: searchParams.toString() });
+			}
+		},
+		[history, search],
+	);
+
+	const { data, isFetching, error } = useGetTraceFlamegraph({
+		traceId,
+		selectedSpanId: firstSpanAtFetchLevel,
+	});
+
+	const flamegraphState = useMemo(() => {
+		if (isFetching) {
+			if (data?.payload?.spans && data.payload.spans.length > 0) {
+				return TraceFlamegraphState.FETCHING_WITH_OLD_DATA;
+			}
+			return TraceFlamegraphState.LOADING;
+		}
+		if (error) {
+			return TraceFlamegraphState.ERROR;
+		}
+		if (data?.payload?.spans && data.payload.spans.length === 0) {
+			return TraceFlamegraphState.NO_DATA;
+		}
+		return TraceFlamegraphState.SUCCESS;
+	}, [error, isFetching, data]);
+
+	const spans = useMemo(() => data?.payload?.spans || [], [
+		data?.payload?.spans,
+	]);
+
+	const content = useMemo(() => {
+		switch (flamegraphState) {
+			case TraceFlamegraphState.LOADING:
+				return <div>Loading...</div>;
+			case TraceFlamegraphState.ERROR:
+				return <div>Error loading flamegraph</div>;
+			case TraceFlamegraphState.NO_DATA:
+				return <div>No data found for trace {traceId}</div>;
+			case TraceFlamegraphState.SUCCESS:
+			case TraceFlamegraphState.FETCHING_WITH_OLD_DATA:
+				return (
+					<FlamegraphCanvas
+						spans={spans}
+						firstSpanAtFetchLevel={firstSpanAtFetchLevel}
+						setFirstSpanAtFetchLevel={setFirstSpanAtFetchLevel}
+						onSpanClick={handleSpanClick}
+						traceMetadata={{
+							startTime: data?.payload?.startTimestampMillis || 0,
+							endTime: data?.payload?.endTimestampMillis || 0,
+						}}
+					/>
+				);
+			default:
+				return <div>Fetching the trace...</div>;
+		}
+	}, [
+		data?.payload?.endTimestampMillis,
+		data?.payload?.startTimestampMillis,
+		firstSpanAtFetchLevel,
+		flamegraphState,
+		spans,
+		traceId,
+		handleSpanClick,
+	]);
+
+	return <>{content}</>;
+}
+
+export default TraceFlamegraph;

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/__tests__/drawUtils.test.ts

@@ -0,0 +1,525 @@
+import { DASHED_BORDER_LINE_DASH, MIN_WIDTH_FOR_NAME } from '../constants';
+import type { FlamegraphRowMetrics } from '../utils';
+import { getFlamegraphRowMetrics } from '../utils';
+import { drawEventDot, drawSpanBar } from '../utils';
+import { MOCK_SPAN } from './testUtils';
+
+jest.mock('container/TraceDetail/utils', () => ({
+	convertTimeToRelevantUnit: (): { time: number; timeUnitName: string } => ({
+		time: 50,
+		timeUnitName: 'ms',
+	}),
+}));
+
+/** Minimal 2D context for createStripePattern's internal canvas (jsdom getContext often returns null) */
+const mockPatternCanvasCtx = {
+	beginPath: jest.fn(),
+	moveTo: jest.fn(),
+	lineTo: jest.fn(),
+	stroke: jest.fn(),
+	globalAlpha: 1,
+};
+
+const originalCreateElement = document.createElement.bind(document);
+document.createElement = function (
+	tagName: string,
+): ReturnType<typeof originalCreateElement> {
+	const el = originalCreateElement(tagName);
+	if (tagName.toLowerCase() === 'canvas') {
+		(el as HTMLCanvasElement).getContext = (() =>
+			mockPatternCanvasCtx as unknown) as HTMLCanvasElement['getContext'];
+	}
+	return el;
+};
+
+function createMockCtx(): jest.Mocked<CanvasRenderingContext2D> {
+	return ({
+		beginPath: jest.fn(),
+		roundRect: jest.fn(),
+		fill: jest.fn(),
+		stroke: jest.fn(),
+		save: jest.fn(),
+		restore: jest.fn(),
+		translate: jest.fn(),
+		rotate: jest.fn(),
+		fillRect: jest.fn(),
+		strokeRect: jest.fn(),
+		setLineDash: jest.fn(),
+		measureText: jest.fn(
+			(text: string) => ({ width: text.length * 6 } as TextMetrics),
+		),
+		createPattern: jest.fn(() => ({} as CanvasPattern)),
+		clip: jest.fn(),
+		rect: jest.fn(),
+		fillText: jest.fn(),
+		font: '',
+		fillStyle: '',
+		strokeStyle: '',
+		textAlign: '',
+		textBaseline: '',
+		lineWidth: 0,
+		globalAlpha: 1,
+	} as unknown) as jest.Mocked<CanvasRenderingContext2D>;
+}
+
+const METRICS: FlamegraphRowMetrics = getFlamegraphRowMetrics(24);
+
+describe('Canvas Draw Utils', () => {
+	describe('drawSpanBar', () => {
+		it('draws rect + fill for normal span (no selected/hovered)', () => {
+			const ctx = createMockCtx();
+			const spanRectsArray: {
+				span: typeof MOCK_SPAN;
+				x: number;
+				y: number;
+				width: number;
+				height: number;
+				level: number;
+			}[] = [];
+
+			drawSpanBar({
+				ctx,
+				span: { ...MOCK_SPAN, event: [] },
+				x: 10,
+				y: 0,
+				width: 100,
+				levelIndex: 0,
+				spanRectsArray,
+				color: '#1890ff',
+				isDarkMode: false,
+				metrics: METRICS,
+			});
+
+			expect(ctx.beginPath).toHaveBeenCalled();
+			expect(ctx.roundRect).toHaveBeenCalledWith(10, 1, 100, 22, 2);
+			expect(ctx.fill).toHaveBeenCalled();
+			expect(ctx.stroke).not.toHaveBeenCalled();
+			expect(spanRectsArray).toHaveLength(1);
+			expect(spanRectsArray[0]).toMatchObject({
+				x: 10,
+				y: 1,
+				width: 100,
+				height: 22,
+				level: 0,
+			});
+		});
+
+		it('uses stripe pattern + dashed stroke + 2px when selected', () => {
+			const ctx = createMockCtx();
+			const spanRectsArray: {
+				span: typeof MOCK_SPAN;
+				x: number;
+				y: number;
+				width: number;
+				height: number;
+				level: number;
+			}[] = [];
+
+			drawSpanBar({
+				ctx,
+				span: { ...MOCK_SPAN, spanId: 'sel', event: [] },
+				x: 20,
+				y: 0,
+				width: 80,
+				levelIndex: 1,
+				spanRectsArray,
+				color: '#2F80ED',
+				isDarkMode: false,
+				metrics: METRICS,
+				selectedSpanId: 'sel',
+			});
+
+			expect(ctx.createPattern).toHaveBeenCalled();
+			expect(ctx.setLineDash).toHaveBeenCalledWith(DASHED_BORDER_LINE_DASH);
+			expect(ctx.strokeStyle).toBe('#2F80ED');
+			expect(ctx.lineWidth).toBe(2);
+			expect(ctx.stroke).toHaveBeenCalled();
+			expect(ctx.setLineDash).toHaveBeenLastCalledWith([]);
+		});
+
+		it('uses stripe pattern + solid stroke + 1px when hovered (not selected)', () => {
+			const ctx = createMockCtx();
+			const spanRectsArray: {
+				span: typeof MOCK_SPAN;
+				x: number;
+				y: number;
+				width: number;
+				height: number;
+				level: number;
+			}[] = [];
+
+			drawSpanBar({
+				ctx,
+				span: { ...MOCK_SPAN, spanId: 'hov', event: [] },
+				x: 30,
+				y: 0,
+				width: 60,
+				levelIndex: 0,
+				spanRectsArray,
+				color: '#2F80ED',
+				isDarkMode: false,
+				metrics: METRICS,
+				hoveredSpanId: 'hov',
+			});
+
+			expect(ctx.createPattern).toHaveBeenCalled();
+			expect(ctx.setLineDash).not.toHaveBeenCalled();
+			expect(ctx.lineWidth).toBe(1);
+			expect(ctx.stroke).toHaveBeenCalled();
+		});
+
+		it('pushes spanRectsArray with correct dimensions', () => {
+			const ctx = createMockCtx();
+			const spanRectsArray: {
+				span: typeof MOCK_SPAN;
+				x: number;
+				y: number;
+				width: number;
+				height: number;
+				level: number;
+			}[] = [];
+
+			drawSpanBar({
+				ctx,
+				span: { ...MOCK_SPAN, spanId: 'rect-test', event: [] },
+				x: 5,
+				y: 24,
+				width: 200,
+				levelIndex: 2,
+				spanRectsArray,
+				color: '#000',
+				isDarkMode: false,
+				metrics: METRICS,
+			});
+
+			expect(spanRectsArray[0]).toMatchObject({
+				x: 5,
+				y: 25,
+				width: 200,
+				height: 22,
+				level: 2,
+			});
+			expect(spanRectsArray[0].span.spanId).toBe('rect-test');
+		});
+	});
+
+	describe('drawSpanLabel (via drawSpanBar)', () => {
+		it('skips label when width < MIN_WIDTH_FOR_NAME', () => {
+			const ctx = createMockCtx();
+			const spanRectsArray: {
+				span: typeof MOCK_SPAN;
+				x: number;
+				y: number;
+				width: number;
+				height: number;
+				level: number;
+			}[] = [];
+
+			drawSpanBar({
+				ctx,
+				span: { ...MOCK_SPAN, name: 'long-span-name', event: [] },
+				x: 0,
+				y: 0,
+				width: MIN_WIDTH_FOR_NAME - 1,
+				levelIndex: 0,
+				spanRectsArray,
+				color: '#000',
+				isDarkMode: false,
+				metrics: METRICS,
+			});
+
+			expect(ctx.clip).not.toHaveBeenCalled();
+			expect(ctx.fillText).not.toHaveBeenCalled();
+		});
+
+		it('draws name only when width >= MIN_WIDTH_FOR_NAME but < MIN_WIDTH_FOR_NAME_AND_DURATION', () => {
+			const ctx = createMockCtx();
+			ctx.measureText = jest.fn(
+				(t: string) => ({ width: t.length * 6 } as TextMetrics),
+			);
+
+			drawSpanBar({
+				ctx,
+				span: { ...MOCK_SPAN, name: 'foo', event: [] },
+				x: 0,
+				y: 0,
+				width: 50,
+				levelIndex: 0,
+				spanRectsArray: [],
+				color: '#000',
+				isDarkMode: false,
+				metrics: METRICS,
+			});
+
+			expect(ctx.clip).toHaveBeenCalled();
+			expect(ctx.fillText).toHaveBeenCalled();
+			expect(ctx.textAlign).toBe('left');
+		});
+
+		it('draws name + duration when width >= MIN_WIDTH_FOR_NAME_AND_DURATION', () => {
+			const ctx = createMockCtx();
+			ctx.measureText = jest.fn(
+				(t: string) => ({ width: t.length * 6 } as TextMetrics),
+			);
+
+			drawSpanBar({
+				ctx,
+				span: { ...MOCK_SPAN, name: 'my-span', event: [] },
+				x: 0,
+				y: 0,
+				width: 100,
+				levelIndex: 0,
+				spanRectsArray: [],
+				color: '#000',
+				isDarkMode: false,
+				metrics: METRICS,
+			});
+
+			expect(ctx.fillText).toHaveBeenCalledTimes(2);
+			expect(ctx.fillText).toHaveBeenCalledWith(
+				'50ms',
+				expect.any(Number),
+				expect.any(Number),
+			);
+			expect(ctx.fillText).toHaveBeenCalledWith(
+				'my-span',
+				expect.any(Number),
+				expect.any(Number),
+			);
+		});
+	});
+
+	describe('truncateText (via drawSpanBar)', () => {
+		it('uses full text when it fits', () => {
+			const ctx = createMockCtx();
+			ctx.measureText = jest.fn(
+				(t: string) => ({ width: t.length * 4 } as TextMetrics),
+			);
+
+			drawSpanBar({
+				ctx,
+				span: { ...MOCK_SPAN, name: 'short', event: [] },
+				x: 0,
+				y: 0,
+				width: 100,
+				levelIndex: 0,
+				spanRectsArray: [],
+				color: '#000',
+				isDarkMode: false,
+				metrics: METRICS,
+			});
+
+			expect(ctx.fillText).toHaveBeenCalledWith(
+				'short',
+				expect.any(Number),
+				expect.any(Number),
+			);
+		});
+
+		it('truncates text when it exceeds available width', () => {
+			const ctx = createMockCtx();
+			ctx.measureText = jest.fn(
+				(t: string) =>
+					({
+						width: t.includes('...') ? 24 : t.length * 10,
+					} as TextMetrics),
+			);
+
+			drawSpanBar({
+				ctx,
+				span: { ...MOCK_SPAN, name: 'very-long-span-name', event: [] },
+				x: 0,
+				y: 0,
+				width: 50,
+				levelIndex: 0,
+				spanRectsArray: [],
+				color: '#000',
+				isDarkMode: false,
+				metrics: METRICS,
+			});
+
+			const fillTextCalls = (ctx.fillText as jest.Mock).mock.calls;
+			const nameArg = fillTextCalls.find((c) => c[0] !== '50ms')?.[0];
+			expect(nameArg).toBeDefined();
+			expect(nameArg).toMatch(/\.\.\.$/);
+		});
+	});
+
+	describe('drawEventDot', () => {
+		it('uses error styling when isError is true', () => {
+			const ctx = createMockCtx();
+
+			drawEventDot({
+				ctx,
+				x: 50,
+				y: 11,
+				isError: true,
+				isDarkMode: false,
+				eventDotSize: 6,
+			});
+
+			expect(ctx.save).toHaveBeenCalled();
+			expect(ctx.translate).toHaveBeenCalledWith(50, 11);
+			expect(ctx.rotate).toHaveBeenCalledWith(Math.PI / 4);
+			expect(ctx.fillStyle).toBe('rgb(220, 38, 38)');
+			expect(ctx.strokeStyle).toBe('rgb(153, 27, 27)');
+			expect(ctx.fillRect).toHaveBeenCalledWith(-3, -3, 6, 6);
+			expect(ctx.strokeRect).toHaveBeenCalledWith(-3, -3, 6, 6);
+			expect(ctx.restore).toHaveBeenCalled();
+		});
+
+		it('uses normal styling when isError is false', () => {
+			const ctx = createMockCtx();
+
+			drawEventDot({
+				ctx,
+				x: 0,
+				y: 0,
+				isError: false,
+				isDarkMode: false,
+				eventDotSize: 6,
+			});
+
+			expect(ctx.fillStyle).toBe('rgb(6, 182, 212)');
+			expect(ctx.strokeStyle).toBe('rgb(8, 145, 178)');
+		});
+
+		it('uses dark mode colors for error', () => {
+			const ctx = createMockCtx();
+
+			drawEventDot({
+				ctx,
+				x: 0,
+				y: 0,
+				isError: true,
+				isDarkMode: true,
+				eventDotSize: 6,
+			});
+
+			expect(ctx.fillStyle).toBe('rgb(239, 68, 68)');
+			expect(ctx.strokeStyle).toBe('rgb(185, 28, 28)');
+		});
+
+		it('uses dark mode colors for non-error', () => {
+			const ctx = createMockCtx();
+
+			drawEventDot({
+				ctx,
+				x: 0,
+				y: 0,
+				isError: false,
+				isDarkMode: true,
+				eventDotSize: 6,
+			});
+
+			expect(ctx.fillStyle).toBe('rgb(14, 165, 233)');
+			expect(ctx.strokeStyle).toBe('rgb(2, 132, 199)');
+		});
+
+		it('calls save, translate, rotate, restore', () => {
+			const ctx = createMockCtx();
+
+			drawEventDot({
+				ctx,
+				x: 10,
+				y: 20,
+				isError: false,
+				isDarkMode: false,
+				eventDotSize: 4,
+			});
+
+			expect(ctx.save).toHaveBeenCalled();
+			expect(ctx.translate).toHaveBeenCalledWith(10, 20);
+			expect(ctx.rotate).toHaveBeenCalledWith(Math.PI / 4);
+			expect(ctx.restore).toHaveBeenCalled();
+		});
+	});
+
+	describe('createStripePattern (via drawSpanBar)', () => {
+		it('uses pattern when createPattern returns non-null', () => {
+			const ctx = createMockCtx();
+			const mockPattern = {} as CanvasPattern;
+			(ctx.createPattern as jest.Mock).mockReturnValue(mockPattern);
+
+			drawSpanBar({
+				ctx,
+				span: { ...MOCK_SPAN, spanId: 'p', event: [] },
+				x: 0,
+				y: 0,
+				width: MIN_WIDTH_FOR_NAME - 1,
+				levelIndex: 0,
+				spanRectsArray: [],
+				color: '#000',
+				isDarkMode: false,
+				metrics: METRICS,
+				hoveredSpanId: 'p',
+			});
+
+			expect(ctx.createPattern).toHaveBeenCalled();
+			expect(ctx.fillStyle).toBe(mockPattern);
+			expect(ctx.fill).toHaveBeenCalled();
+		});
+
+		it('skips fill when createPattern returns null', () => {
+			const ctx = createMockCtx();
+			(ctx.createPattern as jest.Mock).mockReturnValue(null);
+
+			drawSpanBar({
+				ctx,
+				span: { ...MOCK_SPAN, spanId: 'p', event: [] },
+				x: 0,
+				y: 0,
+				width: MIN_WIDTH_FOR_NAME - 1,
+				levelIndex: 0,
+				spanRectsArray: [],
+				color: '#000',
+				isDarkMode: false,
+				metrics: METRICS,
+				selectedSpanId: 'p',
+			});
+
+			expect(ctx.fill).not.toHaveBeenCalled();
+			expect(ctx.stroke).toHaveBeenCalled();
+		});
+	});
+
+	describe('drawSpanBar with events', () => {
+		it('draws event dots for each span event', () => {
+			const ctx = createMockCtx();
+			const spanWithEvents = {
+				...MOCK_SPAN,
+				event: [
+					{
+						name: 'e1',
+						timeUnixNano: 1_010_000_000,
+						attributeMap: {},
+						isError: false,
+					},
+					{
+						name: 'e2',
+						timeUnixNano: 1_025_000_000,
+						attributeMap: {},
+						isError: true,
+					},
+				],
+			};
+
+			drawSpanBar({
+				ctx,
+				span: spanWithEvents,
+				x: 0,
+				y: 0,
+				width: 100,
+				levelIndex: 0,
+				spanRectsArray: [],
+				color: '#000',
+				isDarkMode: false,
+				metrics: METRICS,
+			});
+
+			expect(ctx.save).toHaveBeenCalledTimes(3);
+			expect(ctx.translate).toHaveBeenCalledTimes(2);
+			expect(ctx.fillRect).toHaveBeenCalledTimes(2);
+		});
+	});
+});

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/__tests__/testUtils.ts

@@ -0,0 +1,54 @@
+import { FlamegraphSpan } from 'types/api/trace/getTraceFlamegraph';
+
+/** Minimal FlamegraphSpan for unit tests */
+export const MOCK_SPAN: FlamegraphSpan = {
+	timestamp: 1000,
+	durationNano: 50_000_000, // 50ms
+	spanId: 'span-1',
+	parentSpanId: '',
+	traceId: 'trace-1',
+	hasError: false,
+	serviceName: 'test-service',
+	name: 'test-span',
+	level: 0,
+	event: [],
+};
+
+/** Nested spans structure for findSpanById tests */
+export const MOCK_SPANS: FlamegraphSpan[][] = [
+	[
+		{
+			...MOCK_SPAN,
+			spanId: 'root',
+			parentSpanId: '',
+			level: 0,
+		},
+	],
+	[
+		{
+			...MOCK_SPAN,
+			spanId: 'child-a',
+			parentSpanId: 'root',
+			level: 1,
+		},
+		{
+			...MOCK_SPAN,
+			spanId: 'child-b',
+			parentSpanId: 'root',
+			level: 1,
+		},
+	],
+	[
+		{
+			...MOCK_SPAN,
+			spanId: 'grandchild',
+			parentSpanId: 'child-a',
+			level: 2,
+		},
+	],
+];
+
+export const MOCK_TRACE_METADATA = {
+	startTime: 0,
+	endTime: 1000,
+};

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/__tests__/useFlamegraphDrag.test.ts

@@ -0,0 +1,196 @@
+import React from 'react';
+import { act, renderHook } from '@testing-library/react';
+
+import { useFlamegraphDrag } from '../hooks/useFlamegraphDrag';
+import { MOCK_TRACE_METADATA } from './testUtils';
+
+function createMockCanvas(): HTMLCanvasElement {
+	const canvas = document.createElement('canvas');
+	canvas.getBoundingClientRect = jest.fn(
+		(): DOMRect =>
+			({
+				left: 0,
+				top: 0,
+				width: 800,
+				height: 400,
+				x: 0,
+				y: 0,
+				bottom: 400,
+				right: 800,
+				toJSON: (): Record<string, unknown> => ({}),
+			} as DOMRect),
+	);
+	return canvas;
+}
+
+function createMockContainer(): HTMLDivElement {
+	const div = document.createElement('div');
+	Object.defineProperty(div, 'clientHeight', { value: 400 });
+	return div;
+}
+
+const defaultArgs = {
+	canvasRef: { current: createMockCanvas() },
+	containerRef: { current: createMockContainer() },
+	traceMetadata: MOCK_TRACE_METADATA,
+	viewStartRef: { current: 0 },
+	viewEndRef: { current: 1000 },
+	setViewStartTs: jest.fn(),
+	setViewEndTs: jest.fn(),
+	scrollTopRef: { current: 0 },
+	setScrollTop: jest.fn(),
+	totalHeight: 1000,
+};
+
+describe('useFlamegraphDrag', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+		defaultArgs.viewStartRef.current = 0;
+		defaultArgs.viewEndRef.current = 1000;
+		defaultArgs.scrollTopRef.current = 0;
+	});
+
+	it('starts drag state on mousedown', () => {
+		const { result } = renderHook(() => useFlamegraphDrag(defaultArgs));
+
+		act(() => {
+			result.current.handleMouseDown(({
+				button: 0,
+				clientX: 100,
+				clientY: 50,
+				preventDefault: jest.fn(),
+			} as unknown) as React.MouseEvent);
+		});
+
+		expect(result.current.isDraggingRef.current).toBe(true);
+	});
+
+	it('ignores non-left button mousedown', () => {
+		const { result } = renderHook(() => useFlamegraphDrag(defaultArgs));
+
+		act(() => {
+			result.current.handleMouseDown(({
+				button: 1,
+				clientX: 100,
+				clientY: 50,
+				preventDefault: jest.fn(),
+			} as unknown) as React.MouseEvent);
+		});
+
+		expect(result.current.isDraggingRef.current).toBe(false);
+	});
+
+	it('updates pan/scroll on mousemove', () => {
+		const { result } = renderHook(() => useFlamegraphDrag(defaultArgs));
+
+		act(() => {
+			result.current.handleMouseDown(({
+				button: 0,
+				clientX: 100,
+				clientY: 50,
+				preventDefault: jest.fn(),
+			} as unknown) as React.MouseEvent);
+		});
+
+		act(() => {
+			result.current.handleMouseMove(({
+				clientX: 150,
+				clientY: 100,
+			} as unknown) as React.MouseEvent);
+		});
+
+		expect(defaultArgs.setViewStartTs).toHaveBeenCalled();
+		expect(defaultArgs.setViewEndTs).toHaveBeenCalled();
+		expect(defaultArgs.setScrollTop).toHaveBeenCalled();
+	});
+
+	it('does not set suppressClickRef when movement is below threshold', () => {
+		const { result } = renderHook(() => useFlamegraphDrag(defaultArgs));
+
+		act(() => {
+			result.current.handleMouseDown(({
+				button: 0,
+				clientX: 100,
+				clientY: 50,
+				preventDefault: jest.fn(),
+			} as unknown) as React.MouseEvent);
+		});
+
+		act(() => {
+			result.current.handleMouseMove(({
+				clientX: 102,
+				clientY: 51,
+			} as unknown) as React.MouseEvent);
+		});
+
+		act(() => {
+			result.current.handleMouseUp();
+		});
+
+		expect(result.current.suppressClickRef.current).toBe(false);
+	});
+
+	it('sets suppressClickRef when drag exceeds threshold', () => {
+		const { result } = renderHook(() => useFlamegraphDrag(defaultArgs));
+
+		act(() => {
+			result.current.handleMouseDown(({
+				button: 0,
+				clientX: 100,
+				clientY: 50,
+				preventDefault: jest.fn(),
+			} as unknown) as React.MouseEvent);
+		});
+
+		act(() => {
+			result.current.handleMouseMove(({
+				clientX: 150,
+				clientY: 100,
+			} as unknown) as React.MouseEvent);
+		});
+
+		act(() => {
+			result.current.handleMouseUp();
+		});
+
+		expect(result.current.suppressClickRef.current).toBe(true);
+	});
+
+	it('resets drag state on mouseup', () => {
+		const { result } = renderHook(() => useFlamegraphDrag(defaultArgs));
+
+		act(() => {
+			result.current.handleMouseDown(({
+				button: 0,
+				clientX: 100,
+				clientY: 50,
+				preventDefault: jest.fn(),
+			} as unknown) as React.MouseEvent);
+		});
+
+		act(() => {
+			result.current.handleMouseUp();
+		});
+
+		expect(result.current.isDraggingRef.current).toBe(false);
+	});
+
+	it('cancels drag on mouseleave', () => {
+		const { result } = renderHook(() => useFlamegraphDrag(defaultArgs));
+
+		act(() => {
+			result.current.handleMouseDown(({
+				button: 0,
+				clientX: 100,
+				clientY: 50,
+				preventDefault: jest.fn(),
+			} as unknown) as React.MouseEvent);
+		});
+
+		act(() => {
+			result.current.handleDragMouseLeave();
+		});
+
+		expect(result.current.isDraggingRef.current).toBe(false);
+	});
+});

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/__tests__/useFlamegraphHover.test.ts

@@ -0,0 +1,174 @@
+import type React from 'react';
+import { act, renderHook } from '@testing-library/react';
+
+import { useFlamegraphHover } from '../hooks/useFlamegraphHover';
+import type { SpanRect } from '../types';
+import { MOCK_SPAN, MOCK_TRACE_METADATA } from './testUtils';
+
+function createMockCanvas(): HTMLCanvasElement {
+	const canvas = document.createElement('canvas');
+	canvas.width = 800;
+	canvas.height = 400;
+	canvas.getBoundingClientRect = jest.fn(
+		(): DOMRect =>
+			({
+				left: 0,
+				top: 0,
+				width: 800,
+				height: 400,
+				x: 0,
+				y: 0,
+				bottom: 400,
+				right: 800,
+				toJSON: (): Record<string, unknown> => ({}),
+			} as DOMRect),
+	);
+	return canvas;
+}
+
+const spanRect: SpanRect = {
+	span: { ...MOCK_SPAN, spanId: 'hover-span', name: 'test-span' },
+	x: 100,
+	y: 50,
+	width: 200,
+	height: 22,
+	level: 0,
+};
+
+const defaultArgs = {
+	canvasRef: { current: createMockCanvas() },
+	spanRectsRef: { current: [spanRect] },
+	traceMetadata: MOCK_TRACE_METADATA,
+	viewStartTs: MOCK_TRACE_METADATA.startTime,
+	viewEndTs: MOCK_TRACE_METADATA.endTime,
+	isDraggingRef: { current: false },
+	suppressClickRef: { current: false },
+	onSpanClick: jest.fn(),
+	isDarkMode: false,
+};
+
+describe('useFlamegraphHover', () => {
+	beforeEach(() => {
+		Object.defineProperty(window, 'devicePixelRatio', {
+			configurable: true,
+			value: 1,
+		});
+		jest.clearAllMocks();
+		defaultArgs.spanRectsRef.current = [spanRect];
+		defaultArgs.isDraggingRef.current = false;
+		defaultArgs.suppressClickRef.current = false;
+	});
+
+	it('sets hoveredSpanId and tooltipContent when hovering on span', () => {
+		const { result } = renderHook(() => useFlamegraphHover(defaultArgs));
+
+		act(() => {
+			result.current.handleHoverMouseMove({
+				clientX: 150,
+				clientY: 61,
+			} as React.MouseEvent);
+		});
+
+		expect(result.current.hoveredSpanId).toBe('hover-span');
+		expect(result.current.tooltipContent).not.toBeNull();
+		expect(result.current.tooltipContent?.spanName).toBe('test-span');
+		expect(result.current.tooltipContent?.clientX).toBe(150);
+		expect(result.current.tooltipContent?.clientY).toBe(61);
+	});
+
+	it('clears hover when moving to empty area', () => {
+		const { result } = renderHook(() => useFlamegraphHover(defaultArgs));
+
+		act(() => {
+			result.current.handleHoverMouseMove({
+				clientX: 150,
+				clientY: 61,
+			} as React.MouseEvent);
+		});
+
+		expect(result.current.hoveredSpanId).toBe('hover-span');
+
+		act(() => {
+			result.current.handleHoverMouseMove({
+				clientX: 10,
+				clientY: 10,
+			} as React.MouseEvent);
+		});
+
+		expect(result.current.hoveredSpanId).toBeNull();
+		expect(result.current.tooltipContent).toBeNull();
+	});
+
+	it('clears hover on mouse leave', () => {
+		const { result } = renderHook(() => useFlamegraphHover(defaultArgs));
+
+		act(() => {
+			result.current.handleHoverMouseMove({
+				clientX: 150,
+				clientY: 61,
+			} as React.MouseEvent);
+		});
+
+		act(() => {
+			result.current.handleHoverMouseLeave();
+		});
+
+		expect(result.current.hoveredSpanId).toBeNull();
+		expect(result.current.tooltipContent).toBeNull();
+	});
+
+	it('suppresses click when suppressClickRef is set', () => {
+		const { result } = renderHook(() => useFlamegraphHover(defaultArgs));
+		defaultArgs.suppressClickRef.current = true;
+
+		act(() => {
+			result.current.handleClick({
+				clientX: 150,
+				clientY: 61,
+			} as React.MouseEvent);
+		});
+
+		expect(defaultArgs.onSpanClick).not.toHaveBeenCalled();
+	});
+
+	it('calls onSpanClick when clicking on span', () => {
+		const { result } = renderHook(() => useFlamegraphHover(defaultArgs));
+
+		act(() => {
+			result.current.handleClick({
+				clientX: 150,
+				clientY: 61,
+			} as React.MouseEvent);
+		});
+
+		expect(defaultArgs.onSpanClick).toHaveBeenCalledWith('hover-span');
+	});
+
+	it('uses clientX/clientY for tooltip positioning', () => {
+		const { result } = renderHook(() => useFlamegraphHover(defaultArgs));
+
+		act(() => {
+			result.current.handleHoverMouseMove({
+				clientX: 200,
+				clientY: 60,
+			} as React.MouseEvent);
+		});
+
+		expect(result.current.tooltipContent?.clientX).toBe(200);
+		expect(result.current.tooltipContent?.clientY).toBe(60);
+	});
+
+	it('does not update hover during drag', () => {
+		const { result } = renderHook(() => useFlamegraphHover(defaultArgs));
+		defaultArgs.isDraggingRef.current = true;
+
+		act(() => {
+			result.current.handleHoverMouseMove({
+				clientX: 150,
+				clientY: 61,
+			} as React.MouseEvent);
+		});
+
+		expect(result.current.hoveredSpanId).toBeNull();
+	});
+});

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/__tests__/useFlamegraphZoom.test.ts

@@ -0,0 +1,279 @@
+import { act, renderHook } from '@testing-library/react';
+
+import { DEFAULT_ROW_HEIGHT, MIN_VISIBLE_SPAN_MS } from '../constants';
+import { useFlamegraphZoom } from '../hooks/useFlamegraphZoom';
+import { MOCK_TRACE_METADATA } from './testUtils';
+
+function createMockCanvas(): HTMLCanvasElement {
+	const canvas = document.createElement('canvas');
+	canvas.width = 800;
+	canvas.height = 400;
+	canvas.getBoundingClientRect = jest.fn(
+		(): DOMRect =>
+			({
+				left: 0,
+				top: 0,
+				width: 800,
+				height: 400,
+				x: 0,
+				y: 0,
+				bottom: 400,
+				right: 800,
+				toJSON: (): Record<string, unknown> => ({}),
+			} as DOMRect),
+	);
+	return canvas;
+}
+
+describe('useFlamegraphZoom', () => {
+	const traceMetadata = { ...MOCK_TRACE_METADATA };
+
+	beforeEach(() => {
+		Object.defineProperty(window, 'devicePixelRatio', {
+			configurable: true,
+			value: 1,
+		});
+	});
+
+	it('handleResetZoom restores traceMetadata.startTime/endTime', () => {
+		const setViewStartTs = jest.fn();
+		const setViewEndTs = jest.fn();
+		const setRowHeight = jest.fn();
+		const viewStartRef = { current: 100 };
+		const viewEndRef = { current: 500 };
+		const rowHeightRef = { current: 30 };
+		const canvasRef = { current: createMockCanvas() };
+
+		const { result } = renderHook(() =>
+			useFlamegraphZoom({
+				canvasRef,
+				traceMetadata,
+				viewStartRef,
+				viewEndRef,
+				rowHeightRef,
+				setViewStartTs,
+				setViewEndTs,
+				setRowHeight,
+			}),
+		);
+
+		act(() => {
+			result.current.handleResetZoom();
+		});
+
+		expect(setViewStartTs).toHaveBeenCalledWith(traceMetadata.startTime);
+		expect(setViewEndTs).toHaveBeenCalledWith(traceMetadata.endTime);
+		expect(setRowHeight).toHaveBeenCalledWith(DEFAULT_ROW_HEIGHT);
+		expect(viewStartRef.current).toBe(traceMetadata.startTime);
+		expect(viewEndRef.current).toBe(traceMetadata.endTime);
+		expect(rowHeightRef.current).toBe(DEFAULT_ROW_HEIGHT);
+	});
+
+	it('wheel zoom in decreases visible time range', async () => {
+		const setViewStartTs = jest.fn();
+		const setViewEndTs = jest.fn();
+		const setRowHeight = jest.fn();
+		const viewStartRef = { current: traceMetadata.startTime };
+		const viewEndRef = { current: traceMetadata.endTime };
+		const rowHeightRef = { current: DEFAULT_ROW_HEIGHT };
+		const canvas = createMockCanvas();
+		const canvasRef = { current: canvas };
+
+		renderHook(() =>
+			useFlamegraphZoom({
+				canvasRef,
+				traceMetadata,
+				viewStartRef,
+				viewEndRef,
+				rowHeightRef,
+				setViewStartTs,
+				setViewEndTs,
+				setRowHeight,
+			}),
+		);
+
+		const initialSpan = viewEndRef.current - viewStartRef.current;
+
+		await act(async () => {
+			canvas.dispatchEvent(
+				new WheelEvent('wheel', {
+					clientX: 400,
+					deltaY: -100,
+					bubbles: true,
+				}),
+			);
+		});
+
+		await act(async () => {
+			await new Promise((r) => requestAnimationFrame(r));
+		});
+
+		expect(setViewStartTs).toHaveBeenCalled();
+		expect(setViewEndTs).toHaveBeenCalled();
+		const [newStart] = setViewStartTs.mock.calls[0] ?? [];
+		const [newEnd] = setViewEndTs.mock.calls[0] ?? [];
+		if (newStart != null && newEnd != null) {
+			const newSpan = newEnd - newStart;
+			expect(newSpan).toBeLessThan(initialSpan);
+		}
+	});
+
+	it('wheel zoom out increases visible time range', async () => {
+		const setViewStartTs = jest.fn();
+		const setViewEndTs = jest.fn();
+		const setRowHeight = jest.fn();
+		const halfSpan = (traceMetadata.endTime - traceMetadata.startTime) / 2;
+		const viewStartRef = { current: traceMetadata.startTime + halfSpan * 0.25 };
+		const viewEndRef = { current: traceMetadata.startTime + halfSpan * 0.75 };
+		const rowHeightRef = { current: DEFAULT_ROW_HEIGHT };
+		const canvas = createMockCanvas();
+		const canvasRef = { current: canvas };
+
+		renderHook(() =>
+			useFlamegraphZoom({
+				canvasRef,
+				traceMetadata,
+				viewStartRef,
+				viewEndRef,
+				rowHeightRef,
+				setViewStartTs,
+				setViewEndTs,
+				setRowHeight,
+			}),
+		);
+
+		const initialSpan = viewEndRef.current - viewStartRef.current;
+
+		await act(async () => {
+			canvas.dispatchEvent(
+				new WheelEvent('wheel', {
+					clientX: 400,
+					deltaY: 100,
+					bubbles: true,
+				}),
+			);
+		});
+
+		await act(async () => {
+			await new Promise((r) => requestAnimationFrame(r));
+		});
+
+		expect(setViewStartTs).toHaveBeenCalled();
+		expect(setViewEndTs).toHaveBeenCalled();
+		const [newStart] = setViewStartTs.mock.calls[0] ?? [];
+		const [newEnd] = setViewEndTs.mock.calls[0] ?? [];
+		if (newStart != null && newEnd != null) {
+			const newSpan = newEnd - newStart;
+			expect(newSpan).toBeGreaterThanOrEqual(initialSpan);
+		}
+	});
+
+	it('clamps zoom to MIN_VISIBLE_SPAN_MS', async () => {
+		const setViewStartTs = jest.fn();
+		const setViewEndTs = jest.fn();
+		const setRowHeight = jest.fn();
+		const viewStartRef = { current: traceMetadata.startTime };
+		const viewEndRef = { current: traceMetadata.startTime + 100 };
+		const rowHeightRef = { current: DEFAULT_ROW_HEIGHT };
+		const canvas = createMockCanvas();
+		const canvasRef = { current: canvas };
+
+		renderHook(() =>
+			useFlamegraphZoom({
+				canvasRef,
+				traceMetadata,
+				viewStartRef,
+				viewEndRef,
+				rowHeightRef,
+				setViewStartTs,
+				setViewEndTs,
+				setRowHeight,
+			}),
+		);
+
+		await act(async () => {
+			canvas.dispatchEvent(
+				new WheelEvent('wheel', {
+					clientX: 400,
+					deltaY: 10000,
+					bubbles: true,
+				}),
+			);
+		});
+
+		await act(async () => {
+			await new Promise((r) => requestAnimationFrame(r));
+		});
+
+		const [newStart] = setViewStartTs.mock.calls[0] ?? [];
+		const [newEnd] = setViewEndTs.mock.calls[0] ?? [];
+		if (newStart != null && newEnd != null) {
+			const newSpan = newEnd - newStart;
+			expect(newSpan).toBeGreaterThanOrEqual(MIN_VISIBLE_SPAN_MS);
+		}
+	});
+
+	it('clamps viewStart/viewEnd to trace bounds', async () => {
+		const setViewStartTs = jest.fn();
+		const setViewEndTs = jest.fn();
+		const setRowHeight = jest.fn();
+		const viewStartRef = { current: traceMetadata.startTime };
+		const viewEndRef = { current: traceMetadata.endTime };
+		const rowHeightRef = { current: DEFAULT_ROW_HEIGHT };
+		const canvas = createMockCanvas();
+		const canvasRef = { current: canvas };
+
+		renderHook(() =>
+			useFlamegraphZoom({
+				canvasRef,
+				traceMetadata,
+				viewStartRef,
+				viewEndRef,
+				rowHeightRef,
+				setViewStartTs,
+				setViewEndTs,
+				setRowHeight,
+			}),
+		);
+
+		await act(async () => {
+			canvas.dispatchEvent(
+				new WheelEvent('wheel', {
+					clientX: 400,
+					deltaY: -5000,
+					bubbles: true,
+				}),
+			);
+		});
+
+		await act(async () => {
+			await new Promise((r) => requestAnimationFrame(r));
+		});
+
+		const [newStart] = setViewStartTs.mock.calls[0] ?? [];
+		const [newEnd] = setViewEndTs.mock.calls[0] ?? [];
+		if (newStart != null && newEnd != null) {
+			expect(newStart).toBeGreaterThanOrEqual(traceMetadata.startTime);
+			expect(newEnd).toBeLessThanOrEqual(traceMetadata.endTime);
+		}
+	});
+
+	it('returns isOverFlamegraphRef', () => {
+		const canvasRef = { current: createMockCanvas() };
+		const { result } = renderHook(() =>
+			useFlamegraphZoom({
+				canvasRef,
+				traceMetadata,
+				viewStartRef: { current: 0 },
+				viewEndRef: { current: 1000 },
+				rowHeightRef: { current: 24 },
+				setViewStartTs: jest.fn(),
+				setViewEndTs: jest.fn(),
+				setRowHeight: jest.fn(),
+			}),
+		);
+
+		expect(result.current.isOverFlamegraphRef).toBeDefined();
+		expect(result.current.isOverFlamegraphRef.current).toBe(false);
+	});
+});

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/__tests__/useScrollToSpan.test.tsx

@@ -0,0 +1,212 @@
+import type { Dispatch, SetStateAction } from 'react';
+import { useRef } from 'react';
+import { act, render, waitFor } from '@testing-library/react';
+
+import { useScrollToSpan } from '../hooks/useScrollToSpan';
+import { MOCK_SPANS, MOCK_TRACE_METADATA } from './testUtils';
+
+function TestWrapper({
+	firstSpanAtFetchLevel,
+	spans,
+	traceMetadata,
+	setViewStartTs,
+	setViewEndTs,
+	setScrollTop,
+}: {
+	firstSpanAtFetchLevel: string;
+	spans: typeof MOCK_SPANS;
+	traceMetadata: typeof MOCK_TRACE_METADATA;
+	setViewStartTs: Dispatch<SetStateAction<number>>;
+	setViewEndTs: Dispatch<SetStateAction<number>>;
+	setScrollTop: Dispatch<SetStateAction<number>>;
+}): JSX.Element {
+	const containerRef = useRef<HTMLDivElement>(null);
+	const viewStartRef = useRef(traceMetadata.startTime);
+	const viewEndRef = useRef(traceMetadata.endTime);
+	const scrollTopRef = useRef(0);
+
+	useScrollToSpan({
+		firstSpanAtFetchLevel,
+		spans,
+		traceMetadata,
+		containerRef,
+		viewStartRef,
+		viewEndRef,
+		scrollTopRef,
+		rowHeight: 24,
+		setViewStartTs,
+		setViewEndTs,
+		setScrollTop,
+	});
+
+	return <div ref={containerRef} data-testid="container" />;
+}
+
+describe('useScrollToSpan', () => {
+	beforeEach(() => {
+		Object.defineProperty(HTMLElement.prototype, 'clientHeight', {
+			configurable: true,
+			value: 400,
+		});
+	});
+
+	it('does not update when firstSpanAtFetchLevel is empty', async () => {
+		const setViewStartTs = jest.fn();
+		const setViewEndTs = jest.fn();
+		const setScrollTop = jest.fn();
+
+		render(
+			<TestWrapper
+				firstSpanAtFetchLevel=""
+				spans={MOCK_SPANS}
+				traceMetadata={MOCK_TRACE_METADATA}
+				setViewStartTs={setViewStartTs}
+				setViewEndTs={setViewEndTs}
+				setScrollTop={setScrollTop}
+			/>,
+		);
+
+		await waitFor(() => {
+			expect(setViewStartTs).not.toHaveBeenCalled();
+			expect(setViewEndTs).not.toHaveBeenCalled();
+			expect(setScrollTop).not.toHaveBeenCalled();
+		});
+	});
+
+	it('does not update when spans are empty', async () => {
+		const setViewStartTs = jest.fn();
+		const setViewEndTs = jest.fn();
+		const setScrollTop = jest.fn();
+
+		render(
+			<TestWrapper
+				firstSpanAtFetchLevel="root"
+				spans={[]}
+				traceMetadata={MOCK_TRACE_METADATA}
+				setViewStartTs={setViewStartTs}
+				setViewEndTs={setViewEndTs}
+				setScrollTop={setScrollTop}
+			/>,
+		);
+
+		await waitFor(() => {
+			expect(setViewStartTs).not.toHaveBeenCalled();
+			expect(setViewEndTs).not.toHaveBeenCalled();
+			expect(setScrollTop).not.toHaveBeenCalled();
+		});
+	});
+
+	it('does not update when target span not found', async () => {
+		const setViewStartTs = jest.fn();
+		const setViewEndTs = jest.fn();
+		const setScrollTop = jest.fn();
+
+		render(
+			<TestWrapper
+				firstSpanAtFetchLevel="nonexistent"
+				spans={MOCK_SPANS}
+				traceMetadata={MOCK_TRACE_METADATA}
+				setViewStartTs={setViewStartTs}
+				setViewEndTs={setViewEndTs}
+				setScrollTop={setScrollTop}
+			/>,
+		);
+
+		await waitFor(() => {
+			expect(setViewStartTs).not.toHaveBeenCalled();
+			expect(setViewEndTs).not.toHaveBeenCalled();
+			expect(setScrollTop).not.toHaveBeenCalled();
+		});
+	});
+
+	it('calls setters when target span found', async () => {
+		const setViewStartTs = jest.fn();
+		const setViewEndTs = jest.fn();
+		const setScrollTop = jest.fn();
+
+		const { getByTestId } = render(
+			<TestWrapper
+				firstSpanAtFetchLevel="grandchild"
+				spans={MOCK_SPANS}
+				traceMetadata={MOCK_TRACE_METADATA}
+				setViewStartTs={setViewStartTs}
+				setViewEndTs={setViewEndTs}
+				setScrollTop={setScrollTop}
+			/>,
+		);
+
+		expect(getByTestId('container')).toBeInTheDocument();
+
+		await waitFor(() => {
+			expect(setViewStartTs).toHaveBeenCalled();
+			expect(setViewEndTs).toHaveBeenCalled();
+			expect(setScrollTop).toHaveBeenCalled();
+		});
+
+		const [viewStart] = setViewStartTs.mock.calls[0];
+		const [viewEnd] = setViewEndTs.mock.calls[0];
+		const [scrollTop] = setScrollTop.mock.calls[0];
+
+		expect(viewEnd - viewStart).toBeGreaterThan(0);
+		expect(viewStart).toBeGreaterThanOrEqual(MOCK_TRACE_METADATA.startTime);
+		expect(viewEnd).toBeLessThanOrEqual(MOCK_TRACE_METADATA.endTime);
+		expect(scrollTop).toBeGreaterThanOrEqual(0);
+	});
+
+	it('centers span vertically (scrollTop centers span row)', async () => {
+		const setScrollTop = jest.fn();
+
+		await act(async () => {
+			render(
+				<TestWrapper
+					firstSpanAtFetchLevel="grandchild"
+					spans={MOCK_SPANS}
+					traceMetadata={MOCK_TRACE_METADATA}
+					setViewStartTs={jest.fn()}
+					setViewEndTs={jest.fn()}
+					setScrollTop={setScrollTop}
+				/>,
+			);
+		});
+
+		await waitFor(() => expect(setScrollTop).toHaveBeenCalled());
+
+		const [scrollTop] = setScrollTop.mock.calls[0];
+		const levelIndex = 2;
+		const rowHeight = 24;
+		const viewportHeight = 400;
+		const expectedCenter =
+			levelIndex * rowHeight - viewportHeight / 2 + rowHeight / 2;
+		expect(scrollTop).toBeCloseTo(Math.max(0, expectedCenter), -1);
+	});
+
+	it('zooms horizontally to span with 2x duration padding', async () => {
+		const setViewStartTs = jest.fn();
+		const setViewEndTs = jest.fn();
+
+		await act(async () => {
+			render(
+				<TestWrapper
+					firstSpanAtFetchLevel="root"
+					spans={MOCK_SPANS}
+					traceMetadata={MOCK_TRACE_METADATA}
+					setViewStartTs={setViewStartTs}
+					setViewEndTs={setViewEndTs}
+					setScrollTop={jest.fn()}
+				/>,
+			);
+		});
+
+		await waitFor(() => {
+			expect(setViewStartTs).toHaveBeenCalled();
+			expect(setViewEndTs).toHaveBeenCalled();
+		});
+
+		const [viewStart] = setViewStartTs.mock.calls[0];
+		const [viewEnd] = setViewEndTs.mock.calls[0];
+		const visibleWindow = viewEnd - viewStart;
+		const rootSpan = MOCK_SPANS[0][0];
+		const spanDurationMs = rootSpan.durationNano / 1e6;
+		expect(visibleWindow).toBeGreaterThanOrEqual(Math.max(spanDurationMs * 2, 5));
+	});
+});

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/__tests__/utils.math.test.ts

@@ -0,0 +1,135 @@
+import {
+	clamp,
+	findSpanById,
+	formatDuration,
+	getFlamegraphRowMetrics,
+} from '../utils';
+import { MOCK_SPANS } from './testUtils';
+
+jest.mock('container/TraceDetail/utils', () => ({
+	convertTimeToRelevantUnit: (
+		valueMs: number,
+	): { time: number; timeUnitName: string } => {
+		if (valueMs === 0) {
+			return { time: 0, timeUnitName: 'ms' };
+		}
+		if (valueMs < 1) {
+			return { time: valueMs, timeUnitName: 'ms' };
+		}
+		if (valueMs < 1000) {
+			return { time: valueMs, timeUnitName: 'ms' };
+		}
+		if (valueMs < 60_000) {
+			return { time: valueMs / 1000, timeUnitName: 's' };
+		}
+		if (valueMs < 3_600_000) {
+			return { time: valueMs / 60_000, timeUnitName: 'm' };
+		}
+		return { time: valueMs / 3_600_000, timeUnitName: 'hr' };
+	},
+}));
+
+describe('Pure Math and Data Utils', () => {
+	describe('clamp', () => {
+		it('returns value when within range', () => {
+			expect(clamp(5, 0, 10)).toBe(5);
+			expect(clamp(-3, -5, 5)).toBe(-3);
+		});
+
+		it('returns min when value is below min', () => {
+			expect(clamp(-1, 0, 10)).toBe(0);
+			expect(clamp(2, 5, 10)).toBe(5);
+		});
+
+		it('returns max when value is above max', () => {
+			expect(clamp(11, 0, 10)).toBe(10);
+			expect(clamp(100, 0, 50)).toBe(50);
+		});
+
+		it('handles min === max', () => {
+			expect(clamp(5, 7, 7)).toBe(7);
+			expect(clamp(7, 7, 7)).toBe(7);
+		});
+	});
+
+	describe('findSpanById', () => {
+		it('finds span in first level', () => {
+			const result = findSpanById(MOCK_SPANS, 'root');
+			expect(result).not.toBeNull();
+			expect(result?.span.spanId).toBe('root');
+			expect(result?.levelIndex).toBe(0);
+		});
+
+		it('finds span in nested level', () => {
+			const result = findSpanById(MOCK_SPANS, 'grandchild');
+			expect(result).not.toBeNull();
+			expect(result?.span.spanId).toBe('grandchild');
+			expect(result?.levelIndex).toBe(2);
+		});
+
+		it('returns null when span not found', () => {
+			expect(findSpanById(MOCK_SPANS, 'nonexistent')).toBeNull();
+		});
+
+		it('handles empty spans', () => {
+			expect(findSpanById([], 'root')).toBeNull();
+			expect(findSpanById([[], []], 'root')).toBeNull();
+		});
+	});
+
+	describe('getFlamegraphRowMetrics', () => {
+		it('computes normal row height metrics (24px)', () => {
+			const m = getFlamegraphRowMetrics(24);
+			expect(m.ROW_HEIGHT).toBe(24);
+			expect(m.SPAN_BAR_HEIGHT).toBe(22);
+			expect(m.SPAN_BAR_Y_OFFSET).toBe(1);
+			expect(m.EVENT_DOT_SIZE).toBe(6);
+		});
+
+		it('clamps span bar height to max for large row heights', () => {
+			const m = getFlamegraphRowMetrics(100);
+			expect(m.SPAN_BAR_HEIGHT).toBe(22);
+			expect(m.SPAN_BAR_Y_OFFSET).toBe(39);
+		});
+
+		it('clamps span bar height to min for small row heights', () => {
+			const m = getFlamegraphRowMetrics(6);
+			expect(m.SPAN_BAR_HEIGHT).toBe(8);
+			// spanBarYOffset = floor((6-8)/2) = -1 when bar exceeds row height
+			expect(m.SPAN_BAR_Y_OFFSET).toBe(-1);
+		});
+
+		it('clamps event dot size within min/max', () => {
+			const mSmall = getFlamegraphRowMetrics(6);
+			expect(mSmall.EVENT_DOT_SIZE).toBe(4);
+
+			const mLarge = getFlamegraphRowMetrics(24);
+			expect(mLarge.EVENT_DOT_SIZE).toBe(6);
+		});
+	});
+
+	describe('formatDuration', () => {
+		it('formats nanos as ms', () => {
+			// 1e6 nanos = 1ms
+			expect(formatDuration(1_000_000)).toBe('1ms');
+		});
+
+		it('formats larger durations as s/m/hr', () => {
+			// 2e9 nanos = 2000ms = 2s
+			expect(formatDuration(2_000_000_000)).toBe('2s');
+		});
+
+		it('formats zero duration', () => {
+			expect(formatDuration(0)).toBe('0ms');
+		});
+
+		it('formats very small values', () => {
+			// 1000 nanos = 0.001ms → mock returns { time: 0.001, timeUnitName: 'ms' }
+			expect(formatDuration(1000)).toBe('0ms');
+		});
+
+		it('formats decimal seconds correctly', () => {
+			expect(formatDuration(1_500_000_000)).toBe('1.5s');
+		});
+	});
+});

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/__tests__/utils.presentation.test.ts

@@ -0,0 +1,67 @@
+import { getSpanColor } from '../utils';
+import { MOCK_SPAN } from './testUtils';
+
+const mockGenerateColor = jest.fn();
+
+jest.mock('lib/uPlotLib/utils/generateColor', () => ({
+	generateColor: (key: string, colorMap: Record<string, string>): string =>
+		mockGenerateColor(key, colorMap),
+}));
+
+describe('Presentation / Styling Utils', () => {
+	beforeEach(() => {
+		jest.clearAllMocks();
+		mockGenerateColor.mockReturnValue('#2F80ED');
+	});
+
+	describe('getSpanColor', () => {
+		it('uses generated service color for normal span', () => {
+			mockGenerateColor.mockReturnValue('#1890ff');
+
+			const color = getSpanColor({
+				span: { ...MOCK_SPAN, hasError: false },
+				isDarkMode: false,
+			});
+
+			expect(mockGenerateColor).toHaveBeenCalledWith(
+				MOCK_SPAN.serviceName,
+				expect.any(Object),
+			);
+			expect(color).toBe('#1890ff');
+		});
+
+		it('overrides with error color in light mode when span has error', () => {
+			mockGenerateColor.mockReturnValue('#1890ff');
+
+			const color = getSpanColor({
+				span: { ...MOCK_SPAN, hasError: true },
+				isDarkMode: false,
+			});
+
+			expect(color).toBe('rgb(220, 38, 38)');
+		});
+
+		it('overrides with error color in dark mode when span has error', () => {
+			mockGenerateColor.mockReturnValue('#1890ff');
+
+			const color = getSpanColor({
+				span: { ...MOCK_SPAN, hasError: true },
+				isDarkMode: true,
+			});
+
+			expect(color).toBe('rgb(239, 68, 68)');
+		});
+
+		it('passes serviceName to generateColor', () => {
+			getSpanColor({
+				span: { ...MOCK_SPAN, serviceName: 'my-service' },
+				isDarkMode: false,
+			});
+
+			expect(mockGenerateColor).toHaveBeenCalledWith(
+				'my-service',
+				expect.any(Object),
+			);
+		});
+	});
+});

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/constants.ts

@@ -0,0 +1,36 @@
+export const ROW_HEIGHT = 24;
+export const SPAN_BAR_HEIGHT = 22;
+export const SPAN_BAR_Y_OFFSET = Math.floor((ROW_HEIGHT - SPAN_BAR_HEIGHT) / 2);
+export const EVENT_DOT_SIZE = 6;
+
+// Span bar sizing relative to row height (used by getFlamegraphRowMetrics)
+export const SPAN_BAR_HEIGHT_RATIO = SPAN_BAR_HEIGHT / ROW_HEIGHT;
+export const MIN_SPAN_BAR_HEIGHT = 8;
+export const MAX_SPAN_BAR_HEIGHT = SPAN_BAR_HEIGHT;
+
+// Event dot sizing relative to span bar height
+export const EVENT_DOT_SIZE_RATIO = EVENT_DOT_SIZE / SPAN_BAR_HEIGHT;
+export const MIN_EVENT_DOT_SIZE = 4;
+export const MAX_EVENT_DOT_SIZE = EVENT_DOT_SIZE;
+
+export const LABEL_FONT = '11px Inter, sans-serif';
+export const LABEL_PADDING_X = 8;
+export const MIN_WIDTH_FOR_NAME = 30;
+export const MIN_WIDTH_FOR_NAME_AND_DURATION = 80;
+
+// Dynamic row height (vertical zoom) -- disabled for now (MIN === MAX)
+export const MIN_ROW_HEIGHT = 24;
+export const MAX_ROW_HEIGHT = 24;
+export const DEFAULT_ROW_HEIGHT = MIN_ROW_HEIGHT;
+
+// Zoom intensity -- how fast zoom reacts to wheel/pinch delta
+export const PINCH_ZOOM_INTENSITY_H = 0.01;
+export const SCROLL_ZOOM_INTENSITY_H = 0.0015;
+export const PINCH_ZOOM_INTENSITY_V = 0.008;
+export const SCROLL_ZOOM_INTENSITY_V = 0.001;
+
+// Minimum visible time span in ms (prevents zooming to sub-pixel)
+export const MIN_VISIBLE_SPAN_MS = 5;
+
+// Selected span style (dashed border)
+export const DASHED_BORDER_LINE_DASH = [4, 2];

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/hooks/useCanvasSetup.ts

@@ -0,0 +1,55 @@
+import { RefObject, useCallback, useEffect } from 'react';
+
+export function useCanvasSetup(
+	canvasRef: RefObject<HTMLCanvasElement>,
+	containerRef: RefObject<HTMLDivElement>,
+	onDraw: () => void,
+): void {
+	const updateCanvasSize = useCallback(() => {
+		const canvas = canvasRef.current;
+		const container = containerRef.current;
+		if (!canvas || !container) {
+			return;
+		}
+
+		const dpr = window.devicePixelRatio || 1;
+		const rect = container.getBoundingClientRect();
+		const viewportHeight = container.clientHeight;
+
+		canvas.style.width = `${rect.width}px`;
+		canvas.style.height = `${viewportHeight}px`;
+
+		const newWidth = Math.floor(rect.width * dpr);
+		const newHeight = Math.floor(viewportHeight * dpr);
+
+		if (canvas.width !== newWidth || canvas.height !== newHeight) {
+			canvas.width = newWidth;
+			canvas.height = newHeight;
+			onDraw();
+		}
+	}, [canvasRef, containerRef, onDraw]);
+
+	useEffect(() => {
+		const container = containerRef.current;
+		if (!container) {
+			return (): void => {};
+		}
+
+		const resizeObserver = new ResizeObserver(updateCanvasSize);
+		resizeObserver.observe(container);
+		updateCanvasSize();
+
+		// when dpr changes, update the canvas size
+		const dprQuery = window.matchMedia('(resolution: 1dppx)');
+		dprQuery.addEventListener('change', updateCanvasSize);
+
+		return (): void => {
+			resizeObserver.disconnect();
+			dprQuery.removeEventListener('change', updateCanvasSize);
+		};
+	}, [containerRef, updateCanvasSize]);
+
+	useEffect(() => {
+		onDraw();
+	}, [onDraw]);
+}

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/hooks/useFlamegraphDrag.ts

@@ -0,0 +1,178 @@
+import {
+	Dispatch,
+	MouseEvent as ReactMouseEvent,
+	MutableRefObject,
+	RefObject,
+	SetStateAction,
+	useCallback,
+	useRef,
+} from 'react';
+
+import { ITraceMetadata } from '../types';
+import { clamp } from '../utils';
+
+interface UseFlamegraphDragArgs {
+	canvasRef: RefObject<HTMLCanvasElement>;
+	containerRef: RefObject<HTMLDivElement>;
+	traceMetadata: ITraceMetadata;
+	viewStartRef: MutableRefObject<number>;
+	viewEndRef: MutableRefObject<number>;
+	setViewStartTs: Dispatch<SetStateAction<number>>;
+	setViewEndTs: Dispatch<SetStateAction<number>>;
+	scrollTopRef: MutableRefObject<number>;
+	setScrollTop: Dispatch<SetStateAction<number>>;
+	totalHeight: number;
+}
+
+interface UseFlamegraphDragResult {
+	handleMouseDown: (e: ReactMouseEvent) => void;
+	handleMouseMove: (e: ReactMouseEvent) => void;
+	handleMouseUp: () => void;
+	handleDragMouseLeave: () => void;
+	suppressClickRef: MutableRefObject<boolean>;
+	isDraggingRef: MutableRefObject<boolean>;
+}
+
+const DRAG_THRESHOLD = 5;
+
+export function useFlamegraphDrag(
+	args: UseFlamegraphDragArgs,
+): UseFlamegraphDragResult {
+	const {
+		canvasRef,
+		containerRef,
+		traceMetadata,
+		viewStartRef,
+		viewEndRef,
+		setViewStartTs,
+		setViewEndTs,
+		scrollTopRef,
+		setScrollTop,
+		totalHeight,
+	} = args;
+
+	const isDraggingRef = useRef(false);
+	const dragStartRef = useRef<{ x: number; y: number } | null>(null);
+	const dragDistanceRef = useRef(0);
+	const suppressClickRef = useRef(false);
+
+	const clampScrollTop = useCallback(
+		(next: number): number => {
+			const container = containerRef.current;
+			if (!container) {
+				return 0;
+			}
+			const viewportHeight = container.clientHeight;
+			const maxScroll = Math.max(0, totalHeight - viewportHeight);
+			return clamp(next, 0, maxScroll);
+		},
+		[containerRef, totalHeight],
+	);
+
+	const handleMouseDown = useCallback(
+		(event: ReactMouseEvent): void => {
+			if (event.button !== 0) {
+				return;
+			}
+			event.preventDefault();
+
+			isDraggingRef.current = true;
+			dragStartRef.current = { x: event.clientX, y: event.clientY };
+			dragDistanceRef.current = 0;
+
+			const canvas = canvasRef.current;
+			if (canvas) {
+				canvas.style.cursor = 'grabbing';
+			}
+		},
+		[canvasRef],
+	);
+
+	const handleMouseMove = useCallback(
+		(event: ReactMouseEvent): void => {
+			if (!isDraggingRef.current || !dragStartRef.current) {
+				return;
+			}
+
+			const canvas = canvasRef.current;
+			if (!canvas) {
+				return;
+			}
+
+			const rect = canvas.getBoundingClientRect();
+			const deltaX = event.clientX - dragStartRef.current.x;
+			const deltaY = event.clientY - dragStartRef.current.y;
+
+			dragDistanceRef.current = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
+
+			// --- Horizontal pan ---
+			const timeSpan = viewEndRef.current - viewStartRef.current;
+			const deltaTime = (deltaX / rect.width) * timeSpan;
+
+			const newStart = viewStartRef.current - deltaTime;
+			const clampedStart = clamp(
+				newStart,
+				traceMetadata.startTime,
+				traceMetadata.endTime - timeSpan,
+			);
+			const clampedEnd = clampedStart + timeSpan;
+
+			viewStartRef.current = clampedStart;
+			viewEndRef.current = clampedEnd;
+			setViewStartTs(clampedStart);
+			setViewEndTs(clampedEnd);
+
+			// --- Vertical scroll pan ---
+			const nextScrollTop = clampScrollTop(scrollTopRef.current - deltaY);
+			scrollTopRef.current = nextScrollTop;
+			setScrollTop(nextScrollTop);
+
+			dragStartRef.current = { x: event.clientX, y: event.clientY };
+		},
+		[
+			canvasRef,
+			traceMetadata,
+			viewStartRef,
+			viewEndRef,
+			setViewStartTs,
+			setViewEndTs,
+			scrollTopRef,
+			setScrollTop,
+			clampScrollTop,
+		],
+	);
+
+	const handleMouseUp = useCallback((): void => {
+		const wasDrag = dragDistanceRef.current > DRAG_THRESHOLD;
+		suppressClickRef.current = wasDrag;
+
+		isDraggingRef.current = false;
+		dragStartRef.current = null;
+		dragDistanceRef.current = 0;
+
+		const canvas = canvasRef.current;
+		if (canvas) {
+			canvas.style.cursor = 'grab';
+		}
+	}, [canvasRef]);
+
+	const handleDragMouseLeave = useCallback((): void => {
+		isDraggingRef.current = false;
+		dragStartRef.current = null;
+		dragDistanceRef.current = 0;
+
+		const canvas = canvasRef.current;
+		if (canvas) {
+			canvas.style.cursor = 'grab';
+		}
+	}, [canvasRef]);
+
+	return {
+		handleMouseDown,
+		handleMouseMove,
+		handleMouseUp,
+		handleDragMouseLeave,
+		suppressClickRef,
+		isDraggingRef,
+	};
+}

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/hooks/useFlamegraphDraw.ts

@@ -0,0 +1,222 @@
+import React, { RefObject, useCallback, useRef } from 'react';
+import { FlamegraphSpan } from 'types/api/trace/getTraceFlamegraph';
+
+import { SpanRect } from '../types';
+import {
+	clamp,
+	drawSpanBar,
+	FlamegraphRowMetrics,
+	getFlamegraphRowMetrics,
+	getSpanColor,
+} from '../utils';
+
+interface UseFlamegraphDrawArgs {
+	canvasRef: RefObject<HTMLCanvasElement>;
+	containerRef: RefObject<HTMLDivElement>;
+	spans: FlamegraphSpan[][];
+	viewStartTs: number;
+	viewEndTs: number;
+	scrollTop: number;
+	rowHeight: number;
+	selectedSpanId: string | undefined;
+	hoveredSpanId: string;
+	isDarkMode: boolean;
+	spanRectsRef?: React.MutableRefObject<SpanRect[]>;
+}
+
+interface UseFlamegraphDrawResult {
+	drawFlamegraph: () => void;
+	spanRectsRef: RefObject<SpanRect[]>;
+}
+
+const OVERSCAN_ROWS = 4;
+
+interface DrawLevelArgs {
+	ctx: CanvasRenderingContext2D;
+	levelSpans: FlamegraphSpan[];
+	levelIndex: number;
+	y: number;
+	viewStartTs: number;
+	timeSpan: number;
+	cssWidth: number;
+	selectedSpanId: string | undefined;
+	hoveredSpanId: string;
+	isDarkMode: boolean;
+	spanRectsArray: SpanRect[];
+	metrics: FlamegraphRowMetrics;
+}
+
+function drawLevel(args: DrawLevelArgs): void {
+	const {
+		ctx,
+		levelSpans,
+		levelIndex,
+		y,
+		viewStartTs,
+		timeSpan,
+		cssWidth,
+		selectedSpanId,
+		hoveredSpanId,
+		isDarkMode,
+		spanRectsArray,
+		metrics,
+	} = args;
+
+	const viewEndTs = viewStartTs + timeSpan;
+
+	for (let i = 0; i < levelSpans.length; i++) {
+		const span = levelSpans[i];
+		const spanStartMs = span.timestamp;
+		const spanEndMs = span.timestamp + span.durationNano / 1e6;
+
+		// Time culling -- skip spans entirely outside the visible time window
+		if (spanEndMs < viewStartTs || spanStartMs > viewEndTs) {
+			continue;
+		}
+
+		const leftOffset = ((spanStartMs - viewStartTs) / timeSpan) * cssWidth;
+		const rightEdge = ((spanEndMs - viewStartTs) / timeSpan) * cssWidth;
+		let width = rightEdge - leftOffset;
+
+		// Clamp to visible x-range
+		if (leftOffset < 0) {
+			width += leftOffset;
+			if (width <= 0) {
+				continue;
+			}
+		}
+		if (rightEdge > cssWidth) {
+			width = cssWidth - Math.max(0, leftOffset);
+			if (width <= 0) {
+				continue;
+			}
+		}
+
+		// Minimum 1px width so tiny spans remain visible
+		width = clamp(width, 1, Infinity);
+
+		const color = getSpanColor({ span, isDarkMode });
+
+		drawSpanBar({
+			ctx,
+			span,
+			x: Math.max(0, leftOffset),
+			y,
+			width,
+			levelIndex,
+			spanRectsArray,
+			color,
+			isDarkMode,
+			metrics,
+			selectedSpanId,
+			hoveredSpanId,
+		});
+	}
+}
+
+export function useFlamegraphDraw(
+	args: UseFlamegraphDrawArgs,
+): UseFlamegraphDrawResult {
+	const {
+		canvasRef,
+		containerRef,
+		spans,
+		viewStartTs,
+		viewEndTs,
+		scrollTop,
+		rowHeight,
+		selectedSpanId,
+		hoveredSpanId,
+		isDarkMode,
+		spanRectsRef: spanRectsRefProp,
+	} = args;
+
+	const spanRectsRefInternal = useRef<SpanRect[]>([]);
+	const spanRectsRef = spanRectsRefProp ?? spanRectsRefInternal;
+
+	const drawFlamegraph = useCallback(() => {
+		const canvas = canvasRef.current;
+		const container = containerRef.current;
+		if (!canvas || !container) {
+			return;
+		}
+
+		const ctx = canvas.getContext('2d');
+		if (!ctx) {
+			return;
+		}
+
+		const dpr = window.devicePixelRatio || 1;
+		ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+
+		const timeSpan = viewEndTs - viewStartTs;
+		if (timeSpan <= 0) {
+			return;
+		}
+
+		const cssWidth = canvas.width / dpr;
+		const metrics = getFlamegraphRowMetrics(rowHeight);
+
+		// ---- Vertical clipping window ----
+		const viewportHeight = container.clientHeight;
+
+		//starts drawing OVERSCAN_ROWS(4) rows above the visible area.
+		const firstLevel = Math.max(
+			0,
+			Math.floor(scrollTop / metrics.ROW_HEIGHT) - OVERSCAN_ROWS,
+		);
+		// adds 2*OVERSCAN_ROWS extra rows above and below the visible area.
+		const visibleLevelCount =
+			Math.ceil(viewportHeight / metrics.ROW_HEIGHT) + 2 * OVERSCAN_ROWS;
+
+		const lastLevel = Math.min(spans.length - 1, firstLevel + visibleLevelCount);
+
+		ctx.clearRect(0, 0, cssWidth, viewportHeight);
+
+		const spanRectsArray: SpanRect[] = [];
+
+		// ---- Draw only visible levels ----
+		for (let levelIndex = firstLevel; levelIndex <= lastLevel; levelIndex++) {
+			const levelSpans = spans[levelIndex];
+			if (!levelSpans) {
+				continue;
+			}
+
+			drawLevel({
+				ctx,
+				levelSpans,
+				levelIndex,
+				y: levelIndex * metrics.ROW_HEIGHT - scrollTop,
+				viewStartTs,
+				timeSpan,
+				cssWidth,
+				selectedSpanId,
+				hoveredSpanId,
+				isDarkMode,
+				spanRectsArray,
+				metrics,
+			});
+		}
+
+		spanRectsRef.current = spanRectsArray;
+	}, [
+		canvasRef,
+		containerRef,
+		spanRectsRef,
+		spans,
+		viewStartTs,
+		viewEndTs,
+		scrollTop,
+		rowHeight,
+		selectedSpanId,
+		hoveredSpanId,
+		isDarkMode,
+	]);
+
+	// TODO: spanRectsRef is a flat array — hover scans all visible rects O(N).
+	// Upgrade to per-level buckets: spanRects[levelIndex] = [...] so hover can
+	// compute level from mouseY / ROW_HEIGHT and scan only that row.
+	// Further: binary search within a level by x (spans are sorted by start time)
+	// to reduce hover cost from O(N) to O(log N).
+	return { drawFlamegraph, spanRectsRef };
+}

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/hooks/useFlamegraphHover.ts

@@ -0,0 +1,214 @@
+import {
+	Dispatch,
+	MouseEvent as ReactMouseEvent,
+	MutableRefObject,
+	RefObject,
+	SetStateAction,
+	useCallback,
+	useState,
+} from 'react';
+import { FlamegraphSpan } from 'types/api/trace/getTraceFlamegraph';
+
+import { SpanRect } from '../types';
+import { ITraceMetadata } from '../types';
+import { getSpanColor } from '../utils';
+
+function getCanvasPointer(
+	canvas: HTMLCanvasElement,
+	clientX: number,
+	clientY: number,
+): { cssX: number; cssY: number } | null {
+	const rect = canvas.getBoundingClientRect();
+	const dpr = window.devicePixelRatio || 1;
+	const cssWidth = canvas.width / dpr;
+	const cssHeight = canvas.height / dpr;
+	const cssX = (clientX - rect.left) * (cssWidth / rect.width);
+	const cssY = (clientY - rect.top) * (cssHeight / rect.height);
+	return { cssX, cssY };
+}
+
+function findSpanAtPosition(
+	cssX: number,
+	cssY: number,
+	spanRects: SpanRect[],
+): FlamegraphSpan | null {
+	for (let i = spanRects.length - 1; i >= 0; i--) {
+		const r = spanRects[i];
+		if (
+			cssX >= r.x &&
+			cssX <= r.x + r.width &&
+			cssY >= r.y &&
+			cssY <= r.y + r.height
+		) {
+			return r.span;
+		}
+	}
+	return null;
+}
+
+export interface TooltipContent {
+	spanName: string;
+	status: 'ok' | 'warning' | 'error';
+	startMs: number;
+	durationMs: number;
+	clientX: number;
+	clientY: number;
+	spanColor: string;
+}
+
+interface UseFlamegraphHoverArgs {
+	canvasRef: RefObject<HTMLCanvasElement>;
+	spanRectsRef: MutableRefObject<SpanRect[]>;
+	traceMetadata: ITraceMetadata;
+	viewStartTs: number;
+	viewEndTs: number;
+	isDraggingRef: MutableRefObject<boolean>;
+	suppressClickRef: MutableRefObject<boolean>;
+	onSpanClick: (spanId: string) => void;
+	isDarkMode: boolean;
+}
+
+interface UseFlamegraphHoverResult {
+	hoveredSpanId: string | null;
+	setHoveredSpanId: Dispatch<SetStateAction<string | null>>;
+	handleHoverMouseMove: (e: ReactMouseEvent) => void;
+	handleHoverMouseLeave: () => void;
+	handleClick: (e: ReactMouseEvent) => void;
+	tooltipContent: TooltipContent | null;
+}
+
+export function useFlamegraphHover(
+	args: UseFlamegraphHoverArgs,
+): UseFlamegraphHoverResult {
+	const {
+		canvasRef,
+		spanRectsRef,
+		traceMetadata,
+		viewStartTs,
+		viewEndTs,
+		isDraggingRef,
+		suppressClickRef,
+		onSpanClick,
+		isDarkMode,
+	} = args;
+
+	const [hoveredSpanId, setHoveredSpanId] = useState<string | null>(null);
+	const [tooltipContent, setTooltipContent] = useState<TooltipContent | null>(
+		null,
+	);
+
+	const isZoomed =
+		viewStartTs !== traceMetadata.startTime ||
+		viewEndTs !== traceMetadata.endTime;
+
+	const updateCursor = useCallback(
+		(canvas: HTMLCanvasElement, span: FlamegraphSpan | null): void => {
+			if (span) {
+				canvas.style.cursor = 'pointer';
+			} else if (isZoomed) {
+				canvas.style.cursor = 'grab';
+			} else {
+				canvas.style.cursor = 'default';
+			}
+		},
+		[isZoomed],
+	);
+
+	const handleHoverMouseMove = useCallback(
+		(e: ReactMouseEvent): void => {
+			if (isDraggingRef.current) {
+				return;
+			}
+
+			const canvas = canvasRef.current;
+			if (!canvas) {
+				return;
+			}
+
+			const pointer = getCanvasPointer(canvas, e.clientX, e.clientY);
+			if (!pointer) {
+				return;
+			}
+
+			const span = findSpanAtPosition(
+				pointer.cssX,
+				pointer.cssY,
+				spanRectsRef.current,
+			);
+
+			if (span) {
+				setHoveredSpanId(span.spanId);
+				setTooltipContent({
+					spanName: span.name || 'unknown',
+					status: span.hasError ? 'error' : 'ok',
+					startMs: span.timestamp - traceMetadata.startTime,
+					durationMs: span.durationNano / 1e6,
+					clientX: e.clientX,
+					clientY: e.clientY,
+					spanColor: getSpanColor({ span, isDarkMode }),
+				});
+				updateCursor(canvas, span);
+			} else {
+				setHoveredSpanId(null);
+				setTooltipContent(null);
+				updateCursor(canvas, null);
+			}
+		},
+		[
+			canvasRef,
+			spanRectsRef,
+			traceMetadata.startTime,
+			isDraggingRef,
+			updateCursor,
+			isDarkMode,
+		],
+	);
+
+	const handleHoverMouseLeave = useCallback((): void => {
+		setHoveredSpanId(null);
+		setTooltipContent(null);
+
+		const canvas = canvasRef.current;
+		if (canvas) {
+			updateCursor(canvas, null);
+		}
+	}, [canvasRef, updateCursor]);
+
+	const handleClick = useCallback(
+		(e: ReactMouseEvent): void => {
+			if (suppressClickRef.current) {
+				return;
+			}
+
+			const canvas = canvasRef.current;
+			if (!canvas) {
+				return;
+			}
+
+			const pointer = getCanvasPointer(canvas, e.clientX, e.clientY);
+			if (!pointer) {
+				return;
+			}
+
+			const span = findSpanAtPosition(
+				pointer.cssX,
+				pointer.cssY,
+				spanRectsRef.current,
+			);
+
+			if (span) {
+				onSpanClick(span.spanId);
+			}
+		},
+		[canvasRef, spanRectsRef, suppressClickRef, onSpanClick],
+	);
+
+	return {
+		hoveredSpanId,
+		setHoveredSpanId,
+		handleHoverMouseMove,
+		handleHoverMouseLeave,
+		handleClick,
+		tooltipContent,
+	};
+}

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/hooks/useFlamegraphZoom.ts

@@ -0,0 +1,224 @@
+import {
+	Dispatch,
+	MutableRefObject,
+	RefObject,
+	SetStateAction,
+	useCallback,
+	useEffect,
+	useRef,
+} from 'react';
+
+import {
+	DEFAULT_ROW_HEIGHT,
+	MAX_ROW_HEIGHT,
+	MIN_ROW_HEIGHT,
+	MIN_VISIBLE_SPAN_MS,
+	PINCH_ZOOM_INTENSITY_H,
+	PINCH_ZOOM_INTENSITY_V,
+	SCROLL_ZOOM_INTENSITY_H,
+	SCROLL_ZOOM_INTENSITY_V,
+} from '../constants';
+import { ITraceMetadata } from '../types';
+import { clamp } from '../utils';
+
+interface UseFlamegraphZoomArgs {
+	canvasRef: RefObject<HTMLCanvasElement>;
+	traceMetadata: ITraceMetadata;
+	viewStartRef: MutableRefObject<number>;
+	viewEndRef: MutableRefObject<number>;
+	rowHeightRef: MutableRefObject<number>;
+	setViewStartTs: Dispatch<SetStateAction<number>>;
+	setViewEndTs: Dispatch<SetStateAction<number>>;
+	setRowHeight: Dispatch<SetStateAction<number>>;
+}
+
+interface UseFlamegraphZoomResult {
+	handleResetZoom: () => void;
+	isOverFlamegraphRef: MutableRefObject<boolean>;
+}
+
+function getCanvasPointer(
+	canvasRef: RefObject<HTMLCanvasElement>,
+	clientX: number,
+): { cssX: number; cssWidth: number } | null {
+	const canvas = canvasRef.current;
+	if (!canvas) {
+		return null;
+	}
+
+	const rect = canvas.getBoundingClientRect();
+	const dpr = window.devicePixelRatio || 1;
+	const cssWidth = canvas.width / dpr;
+	const cssX = (clientX - rect.left) * (cssWidth / rect.width);
+
+	return { cssX, cssWidth };
+}
+
+export function useFlamegraphZoom(
+	args: UseFlamegraphZoomArgs,
+): UseFlamegraphZoomResult {
+	const {
+		canvasRef,
+		traceMetadata,
+		viewStartRef,
+		viewEndRef,
+		rowHeightRef,
+		setViewStartTs,
+		setViewEndTs,
+		setRowHeight,
+	} = args;
+
+	const isOverFlamegraphRef = useRef(false);
+	const wheelDeltaRef = useRef(0);
+	const rafRef = useRef<number | null>(null);
+	const lastCursorXRef = useRef(0);
+	const lastCssWidthRef = useRef(1);
+	const lastIsPinchRef = useRef(false);
+	const lastWheelClientXRef = useRef<number | null>(null);
+
+	// Prevent browser zoom when pinching over the flamegraph
+	useEffect(() => {
+		const onWheel = (e: WheelEvent): void => {
+			if (isOverFlamegraphRef.current && e.ctrlKey) {
+				e.preventDefault();
+			}
+		};
+
+		window.addEventListener('wheel', onWheel, { passive: false, capture: true });
+
+		return (): void => {
+			window.removeEventListener('wheel', onWheel, {
+				capture: true,
+			} as EventListenerOptions);
+		};
+	}, []);
+
+	const applyWheelZoom = useCallback(() => {
+		rafRef.current = null;
+
+		const cssWidth = lastCssWidthRef.current || 1;
+		const cursorX = lastCursorXRef.current;
+		const fullSpanMs = traceMetadata.endTime - traceMetadata.startTime;
+
+		const oldStart = viewStartRef.current;
+		const oldEnd = viewEndRef.current;
+		const oldSpan = oldEnd - oldStart;
+
+		const deltaY = wheelDeltaRef.current;
+		wheelDeltaRef.current = 0;
+		if (deltaY === 0) {
+			return;
+		}
+
+		const zoomH = lastIsPinchRef.current
+			? PINCH_ZOOM_INTENSITY_H
+			: SCROLL_ZOOM_INTENSITY_H;
+		const zoomV = lastIsPinchRef.current
+			? PINCH_ZOOM_INTENSITY_V
+			: SCROLL_ZOOM_INTENSITY_V;
+
+		const factorH = Math.exp(deltaY * zoomH);
+		const factorV = Math.exp(deltaY * zoomV);
+
+		// --- Horizontal zoom ---
+		const desiredSpan = oldSpan * factorH;
+		const minSpanMs = Math.max(
+			MIN_VISIBLE_SPAN_MS,
+			oldSpan / Math.max(cssWidth, 1),
+		);
+		const clampedSpan = clamp(desiredSpan, minSpanMs, fullSpanMs);
+
+		const cursorRatio = clamp(cursorX / cssWidth, 0, 1);
+		const anchorTs = oldStart + cursorRatio * oldSpan;
+
+		let nextStart = anchorTs - cursorRatio * clampedSpan;
+		nextStart = clamp(
+			nextStart,
+			traceMetadata.startTime,
+			traceMetadata.endTime - clampedSpan,
+		);
+		const nextEnd = nextStart + clampedSpan;
+
+		// --- Vertical zoom (row height) ---
+		const desiredRow = rowHeightRef.current * (1 / factorV);
+		const nextRow = clamp(desiredRow, MIN_ROW_HEIGHT, MAX_ROW_HEIGHT);
+
+		// Write refs immediately so rapid wheel events read fresh values
+		viewStartRef.current = nextStart;
+		viewEndRef.current = nextEnd;
+		rowHeightRef.current = nextRow;
+
+		setViewStartTs(nextStart);
+		setViewEndTs(nextEnd);
+		setRowHeight(nextRow);
+	}, [
+		traceMetadata,
+		viewStartRef,
+		viewEndRef,
+		rowHeightRef,
+		setViewStartTs,
+		setViewEndTs,
+		setRowHeight,
+	]);
+
+	// Native wheel listener on the canvas (passive: false for reliable preventDefault)
+	useEffect(() => {
+		const canvas = canvasRef.current;
+		if (!canvas) {
+			return (): void => {};
+		}
+
+		const onWheel = (e: WheelEvent): void => {
+			e.preventDefault();
+
+			const pointer = getCanvasPointer(canvasRef, e.clientX);
+			if (!pointer) {
+				return;
+			}
+
+			// Flush accumulated delta if cursor moved significantly
+			if (lastWheelClientXRef.current !== null) {
+				const moved = Math.abs(e.clientX - lastWheelClientXRef.current);
+				if (moved > 6) {
+					wheelDeltaRef.current = 0;
+				}
+			}
+			lastWheelClientXRef.current = e.clientX;
+
+			lastIsPinchRef.current = e.ctrlKey;
+			lastCssWidthRef.current = pointer.cssWidth;
+			lastCursorXRef.current = pointer.cssX;
+			wheelDeltaRef.current += e.deltaY;
+
+			if (rafRef.current == null) {
+				rafRef.current = requestAnimationFrame(applyWheelZoom);
+			}
+		};
+
+		canvas.addEventListener('wheel', onWheel, { passive: false });
+
+		return (): void => {
+			canvas.removeEventListener('wheel', onWheel);
+		};
+	}, [canvasRef, applyWheelZoom]);
+
+	const handleResetZoom = useCallback(() => {
+		viewStartRef.current = traceMetadata.startTime;
+		viewEndRef.current = traceMetadata.endTime;
+		rowHeightRef.current = DEFAULT_ROW_HEIGHT;
+
+		setViewStartTs(traceMetadata.startTime);
+		setViewEndTs(traceMetadata.endTime);
+		setRowHeight(DEFAULT_ROW_HEIGHT);
+	}, [
+		traceMetadata,
+		viewStartRef,
+		viewEndRef,
+		rowHeightRef,
+		setViewStartTs,
+		setViewEndTs,
+		setRowHeight,
+	]);
+
+	return { handleResetZoom, isOverFlamegraphRef };
+}

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/hooks/useScrollToSpan.ts

@@ -0,0 +1,118 @@
+import {
+	Dispatch,
+	MutableRefObject,
+	RefObject,
+	SetStateAction,
+	useEffect,
+} from 'react';
+import { FlamegraphSpan } from 'types/api/trace/getTraceFlamegraph';
+
+import { MIN_VISIBLE_SPAN_MS } from '../constants';
+import { ITraceMetadata } from '../types';
+import { clamp, findSpanById, getFlamegraphRowMetrics } from '../utils';
+
+interface UseScrollToSpanArgs {
+	firstSpanAtFetchLevel: string;
+	spans: FlamegraphSpan[][];
+	traceMetadata: ITraceMetadata;
+	containerRef: RefObject<HTMLDivElement>;
+	viewStartRef: MutableRefObject<number>;
+	viewEndRef: MutableRefObject<number>;
+	scrollTopRef: MutableRefObject<number>;
+	rowHeight: number;
+	setViewStartTs: Dispatch<SetStateAction<number>>;
+	setViewEndTs: Dispatch<SetStateAction<number>>;
+	setScrollTop: Dispatch<SetStateAction<number>>;
+}
+
+/**
+ * When firstSpanAtFetchLevel (from URL spanId) changes, scroll and zoom the
+ * flamegraph so the selected span is centered in view.
+ */
+export function useScrollToSpan(args: UseScrollToSpanArgs): void {
+	const {
+		firstSpanAtFetchLevel,
+		spans,
+		traceMetadata,
+		containerRef,
+		viewStartRef,
+		viewEndRef,
+		scrollTopRef,
+		rowHeight,
+		setViewStartTs,
+		setViewEndTs,
+		setScrollTop,
+	} = args;
+
+	useEffect(() => {
+		if (!firstSpanAtFetchLevel || spans.length === 0) {
+			return;
+		}
+
+		const result = findSpanById(spans, firstSpanAtFetchLevel);
+		if (!result) {
+			return;
+		}
+
+		const { span, levelIndex } = result;
+		const container = containerRef.current;
+		if (!container) {
+			return;
+		}
+
+		const metrics = getFlamegraphRowMetrics(rowHeight);
+		const viewportHeight = container.clientHeight;
+		const totalHeight = spans.length * metrics.ROW_HEIGHT;
+		const maxScroll = Math.max(0, totalHeight - viewportHeight);
+
+		// Vertical: center the span's row in the viewport
+		const targetScrollTop = clamp(
+			levelIndex * metrics.ROW_HEIGHT -
+				viewportHeight / 2 +
+				metrics.ROW_HEIGHT / 2,
+			0,
+			maxScroll,
+		);
+
+		// Horizontal: zoom to span with padding (2x span duration), center it
+		const spanStartMs = span.timestamp;
+		const spanEndMs = span.timestamp + span.durationNano / 1e6;
+		const spanDurationMs = spanEndMs - spanStartMs;
+		const spanCenterMs = (spanStartMs + spanEndMs) / 2;
+
+		const visibleWindowMs = Math.max(spanDurationMs * 2, MIN_VISIBLE_SPAN_MS);
+		const fullSpanMs = traceMetadata.endTime - traceMetadata.startTime;
+		const clampedWindow = clamp(visibleWindowMs, MIN_VISIBLE_SPAN_MS, fullSpanMs);
+
+		let targetViewStart = spanCenterMs - clampedWindow / 2;
+		let targetViewEnd = spanCenterMs + clampedWindow / 2;
+
+		targetViewStart = clamp(
+			targetViewStart,
+			traceMetadata.startTime,
+			traceMetadata.endTime - clampedWindow,
+		);
+		targetViewEnd = targetViewStart + clampedWindow;
+
+		// Apply immediately (instant jump)
+		viewStartRef.current = targetViewStart;
+		viewEndRef.current = targetViewEnd;
+		scrollTopRef.current = targetScrollTop;
+
+		setViewStartTs(targetViewStart);
+		setViewEndTs(targetViewEnd);
+		setScrollTop(targetScrollTop);
+	}, [
+		firstSpanAtFetchLevel,
+		spans,
+		traceMetadata,
+		containerRef,
+		viewStartRef,
+		viewEndRef,
+		scrollTopRef,
+		rowHeight,
+		setViewStartTs,
+		setViewEndTs,
+		setScrollTop,
+	]);
+}

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/types.ts

@@ -0,0 +1,24 @@
+import { Dispatch, SetStateAction } from 'react';
+import { FlamegraphSpan } from 'types/api/trace/getTraceFlamegraph';
+
+export interface ITraceMetadata {
+	startTime: number;
+	endTime: number;
+}
+
+export interface FlamegraphCanvasProps {
+	spans: FlamegraphSpan[][];
+	firstSpanAtFetchLevel: string;
+	setFirstSpanAtFetchLevel: Dispatch<SetStateAction<string>>;
+	onSpanClick: (spanId: string) => void;
+	traceMetadata: ITraceMetadata;
+}
+
+export interface SpanRect {
+	span: FlamegraphSpan;
+	x: number;
+	y: number;
+	width: number;
+	height: number;
+	level: number;
+}

frontend/src/pages/TraceDetailsV3/TraceFlamegraph/utils.ts

@@ -0,0 +1,355 @@
+import { themeColors } from 'constants/theme';
+import { convertTimeToRelevantUnit } from 'container/TraceDetail/utils';
+import { generateColor } from 'lib/uPlotLib/utils/generateColor';
+import { FlamegraphSpan } from 'types/api/trace/getTraceFlamegraph';
+
+import {
+	DASHED_BORDER_LINE_DASH,
+	EVENT_DOT_SIZE_RATIO,
+	LABEL_FONT,
+	LABEL_PADDING_X,
+	MAX_EVENT_DOT_SIZE,
+	MAX_SPAN_BAR_HEIGHT,
+	MIN_EVENT_DOT_SIZE,
+	MIN_SPAN_BAR_HEIGHT,
+	MIN_WIDTH_FOR_NAME,
+	MIN_WIDTH_FOR_NAME_AND_DURATION,
+	SPAN_BAR_HEIGHT_RATIO,
+} from './constants';
+import { SpanRect } from './types';
+
+export function clamp(v: number, min: number, max: number): number {
+	return Math.max(min, Math.min(max, v));
+}
+
+/** Create diagonal stripe pattern for selected/hovered span (repeating-linear-gradient -45deg style). */
+function createStripePattern(
+	ctx: CanvasRenderingContext2D,
+	color: string,
+): CanvasPattern | null {
+	const size = 20;
+	const patternCanvas = document.createElement('canvas');
+	patternCanvas.width = size;
+	patternCanvas.height = size;
+	const pCtx = patternCanvas.getContext('2d');
+	if (!pCtx) {
+		return null;
+	}
+
+	// Diagonal stripes at -45deg: 10px transparent, 10px colored (0.04 opacity), repeat
+	pCtx.globalAlpha = 0.04;
+	pCtx.strokeStyle = color;
+	pCtx.lineWidth = 10;
+	pCtx.lineCap = 'butt';
+	for (let i = -size; i < size * 2; i += size) {
+		pCtx.beginPath();
+		pCtx.moveTo(i + size, 0);
+		pCtx.lineTo(i, size);
+		pCtx.stroke();
+	}
+	pCtx.globalAlpha = 1;
+
+	return ctx.createPattern(patternCanvas, 'repeat');
+}
+
+export function findSpanById(
+	spans: FlamegraphSpan[][],
+	spanId: string,
+): { span: FlamegraphSpan; levelIndex: number } | null {
+	for (let levelIndex = 0; levelIndex < spans.length; levelIndex++) {
+		const span = spans[levelIndex]?.find((s) => s.spanId === spanId);
+		if (span) {
+			return { span, levelIndex };
+		}
+	}
+	return null;
+}
+
+export interface FlamegraphRowMetrics {
+	ROW_HEIGHT: number;
+	SPAN_BAR_HEIGHT: number;
+	SPAN_BAR_Y_OFFSET: number;
+	EVENT_DOT_SIZE: number;
+}
+
+export function getFlamegraphRowMetrics(
+	rowHeight: number,
+): FlamegraphRowMetrics {
+	const spanBarHeight = clamp(
+		Math.round(rowHeight * SPAN_BAR_HEIGHT_RATIO),
+		MIN_SPAN_BAR_HEIGHT,
+		MAX_SPAN_BAR_HEIGHT,
+	);
+	const spanBarYOffset = Math.floor((rowHeight - spanBarHeight) / 2);
+	const eventDotSize = clamp(
+		Math.round(spanBarHeight * EVENT_DOT_SIZE_RATIO),
+		MIN_EVENT_DOT_SIZE,
+		MAX_EVENT_DOT_SIZE,
+	);
+
+	return {
+		ROW_HEIGHT: rowHeight,
+		SPAN_BAR_HEIGHT: spanBarHeight,
+		SPAN_BAR_Y_OFFSET: spanBarYOffset,
+		EVENT_DOT_SIZE: eventDotSize,
+	};
+}
+
+interface GetSpanColorArgs {
+	span: FlamegraphSpan;
+	isDarkMode: boolean;
+}
+
+export function getSpanColor(args: GetSpanColorArgs): string {
+	const { span, isDarkMode } = args;
+	let color = generateColor(span.serviceName, themeColors.traceDetailColorsV3);
+
+	if (span.hasError) {
+		color = isDarkMode ? 'rgb(239, 68, 68)' : 'rgb(220, 38, 38)';
+	}
+
+	return color;
+}
+
+interface DrawEventDotArgs {
+	ctx: CanvasRenderingContext2D;
+	x: number;
+	y: number;
+	isError: boolean;
+	isDarkMode: boolean;
+	eventDotSize: number;
+}
+
+export function drawEventDot(args: DrawEventDotArgs): void {
+	const { ctx, x, y, isError, isDarkMode, eventDotSize } = args;
+
+	ctx.save();
+	ctx.translate(x, y);
+	ctx.rotate(Math.PI / 4);
+
+	if (isError) {
+		ctx.fillStyle = isDarkMode ? 'rgb(239, 68, 68)' : 'rgb(220, 38, 38)';
+		ctx.strokeStyle = isDarkMode ? 'rgb(185, 28, 28)' : 'rgb(153, 27, 27)';
+	} else {
+		ctx.fillStyle = isDarkMode ? 'rgb(14, 165, 233)' : 'rgb(6, 182, 212)';
+		ctx.strokeStyle = isDarkMode ? 'rgb(2, 132, 199)' : 'rgb(8, 145, 178)';
+	}
+
+	ctx.lineWidth = 1;
+	const half = eventDotSize / 2;
+	ctx.fillRect(-half, -half, eventDotSize, eventDotSize);
+	ctx.strokeRect(-half, -half, eventDotSize, eventDotSize);
+	ctx.restore();
+}
+
+interface DrawSpanBarArgs {
+	ctx: CanvasRenderingContext2D;
+	span: FlamegraphSpan;
+	x: number;
+	y: number;
+	width: number;
+	levelIndex: number;
+	spanRectsArray: SpanRect[];
+	color: string;
+	isDarkMode: boolean;
+	metrics: FlamegraphRowMetrics;
+	selectedSpanId?: string | null;
+	hoveredSpanId?: string | null;
+}
+
+export function drawSpanBar(args: DrawSpanBarArgs): void {
+	const {
+		ctx,
+		span,
+		x,
+		y,
+		width,
+		levelIndex,
+		spanRectsArray,
+		color,
+		isDarkMode,
+		metrics,
+		selectedSpanId,
+		hoveredSpanId,
+	} = args;
+
+	const spanY = y + metrics.SPAN_BAR_Y_OFFSET;
+	const isSelected = selectedSpanId === span.spanId;
+	const isHovered = hoveredSpanId === span.spanId;
+	const isSelectedOrHovered = isSelected || isHovered;
+
+	ctx.beginPath();
+	ctx.roundRect(x, spanY, width, metrics.SPAN_BAR_HEIGHT, 2);
+
+	if (isSelectedOrHovered) {
+		// Diagonal stripe pattern (repeating-linear-gradient -45deg style) + border in span color
+		const pattern = createStripePattern(ctx, color);
+		if (pattern) {
+			ctx.fillStyle = pattern;
+			ctx.fill();
+		}
+		if (isSelected) {
+			ctx.setLineDash(DASHED_BORDER_LINE_DASH);
+		}
+		ctx.strokeStyle = color;
+		ctx.lineWidth = isSelected ? 2 : 1;
+		ctx.stroke();
+		if (isSelected) {
+			ctx.setLineDash([]);
+		}
+	} else {
+		ctx.fillStyle = color;
+		ctx.fill();
+	}
+
+	spanRectsArray.push({
+		span,
+		x,
+		y: spanY,
+		width,
+		height: metrics.SPAN_BAR_HEIGHT,
+		level: levelIndex,
+	});
+
+	span.event?.forEach((event) => {
+		const spanDurationMs = span.durationNano / 1e6;
+		if (spanDurationMs <= 0) {
+			return;
+		}
+
+		const eventTimeMs = event.timeUnixNano / 1e6;
+		const eventOffsetPercent =
+			((eventTimeMs - span.timestamp) / spanDurationMs) * 100;
+		const clampedOffset = clamp(eventOffsetPercent, 1, 99);
+		const eventX = x + (clampedOffset / 100) * width;
+		const eventY = spanY + metrics.SPAN_BAR_HEIGHT / 2;
+
+		drawEventDot({
+			ctx,
+			x: eventX,
+			y: eventY,
+			isError: event.isError,
+			isDarkMode,
+			eventDotSize: metrics.EVENT_DOT_SIZE,
+		});
+	});
+
+	drawSpanLabel({
+		ctx,
+		span,
+		x,
+		y: spanY,
+		width,
+		color,
+		isSelectedOrHovered,
+		isDarkMode,
+		spanBarHeight: metrics.SPAN_BAR_HEIGHT,
+	});
+}
+
+export function formatDuration(durationNano: number): string {
+	const durationMs = durationNano / 1e6;
+	const { time, timeUnitName } = convertTimeToRelevantUnit(durationMs);
+	return `${parseFloat(time.toFixed(2))}${timeUnitName}`;
+}
+
+interface DrawSpanLabelArgs {
+	ctx: CanvasRenderingContext2D;
+	span: FlamegraphSpan;
+	x: number;
+	y: number;
+	width: number;
+	color: string;
+	isSelectedOrHovered: boolean;
+	isDarkMode: boolean;
+	spanBarHeight: number;
+}
+
+function drawSpanLabel(args: DrawSpanLabelArgs): void {
+	const {
+		ctx,
+		span,
+		x,
+		y,
+		width,
+		color,
+		isSelectedOrHovered,
+		isDarkMode,
+		spanBarHeight,
+	} = args;
+
+	if (width < MIN_WIDTH_FOR_NAME) {
+		return;
+	}
+
+	const name = span.name;
+
+	ctx.save();
+
+	// Clip text to span bar bounds
+	ctx.beginPath();
+	ctx.rect(x, y, width, spanBarHeight);
+	ctx.clip();
+
+	ctx.font = LABEL_FONT;
+	ctx.fillStyle = isSelectedOrHovered
+		? color
+		: isDarkMode
+		? 'rgba(0, 0, 0, 0.9)'
+		: 'rgba(255, 255, 255, 0.9)';
+	ctx.textBaseline = 'middle';
+
+	const textY = y + spanBarHeight / 2;
+	const leftX = x + LABEL_PADDING_X;
+	const rightX = x + width - LABEL_PADDING_X;
+	const availableWidth = width - LABEL_PADDING_X * 2;
+
+	if (width >= MIN_WIDTH_FOR_NAME_AND_DURATION) {
+		const duration = formatDuration(span.durationNano);
+		const durationWidth = ctx.measureText(duration).width;
+		const minGap = 6;
+		const nameSpace = availableWidth - durationWidth - minGap;
+
+		// Duration right-aligned
+		ctx.textAlign = 'right';
+		ctx.fillText(duration, rightX, textY);
+
+		// Name left-aligned, truncated to fit remaining space
+		if (nameSpace > 20) {
+			ctx.textAlign = 'left';
+			ctx.fillText(truncateText(ctx, name, nameSpace), leftX, textY);
+		}
+	} else {
+		// Name only, truncated to fit
+		ctx.textAlign = 'left';
+		ctx.fillText(truncateText(ctx, name, availableWidth), leftX, textY);
+	}
+
+	ctx.restore();
+}
+
+function truncateText(
+	ctx: CanvasRenderingContext2D,
+	text: string,
+	maxWidth: number,
+): string {
+	const ellipsis = '...';
+	const ellipsisWidth = ctx.measureText(ellipsis).width;
+
+	if (ctx.measureText(text).width <= maxWidth) {
+		return text;
+	}
+
+	let lo = 0;
+	let hi = text.length;
+	while (lo < hi) {
+		const mid = Math.ceil((lo + hi) / 2);
+		if (ctx.measureText(text.slice(0, mid)).width + ellipsisWidth <= maxWidth) {
+			lo = mid;
+		} else {
+			hi = mid - 1;
+		}
+	}
+
+	return lo > 0 ? `${text.slice(0, lo)}${ellipsis}` : ellipsis;
+}

frontend/src/pages/TraceDetailsV3/index.tsx

@@ -0,0 +1,37 @@
+import {
+	ResizableHandle,
+	ResizablePanel,
+	ResizablePanelGroup,
+} from '@signozhq/resizable';
+
+import TraceDetailsHeader from './TraceDetailsHeader/TraceDetailsHeader';
+import TraceFlamegraph from './TraceFlamegraph/TraceFlamegraph';
+
+function TraceDetailsV3(): JSX.Element {
+	return (
+		<div
+			style={{
+				height: 'calc(100vh - 90px)',
+				display: 'flex',
+				flexDirection: 'column',
+			}}
+		>
+			<TraceDetailsHeader />
+			<ResizablePanelGroup
+				direction="vertical"
+				autoSaveId="trace-details-v3-layout"
+				style={{ flex: 1 }}
+			>
+				<ResizablePanel defaultSize={40} minSize={20} maxSize={80}>
+					<TraceFlamegraph />
+				</ResizablePanel>
+				<ResizableHandle withHandle />
+				<ResizablePanel defaultSize={60} minSize={20}>
+					<div />
+				</ResizablePanel>
+			</ResizablePanelGroup>
+		</div>
+	);
+}
+
+export default TraceDetailsV3;

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

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

frontend/src/providers/Dashboard/Dashboard.tsx

@@ -80,8 +80,6 @@ export const DashboardContext = createContext<IDashboardContext>({
 	updateLocalStorageDashboardVariables: () => {},
 	dashboardQueryRangeCalled: false,
 	setDashboardQueryRangeCalled: () => {},
-	selectedRowWidgetId: '',
-	setSelectedRowWidgetId: () => {},
 	isDashboardFetching: false,
 	columnWidths: {},
 	setColumnWidths: () => {},
@@ -101,10 +99,6 @@ export function DashboardProvider({
 
 	const [isDashboardLocked, setIsDashboardLocked] = useState<boolean>(false);
 
-	const [selectedRowWidgetId, setSelectedRowWidgetId] = useState<string | null>(
-		null,
-	);
-
 	const [
 		dashboardQueryRangeCalled,
 		setDashboardQueryRangeCalled,
@@ -467,8 +461,6 @@ export function DashboardProvider({
 			updateLocalStorageDashboardVariables,
 			dashboardQueryRangeCalled,
 			setDashboardQueryRangeCalled,
-			selectedRowWidgetId,
-			setSelectedRowWidgetId,
 			isDashboardFetching,
 			columnWidths,
 			setColumnWidths,
@@ -487,8 +479,6 @@ export function DashboardProvider({
 			currentDashboard,
 			dashboardQueryRangeCalled,
 			setDashboardQueryRangeCalled,
-			selectedRowWidgetId,
-			setSelectedRowWidgetId,
 			isDashboardFetching,
 			columnWidths,
 			setColumnWidths,

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

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

frontend/src/providers/Dashboard/types.ts

@@ -39,8 +39,6 @@ export interface IDashboardContext {
 	) => void;
 	dashboardQueryRangeCalled: boolean;
 	setDashboardQueryRangeCalled: (value: boolean) => void;
-	selectedRowWidgetId: string | null;
-	setSelectedRowWidgetId: React.Dispatch<React.SetStateAction<string | null>>;
 	isDashboardFetching: boolean;
 	columnWidths: WidgetColumnWidths;
 	setColumnWidths: React.Dispatch<React.SetStateAction<WidgetColumnWidths>>;

frontend/src/tests/test-utils.tsx

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

go.mod

@@ -16,7 +16,6 @@ require (
 	github.com/coreos/go-oidc/v3 v3.17.0
 	github.com/dgraph-io/ristretto/v2 v2.3.0
 	github.com/dustin/go-humanize v1.0.1
-	github.com/emersion/go-smtp v0.24.0
 	github.com/gin-gonic/gin v1.11.0
 	github.com/go-co-op/gocron v1.30.1
 	github.com/go-openapi/runtime v0.29.2
@@ -109,7 +108,6 @@ require (
 	github.com/bytedance/gopkg v0.1.3 // indirect
 	github.com/bytedance/sonic/loader v0.3.0 // indirect
 	github.com/cloudwego/base64x v0.1.6 // indirect
-	github.com/emersion/go-sasl v0.0.0-20241020182733-b788ff22d5a6 // indirect
 	github.com/gabriel-vasile/mimetype v1.4.8 // indirect
 	github.com/go-openapi/swag/cmdutils v0.25.4 // indirect
 	github.com/go-openapi/swag/conv v0.25.4 // indirect
@@ -163,7 +161,7 @@ require (
 	github.com/ClickHouse/ch-go v0.67.0 // indirect
 	github.com/Masterminds/squirrel v1.5.4 // indirect
 	github.com/Yiling-J/theine-go v0.6.2 // indirect
-	github.com/alecthomas/units v0.0.0-20240927000941-0f3dac36c52b
+	github.com/alecthomas/units v0.0.0-20240927000941-0f3dac36c52b // indirect
 	github.com/andybalholm/brotli v1.2.0 // indirect
 	github.com/armon/go-metrics v0.4.1 // indirect
 	github.com/beevik/etree v1.1.0 // indirect

pkg/alertmanager/alertmanagernotify/email/email.go

@@ -1,430 +0,0 @@
-package email
-
-import (
-	"bytes"
-	"context"
-	"crypto/tls"
-	"fmt"
-	"log/slog"
-	"math/rand"
-	"mime"
-	"mime/multipart"
-	"mime/quotedprintable"
-	"net"
-	"net/mail"
-	"net/smtp"
-	"net/textproto"
-	"os"
-	"strings"
-	"sync"
-	"time"
-
-	"github.com/SigNoz/signoz/pkg/errors"
-	commoncfg "github.com/prometheus/common/config"
-
-	"github.com/prometheus/alertmanager/config"
-	"github.com/prometheus/alertmanager/notify"
-	"github.com/prometheus/alertmanager/template"
-	"github.com/prometheus/alertmanager/types"
-)
-
-const (
-	Integration = "email"
-)
-
-// Email implements a Notifier for email notifications.
-type Email struct {
-	conf     *config.EmailConfig
-	tmpl     *template.Template
-	logger   *slog.Logger
-	hostname string
-}
-
-var errNoAuthUserNameConfigured = errors.NewInternalf(errors.CodeInternal, "no auth username configured")
-
-// New returns a new Email notifier.
-func New(c *config.EmailConfig, t *template.Template, l *slog.Logger) *Email {
-	if _, ok := c.Headers["Subject"]; !ok {
-		c.Headers["Subject"] = config.DefaultEmailSubject
-	}
-	if _, ok := c.Headers["To"]; !ok {
-		c.Headers["To"] = c.To
-	}
-	if _, ok := c.Headers["From"]; !ok {
-		c.Headers["From"] = c.From
-	}
-
-	h, err := os.Hostname()
-	// If we can't get the hostname, we'll use localhost
-	if err != nil {
-		h = "localhost.localdomain"
-	}
-	return &Email{conf: c, tmpl: t, logger: l, hostname: h}
-}
-
-// auth resolves a string of authentication mechanisms.
-func (n *Email) auth(mechs string) (smtp.Auth, error) {
-	username := n.conf.AuthUsername
-
-	// If no username is set, return custom error which can be ignored if needed.
-	if n.conf.AuthUsername == "" {
-		return nil, errNoAuthUserNameConfigured
-	}
-
-	err := &types.MultiError{}
-	for mech := range strings.SplitSeq(mechs, " ") {
-		switch mech {
-		case "CRAM-MD5":
-			secret, secretErr := n.getAuthSecret()
-			if secretErr != nil {
-				err.Add(secretErr)
-				continue
-			}
-			if secret == "" {
-				err.Add(errors.NewInternalf(errors.CodeInternal, "missing secret for CRAM-MD5 auth mechanism"))
-				continue
-			}
-			return smtp.CRAMMD5Auth(username, secret), nil
-
-		case "PLAIN":
-			password, passwordErr := n.getPassword()
-			if passwordErr != nil {
-				err.Add(passwordErr)
-				continue
-			}
-			if password == "" {
-				err.Add(errors.NewInternalf(errors.CodeInternal, "missing password for PLAIN auth mechanism"))
-				continue
-			}
-			identity := n.conf.AuthIdentity
-
-			return smtp.PlainAuth(identity, username, password, n.conf.Smarthost.Host), nil
-		case "LOGIN":
-			password, passwordErr := n.getPassword()
-			if passwordErr != nil {
-				err.Add(passwordErr)
-				continue
-			}
-			if password == "" {
-				err.Add(errors.NewInternalf(errors.CodeInternal, "missing password for LOGIN auth mechanism"))
-				continue
-			}
-			return LoginAuth(username, password), nil
-		}
-	}
-	if err.Len() == 0 {
-		err.Add(errors.NewInternalf(errors.CodeInternal, "unknown auth mechanism: %s", mechs))
-	}
-	return nil, err
-}
-
-// Notify implements the Notifier interface.
-func (n *Email) Notify(ctx context.Context, as ...*types.Alert) (bool, error) {
-	var (
-		c       *smtp.Client
-		conn    net.Conn
-		err     error
-		success = false
-	)
-	// Determine whether to use Implicit TLS
-	var useImplicitTLS bool
-	if n.conf.ForceImplicitTLS != nil {
-		useImplicitTLS = *n.conf.ForceImplicitTLS
-	} else {
-		// Default logic: port 465 uses implicit TLS (backward compatibility)
-		useImplicitTLS = n.conf.Smarthost.Port == "465"
-	}
-
-	if useImplicitTLS {
-		tlsConfig, err := commoncfg.NewTLSConfig(n.conf.TLSConfig)
-		if err != nil {
-			return false, errors.WrapInternalf(err, errors.CodeInternal, "parse TLS configuration")
-		}
-		if tlsConfig.ServerName == "" {
-			tlsConfig.ServerName = n.conf.Smarthost.Host
-		}
-
-		conn, err = tls.Dial("tcp", n.conf.Smarthost.String(), tlsConfig)
-		if err != nil {
-			return true, errors.WrapInternalf(err, errors.CodeInternal, "establish TLS connection to server")
-		}
-	} else {
-		var (
-			d   = net.Dialer{}
-			err error
-		)
-		conn, err = d.DialContext(ctx, "tcp", n.conf.Smarthost.String())
-		if err != nil {
-			return true, errors.WrapInternalf(err, errors.CodeInternal, "establish connection to server")
-		}
-	}
-	c, err = smtp.NewClient(conn, n.conf.Smarthost.Host)
-	if err != nil {
-		conn.Close()
-		return true, errors.WrapInternalf(err, errors.CodeInternal, "create SMTP client")
-	}
-	defer func() {
-		// Try to clean up after ourselves but don't log anything if something has failed.
-		if err := c.Quit(); success && err != nil {
-			n.logger.WarnContext(ctx, "failed to close SMTP connection", "err", err)
-		}
-	}()
-
-	if n.conf.Hello != "" {
-		err = c.Hello(n.conf.Hello)
-		if err != nil {
-			return true, errors.WrapInternalf(err, errors.CodeInternal, "send EHLO command")
-		}
-	}
-
-	// Global Config guarantees RequireTLS is not nil.
-	if *n.conf.RequireTLS && !useImplicitTLS {
-		if ok, _ := c.Extension("STARTTLS"); !ok {
-			return true, errors.WrapInternalf(err, errors.CodeInternal, "'require_tls' is true (default) but %q does not advertise the STARTTLS extension", n.conf.Smarthost)
-		}
-
-		tlsConf, err := commoncfg.NewTLSConfig(n.conf.TLSConfig)
-		if err != nil {
-			return false, errors.WrapInternalf(err, errors.CodeInternal, "parse TLS configuration")
-		}
-		if tlsConf.ServerName == "" {
-			tlsConf.ServerName = n.conf.Smarthost.Host
-		}
-
-		if err := c.StartTLS(tlsConf); err != nil {
-			return true, errors.WrapInternalf(err, errors.CodeInternal, "send STARTTLS command")
-		}
-	}
-
-	if ok, mech := c.Extension("AUTH"); ok {
-		auth, err := n.auth(mech)
-		if err != nil && err != errNoAuthUserNameConfigured {
-			return true, errors.WrapInternalf(err, errors.CodeInternal, "find auth mechanism")
-		} else if err == errNoAuthUserNameConfigured {
-			n.logger.DebugContext(ctx, "no auth username configured. Attempting to send email without authenticating")
-		}
-		if auth != nil {
-			if err := c.Auth(auth); err != nil {
-				return true, errors.WrapInternalf(err, errors.CodeInternal, "%T auth", auth)
-			}
-		}
-	}
-
-	var (
-		tmplErr error
-		data    = notify.GetTemplateData(ctx, n.tmpl, as, n.logger)
-		tmpl    = notify.TmplText(n.tmpl, data, &tmplErr)
-	)
-	from := tmpl(n.conf.From)
-	if tmplErr != nil {
-		return false, errors.WrapInternalf(tmplErr, errors.CodeInternal, "execute 'from' template")
-	}
-	to := tmpl(n.conf.To)
-	if tmplErr != nil {
-		return false, errors.WrapInternalf(tmplErr, errors.CodeInternal, "execute 'to' template")
-	}
-
-	addrs, err := mail.ParseAddressList(from)
-	if err != nil {
-		return false, errors.WrapInternalf(err, errors.CodeInternal, "parse 'from' addresses")
-	}
-	if len(addrs) != 1 {
-		return false, errors.NewInternalf(errors.CodeInternal, "must be exactly one 'from' address (got: %d)", len(addrs))
-	}
-	if err = c.Mail(addrs[0].Address); err != nil {
-		return true, errors.WrapInternalf(err, errors.CodeInternal, "send MAIL command")
-	}
-	addrs, err = mail.ParseAddressList(to)
-	if err != nil {
-		return false, errors.WrapInternalf(err, errors.CodeInternal, "parse 'to' addresses")
-	}
-	for _, addr := range addrs {
-		if err = c.Rcpt(addr.Address); err != nil {
-			return true, errors.WrapInternalf(err, errors.CodeInternal, "send RCPT command")
-		}
-	}
-
-	// Send the email headers and body.
-	message, err := c.Data()
-	if err != nil {
-		return true, errors.WrapInternalf(err, errors.CodeInternal, "send DATA command")
-	}
-	closeOnce := sync.OnceValue(func() error {
-		return message.Close()
-	})
-	// Close the message when this method exits in order to not leak resources. Even though we're calling this explicitly
-	// further down, the method may exit before then.
-	defer func() {
-		// If we try close an already-closed writer, it'll send a subsequent request to the server which is invalid.
-		_ = closeOnce()
-	}()
-
-	buffer := &bytes.Buffer{}
-	for header, t := range n.conf.Headers {
-		value, err := n.tmpl.ExecuteTextString(t, data)
-		if err != nil {
-			return false, errors.WrapInternalf(err, errors.CodeInternal, "execute %q header template", header)
-		}
-		fmt.Fprintf(buffer, "%s: %s\r\n", header, mime.QEncoding.Encode("utf-8", value))
-	}
-
-	if _, ok := n.conf.Headers["Message-Id"]; !ok {
-		fmt.Fprintf(buffer, "Message-Id: %s\r\n", fmt.Sprintf("<%d.%d@%s>", time.Now().UnixNano(), rand.Uint64(), n.hostname))
-	}
-
-	if n.conf.Threading.Enabled {
-		key, err := notify.ExtractGroupKey(ctx)
-		if err != nil {
-			return false, err
-		}
-		// Add threading headers. All notifications for the same alert group
-		// (identified by key hash) are threaded together.
-		threadBy := ""
-		if n.conf.Threading.ThreadByDate != "none" {
-			// ThreadByDate is 'daily':
-			// Use current date so all mails for this alert today thread together.
-			threadBy = time.Now().Format("2006-01-02")
-		}
-		keyHash := key.Hash()
-		if len(keyHash) > 16 {
-			keyHash = keyHash[:16]
-		}
-		// The thread root ID is a Message-ID that doesn't correspond to
-		// any actual email. Email clients following the (commonly used) JWZ
-		// algorithm will create a dummy container to group these messages.
-		threadRootID := fmt.Sprintf("<alert-%s-%s@alertmanager>", keyHash, threadBy)
-		fmt.Fprintf(buffer, "References: %s\r\n", threadRootID)
-		fmt.Fprintf(buffer, "In-Reply-To: %s\r\n", threadRootID)
-	}
-
-	multipartBuffer := &bytes.Buffer{}
-	multipartWriter := multipart.NewWriter(multipartBuffer)
-
-	fmt.Fprintf(buffer, "Date: %s\r\n", time.Now().Format(time.RFC1123Z))
-	fmt.Fprintf(buffer, "Content-Type: multipart/alternative;  boundary=%s\r\n", multipartWriter.Boundary())
-	fmt.Fprintf(buffer, "MIME-Version: 1.0\r\n\r\n")
-
-	// TODO: Add some useful headers here, such as URL of the alertmanager
-	// and active/resolved.
-	_, err = message.Write(buffer.Bytes())
-	if err != nil {
-		return false, errors.WrapInternalf(err, errors.CodeInternal, "write headers")
-	}
-
-	if len(n.conf.Text) > 0 {
-		// Text template
-		w, err := multipartWriter.CreatePart(textproto.MIMEHeader{
-			"Content-Transfer-Encoding": {"quoted-printable"},
-			"Content-Type":              {"text/plain; charset=UTF-8"},
-		})
-		if err != nil {
-			return false, errors.WrapInternalf(err, errors.CodeInternal, "create part for text template")
-		}
-		body, err := n.tmpl.ExecuteTextString(n.conf.Text, data)
-		if err != nil {
-			return false, errors.WrapInternalf(err, errors.CodeInternal, "execute text template")
-		}
-		qw := quotedprintable.NewWriter(w)
-		_, err = qw.Write([]byte(body))
-		if err != nil {
-			return true, errors.WrapInternalf(err, errors.CodeInternal, "write text part")
-		}
-		err = qw.Close()
-		if err != nil {
-			return true, errors.WrapInternalf(err, errors.CodeInternal, "close text part")
-		}
-	}
-
-	if len(n.conf.HTML) > 0 {
-		// Html template
-		// Preferred alternative placed last per section 5.1.4 of RFC 2046
-		// https://www.ietf.org/rfc/rfc2046.txt
-		w, err := multipartWriter.CreatePart(textproto.MIMEHeader{
-			"Content-Transfer-Encoding": {"quoted-printable"},
-			"Content-Type":              {"text/html; charset=UTF-8"},
-		})
-		if err != nil {
-			return false, errors.WrapInternalf(err, errors.CodeInternal, "create part for html template")
-		}
-		body, err := n.tmpl.ExecuteHTMLString(n.conf.HTML, data)
-		if err != nil {
-			return false, errors.WrapInternalf(err, errors.CodeInternal, "execute html template")
-		}
-		qw := quotedprintable.NewWriter(w)
-		_, err = qw.Write([]byte(body))
-		if err != nil {
-			return true, errors.WrapInternalf(err, errors.CodeInternal, "write HTML part")
-		}
-		err = qw.Close()
-		if err != nil {
-			return true, errors.WrapInternalf(err, errors.CodeInternal, "close HTML part")
-		}
-	}
-
-	err = multipartWriter.Close()
-	if err != nil {
-		return false, errors.WrapInternalf(err, errors.CodeInternal, "close multipartWriter")
-	}
-
-	_, err = message.Write(multipartBuffer.Bytes())
-	if err != nil {
-		return false, errors.WrapInternalf(err, errors.CodeInternal, "write body buffer")
-	}
-
-	// Complete the message and await response.
-	if err = closeOnce(); err != nil {
-		return true, errors.WrapInternalf(err, errors.CodeInternal, "delivery failure")
-	}
-
-	success = true
-	return false, nil
-}
-
-type loginAuth struct {
-	username, password string
-}
-
-func LoginAuth(username, password string) smtp.Auth {
-	return &loginAuth{username, password}
-}
-
-func (a *loginAuth) Start(server *smtp.ServerInfo) (string, []byte, error) {
-	return "LOGIN", []byte{}, nil
-}
-
-// Used for AUTH LOGIN. (Maybe password should be encrypted).
-func (a *loginAuth) Next(fromServer []byte, more bool) ([]byte, error) {
-	if more {
-		switch strings.ToLower(string(fromServer)) {
-		case "username:":
-			return []byte(a.username), nil
-		case "password:":
-			return []byte(a.password), nil
-		default:
-			return nil, errors.NewInternalf(errors.CodeInternal, "unexpected server challenge")
-		}
-	}
-	return nil, nil
-}
-
-func (n *Email) getPassword() (string, error) {
-	if len(n.conf.AuthPasswordFile) > 0 {
-		content, err := os.ReadFile(n.conf.AuthPasswordFile)
-		if err != nil {
-			return "", errors.NewInternalf(errors.CodeInternal, "could not read %s: %v", n.conf.AuthPasswordFile, err)
-		}
-		return strings.TrimSpace(string(content)), nil
-	}
-	return string(n.conf.AuthPassword), nil
-}
-
-func (n *Email) getAuthSecret() (string, error) {
-	if len(n.conf.AuthSecretFile) > 0 {
-		content, err := os.ReadFile(n.conf.AuthSecretFile)
-		if err != nil {
-			return "", errors.NewInternalf(errors.CodeInternal, "could not read %s: %v", n.conf.AuthSecretFile, err)
-		}
-		return string(content), nil
-	}
-	return string(n.conf.AuthSecret), nil
-}

pkg/alertmanager/alertmanagernotify/email/testdata/auth-local.yml

@@ -1,4 +0,0 @@
-smarthost: 127.0.0.1:1026
-server: http://127.0.0.1:1081/
-username: user
-password: pass

pkg/alertmanager/alertmanagernotify/email/testdata/auth.yml

@@ -1,4 +0,0 @@
-smarthost: maildev-auth:1025
-server: http://maildev-auth:1080/
-username: user
-password: pass

pkg/alertmanager/alertmanagernotify/email/testdata/noauth-local.yml

@@ -1,2 +0,0 @@
-smarthost: 127.0.0.1:1025
-server: http://127.0.0.1:1080/

pkg/alertmanager/alertmanagernotify/email/testdata/noauth.yml

@@ -1,2 +0,0 @@
-smarthost: maildev-noauth:1025
-server: http://maildev-noauth:1080/

pkg/alertmanager/alertmanagernotify/msteamsv2/msteamsv2.go

@@ -27,10 +27,6 @@ const (
 	colorGrey  = "Warning"
 )
 
-const (
-	Integration = "msteamsv2"
-)
-
 type Notifier struct {
 	conf         *config.MSTeamsV2Config
 	titleLink    string
@@ -91,7 +87,7 @@ type teamsMessage struct {
 
 // New returns a new notifier that uses the Microsoft Teams Power Platform connector.
 func New(c *config.MSTeamsV2Config, t *template.Template, titleLink string, l *slog.Logger, httpOpts ...commoncfg.HTTPClientOption) (*Notifier, error) {
-	client, err := notify.NewClientWithTracing(*c.HTTPConfig, Integration, httpOpts...)
+	client, err := commoncfg.NewClientFromConfig(*c.HTTPConfig, "msteamsv2", httpOpts...)
 	if err != nil {
 		return nil, err
 	}

pkg/alertmanager/alertmanagernotify/opsgenie/api_key_file

@@ -1,2 +0,0 @@
-my_secret_api_key
-

pkg/alertmanager/alertmanagernotify/opsgenie/opsgenie.go

@@ -1,290 +0,0 @@
-package opsgenie
-
-import (
-	"bytes"
-	"context"
-	"encoding/json"
-	"fmt"
-	"log/slog"
-	"maps"
-	"net/http"
-	"os"
-	"strings"
-
-	"github.com/SigNoz/signoz/pkg/errors"
-	commoncfg "github.com/prometheus/common/config"
-	"github.com/prometheus/common/model"
-
-	"github.com/prometheus/alertmanager/config"
-	"github.com/prometheus/alertmanager/notify"
-	"github.com/prometheus/alertmanager/template"
-	"github.com/prometheus/alertmanager/types"
-)
-
-const (
-	Integration = "opsgenie"
-)
-
-// https://docs.opsgenie.com/docs/alert-api - 130 characters meaning runes.
-const maxMessageLenRunes = 130
-
-// Notifier implements a Notifier for OpsGenie notifications.
-type Notifier struct {
-	conf    *config.OpsGenieConfig
-	tmpl    *template.Template
-	logger  *slog.Logger
-	client  *http.Client
-	retrier *notify.Retrier
-}
-
-// New returns a new OpsGenie notifier.
-func New(c *config.OpsGenieConfig, t *template.Template, l *slog.Logger, httpOpts ...commoncfg.HTTPClientOption) (*Notifier, error) {
-	client, err := notify.NewClientWithTracing(*c.HTTPConfig, Integration, httpOpts...)
-	if err != nil {
-		return nil, err
-	}
-	return &Notifier{
-		conf:    c,
-		tmpl:    t,
-		logger:  l,
-		client:  client,
-		retrier: &notify.Retrier{RetryCodes: []int{http.StatusTooManyRequests}},
-	}, nil
-}
-
-type opsGenieCreateMessage struct {
-	Alias       string                           `json:"alias"`
-	Message     string                           `json:"message"`
-	Description string                           `json:"description,omitempty"`
-	Details     map[string]string                `json:"details"`
-	Source      string                           `json:"source"`
-	Responders  []opsGenieCreateMessageResponder `json:"responders,omitempty"`
-	Tags        []string                         `json:"tags,omitempty"`
-	Note        string                           `json:"note,omitempty"`
-	Priority    string                           `json:"priority,omitempty"`
-	Entity      string                           `json:"entity,omitempty"`
-	Actions     []string                         `json:"actions,omitempty"`
-}
-
-type opsGenieCreateMessageResponder struct {
-	ID       string `json:"id,omitempty"`
-	Name     string `json:"name,omitempty"`
-	Username string `json:"username,omitempty"`
-	Type     string `json:"type"` // team, user, escalation, schedule etc.
-}
-
-type opsGenieCloseMessage struct {
-	Source string `json:"source"`
-}
-
-type opsGenieUpdateMessageMessage struct {
-	Message string `json:"message,omitempty"`
-}
-
-type opsGenieUpdateDescriptionMessage struct {
-	Description string `json:"description,omitempty"`
-}
-
-// Notify implements the Notifier interface.
-func (n *Notifier) Notify(ctx context.Context, as ...*types.Alert) (bool, error) {
-	requests, retry, err := n.createRequests(ctx, as...)
-	if err != nil {
-		return retry, err
-	}
-
-	for _, req := range requests {
-		req.Header.Set("User-Agent", notify.UserAgentHeader)
-		resp, err := n.client.Do(req) //nolint:bodyclose
-		if err != nil {
-			return true, err
-		}
-		shouldRetry, err := n.retrier.Check(resp.StatusCode, resp.Body)
-		notify.Drain(resp)
-		if err != nil {
-			return shouldRetry, notify.NewErrorWithReason(notify.GetFailureReasonFromStatusCode(resp.StatusCode), err)
-		}
-	}
-	return true, nil
-}
-
-// Like Split but filter out empty strings.
-func safeSplit(s, sep string) []string {
-	a := strings.Split(strings.TrimSpace(s), sep)
-	b := a[:0]
-	for _, x := range a {
-		if x != "" {
-			b = append(b, x)
-		}
-	}
-	return b
-}
-
-// Create requests for a list of alerts.
-func (n *Notifier) createRequests(ctx context.Context, as ...*types.Alert) ([]*http.Request, bool, error) {
-	key, err := notify.ExtractGroupKey(ctx)
-	if err != nil {
-		return nil, false, err
-	}
-	logger := n.logger.With("group_key", key)
-	logger.DebugContext(ctx, "extracted group key")
-
-	data := notify.GetTemplateData(ctx, n.tmpl, as, logger)
-
-	tmpl := notify.TmplText(n.tmpl, data, &err)
-
-	details := make(map[string]string)
-
-	maps.Copy(details, data.CommonLabels)
-
-	for k, v := range n.conf.Details {
-		details[k] = tmpl(v)
-	}
-
-	requests := []*http.Request{}
-
-	var (
-		alias  = key.Hash()
-		alerts = types.Alerts(as...)
-	)
-	switch alerts.Status() {
-	case model.AlertResolved:
-		resolvedEndpointURL := n.conf.APIURL.Copy()
-		resolvedEndpointURL.Path += fmt.Sprintf("v2/alerts/%s/close", alias)
-		q := resolvedEndpointURL.Query()
-		q.Set("identifierType", "alias")
-		resolvedEndpointURL.RawQuery = q.Encode()
-		msg := &opsGenieCloseMessage{Source: tmpl(n.conf.Source)}
-		var buf bytes.Buffer
-		if err := json.NewEncoder(&buf).Encode(msg); err != nil {
-			return nil, false, err
-		}
-		req, err := http.NewRequest("POST", resolvedEndpointURL.String(), &buf)
-		if err != nil {
-			return nil, true, err
-		}
-		requests = append(requests, req.WithContext(ctx))
-	default:
-		message, truncated := notify.TruncateInRunes(tmpl(n.conf.Message), maxMessageLenRunes)
-		if truncated {
-			logger.WarnContext(ctx, "Truncated message", "alert", key, "max_runes", maxMessageLenRunes)
-		}
-
-		createEndpointURL := n.conf.APIURL.Copy()
-		createEndpointURL.Path += "v2/alerts"
-
-		var responders []opsGenieCreateMessageResponder
-		for _, r := range n.conf.Responders {
-			responder := opsGenieCreateMessageResponder{
-				ID:       tmpl(r.ID),
-				Name:     tmpl(r.Name),
-				Username: tmpl(r.Username),
-				Type:     tmpl(r.Type),
-			}
-
-			if responder == (opsGenieCreateMessageResponder{}) {
-				// Filter out empty responders. This is useful if you want to fill
-				// responders dynamically from alert's common labels.
-				continue
-			}
-
-			if responder.Type == "teams" {
-				teams := safeSplit(responder.Name, ",")
-				for _, team := range teams {
-					newResponder := opsGenieCreateMessageResponder{
-						Name: tmpl(team),
-						Type: tmpl("team"),
-					}
-					responders = append(responders, newResponder)
-				}
-				continue
-			}
-
-			responders = append(responders, responder)
-		}
-
-		msg := &opsGenieCreateMessage{
-			Alias:       alias,
-			Message:     message,
-			Description: tmpl(n.conf.Description),
-			Details:     details,
-			Source:      tmpl(n.conf.Source),
-			Responders:  responders,
-			Tags:        safeSplit(tmpl(n.conf.Tags), ","),
-			Note:        tmpl(n.conf.Note),
-			Priority:    tmpl(n.conf.Priority),
-			Entity:      tmpl(n.conf.Entity),
-			Actions:     safeSplit(tmpl(n.conf.Actions), ","),
-		}
-		var buf bytes.Buffer
-		if err := json.NewEncoder(&buf).Encode(msg); err != nil {
-			return nil, false, err
-		}
-		req, err := http.NewRequest("POST", createEndpointURL.String(), &buf)
-		if err != nil {
-			return nil, true, err
-		}
-		requests = append(requests, req.WithContext(ctx))
-
-		if n.conf.UpdateAlerts {
-			updateMessageEndpointURL := n.conf.APIURL.Copy()
-			updateMessageEndpointURL.Path += fmt.Sprintf("v2/alerts/%s/message", alias)
-			q := updateMessageEndpointURL.Query()
-			q.Set("identifierType", "alias")
-			updateMessageEndpointURL.RawQuery = q.Encode()
-			updateMsgMsg := &opsGenieUpdateMessageMessage{
-				Message: msg.Message,
-			}
-			var updateMessageBuf bytes.Buffer
-			if err := json.NewEncoder(&updateMessageBuf).Encode(updateMsgMsg); err != nil {
-				return nil, false, err
-			}
-			req, err := http.NewRequest("PUT", updateMessageEndpointURL.String(), &updateMessageBuf)
-			if err != nil {
-				return nil, true, err
-			}
-			requests = append(requests, req)
-
-			updateDescriptionEndpointURL := n.conf.APIURL.Copy()
-			updateDescriptionEndpointURL.Path += fmt.Sprintf("v2/alerts/%s/description", alias)
-			q = updateDescriptionEndpointURL.Query()
-			q.Set("identifierType", "alias")
-			updateDescriptionEndpointURL.RawQuery = q.Encode()
-			updateDescMsg := &opsGenieUpdateDescriptionMessage{
-				Description: msg.Description,
-			}
-
-			var updateDescriptionBuf bytes.Buffer
-			if err := json.NewEncoder(&updateDescriptionBuf).Encode(updateDescMsg); err != nil {
-				return nil, false, err
-			}
-			req, err = http.NewRequest("PUT", updateDescriptionEndpointURL.String(), &updateDescriptionBuf)
-			if err != nil {
-				return nil, true, err
-			}
-			requests = append(requests, req.WithContext(ctx))
-		}
-	}
-
-	var apiKey string
-	if n.conf.APIKey != "" {
-		apiKey = tmpl(string(n.conf.APIKey))
-	} else {
-		content, err := os.ReadFile(n.conf.APIKeyFile)
-		if err != nil {
-			return nil, false, errors.WrapInternalf(err, errors.CodeInternal, "read key_file error")
-		}
-		apiKey = tmpl(string(content))
-		apiKey = strings.TrimSpace(string(apiKey))
-	}
-
-	if err != nil {
-		return nil, false, errors.WrapInternalf(err, errors.CodeInternal, "templating error")
-	}
-
-	for _, req := range requests {
-		req.Header.Set("Content-Type", "application/json")
-		req.Header.Set("Authorization", fmt.Sprintf("GenieKey %s", apiKey))
-	}
-
-	return requests, true, nil
-}

pkg/alertmanager/alertmanagernotify/opsgenie/opsgenie_test.go

@@ -1,333 +0,0 @@
-package opsgenie
-
-import (
-	"context"
-	"fmt"
-	"io"
-	"net/http"
-	"net/url"
-	"os"
-	"testing"
-	"time"
-
-	commoncfg "github.com/prometheus/common/config"
-	"github.com/prometheus/common/model"
-	"github.com/prometheus/common/promslog"
-	"github.com/stretchr/testify/require"
-
-	"github.com/prometheus/alertmanager/config"
-	"github.com/prometheus/alertmanager/notify"
-	"github.com/prometheus/alertmanager/notify/test"
-	"github.com/prometheus/alertmanager/types"
-)
-
-func TestOpsGenieRetry(t *testing.T) {
-	notifier, err := New(
-		&config.OpsGenieConfig{
-			HTTPConfig: &commoncfg.HTTPClientConfig{},
-		},
-		test.CreateTmpl(t),
-		promslog.NewNopLogger(),
-	)
-	require.NoError(t, err)
-
-	retryCodes := append(test.DefaultRetryCodes(), http.StatusTooManyRequests)
-	for statusCode, expected := range test.RetryTests(retryCodes) {
-		actual, _ := notifier.retrier.Check(statusCode, nil)
-		require.Equal(t, expected, actual, "error on status %d", statusCode)
-	}
-}
-
-func TestOpsGenieRedactedURL(t *testing.T) {
-	ctx, u, fn := test.GetContextWithCancelingURL()
-	defer fn()
-
-	key := "key"
-	notifier, err := New(
-		&config.OpsGenieConfig{
-			APIURL:     &config.URL{URL: u},
-			APIKey:     config.Secret(key),
-			HTTPConfig: &commoncfg.HTTPClientConfig{},
-		},
-		test.CreateTmpl(t),
-		promslog.NewNopLogger(),
-	)
-	require.NoError(t, err)
-
-	test.AssertNotifyLeaksNoSecret(ctx, t, notifier, key)
-}
-
-func TestGettingOpsGegineApikeyFromFile(t *testing.T) {
-	ctx, u, fn := test.GetContextWithCancelingURL()
-	defer fn()
-
-	key := "key"
-
-	f, err := os.CreateTemp(t.TempDir(), "opsgenie_test")
-	require.NoError(t, err, "creating temp file failed")
-	_, err = f.WriteString(key)
-	require.NoError(t, err, "writing to temp file failed")
-
-	notifier, err := New(
-		&config.OpsGenieConfig{
-			APIURL:     &config.URL{URL: u},
-			APIKeyFile: f.Name(),
-			HTTPConfig: &commoncfg.HTTPClientConfig{},
-		},
-		test.CreateTmpl(t),
-		promslog.NewNopLogger(),
-	)
-	require.NoError(t, err)
-
-	test.AssertNotifyLeaksNoSecret(ctx, t, notifier, key)
-}
-
-func TestOpsGenie(t *testing.T) {
-	u, err := url.Parse("https://opsgenie/api")
-	if err != nil {
-		t.Fatalf("failed to parse URL: %v", err)
-	}
-	logger := promslog.NewNopLogger()
-	tmpl := test.CreateTmpl(t)
-
-	for _, tc := range []struct {
-		title string
-		cfg   *config.OpsGenieConfig
-
-		expectedEmptyAlertBody string
-		expectedBody           string
-	}{
-		{
-			title: "config without details",
-			cfg: &config.OpsGenieConfig{
-				NotifierConfig: config.NotifierConfig{
-					VSendResolved: true,
-				},
-				Message:     `{{ .CommonLabels.Message }}`,
-				Description: `{{ .CommonLabels.Description }}`,
-				Source:      `{{ .CommonLabels.Source }}`,
-				Responders: []config.OpsGenieConfigResponder{
-					{
-						Name: `{{ .CommonLabels.ResponderName1 }}`,
-						Type: `{{ .CommonLabels.ResponderType1 }}`,
-					},
-					{
-						Name: `{{ .CommonLabels.ResponderName2 }}`,
-						Type: `{{ .CommonLabels.ResponderType2 }}`,
-					},
-				},
-				Tags:       `{{ .CommonLabels.Tags }}`,
-				Note:       `{{ .CommonLabels.Note }}`,
-				Priority:   `{{ .CommonLabels.Priority }}`,
-				Entity:     `{{ .CommonLabels.Entity }}`,
-				Actions:    `{{ .CommonLabels.Actions }}`,
-				APIKey:     `{{ .ExternalURL }}`,
-				APIURL:     &config.URL{URL: u},
-				HTTPConfig: &commoncfg.HTTPClientConfig{},
-			},
-			expectedEmptyAlertBody: `{"alias":"6b86b273ff34fce19d6b804eff5a3f5747ada4eaa22f1d49c01e52ddb7875b4b","message":"","details":{},"source":""}
-`,
-			expectedBody: `{"alias":"6b86b273ff34fce19d6b804eff5a3f5747ada4eaa22f1d49c01e52ddb7875b4b","message":"message","description":"description","details":{"Actions":"doThis,doThat","Description":"description","Entity":"test-domain","Message":"message","Note":"this is a note","Priority":"P1","ResponderName1":"TeamA","ResponderName2":"EscalationA","ResponderName3":"TeamA,TeamB","ResponderType1":"team","ResponderType2":"escalation","ResponderType3":"teams","Source":"http://prometheus","Tags":"tag1,tag2"},"source":"http://prometheus","responders":[{"name":"TeamA","type":"team"},{"name":"EscalationA","type":"escalation"}],"tags":["tag1","tag2"],"note":"this is a note","priority":"P1","entity":"test-domain","actions":["doThis","doThat"]}
-`,
-		},
-		{
-			title: "config with details",
-			cfg: &config.OpsGenieConfig{
-				NotifierConfig: config.NotifierConfig{
-					VSendResolved: true,
-				},
-				Message:     `{{ .CommonLabels.Message }}`,
-				Description: `{{ .CommonLabels.Description }}`,
-				Source:      `{{ .CommonLabels.Source }}`,
-				Details: map[string]string{
-					"Description": `adjusted {{ .CommonLabels.Description }}`,
-				},
-				Responders: []config.OpsGenieConfigResponder{
-					{
-						Name: `{{ .CommonLabels.ResponderName1 }}`,
-						Type: `{{ .CommonLabels.ResponderType1 }}`,
-					},
-					{
-						Name: `{{ .CommonLabels.ResponderName2 }}`,
-						Type: `{{ .CommonLabels.ResponderType2 }}`,
-					},
-				},
-				Tags:       `{{ .CommonLabels.Tags }}`,
-				Note:       `{{ .CommonLabels.Note }}`,
-				Priority:   `{{ .CommonLabels.Priority }}`,
-				Entity:     `{{ .CommonLabels.Entity }}`,
-				Actions:    `{{ .CommonLabels.Actions }}`,
-				APIKey:     `{{ .ExternalURL }}`,
-				APIURL:     &config.URL{URL: u},
-				HTTPConfig: &commoncfg.HTTPClientConfig{},
-			},
-			expectedEmptyAlertBody: `{"alias":"6b86b273ff34fce19d6b804eff5a3f5747ada4eaa22f1d49c01e52ddb7875b4b","message":"","details":{"Description":"adjusted "},"source":""}
-`,
-			expectedBody: `{"alias":"6b86b273ff34fce19d6b804eff5a3f5747ada4eaa22f1d49c01e52ddb7875b4b","message":"message","description":"description","details":{"Actions":"doThis,doThat","Description":"adjusted description","Entity":"test-domain","Message":"message","Note":"this is a note","Priority":"P1","ResponderName1":"TeamA","ResponderName2":"EscalationA","ResponderName3":"TeamA,TeamB","ResponderType1":"team","ResponderType2":"escalation","ResponderType3":"teams","Source":"http://prometheus","Tags":"tag1,tag2"},"source":"http://prometheus","responders":[{"name":"TeamA","type":"team"},{"name":"EscalationA","type":"escalation"}],"tags":["tag1","tag2"],"note":"this is a note","priority":"P1","entity":"test-domain","actions":["doThis","doThat"]}
-`,
-		},
-		{
-			title: "config with multiple teams",
-			cfg: &config.OpsGenieConfig{
-				NotifierConfig: config.NotifierConfig{
-					VSendResolved: true,
-				},
-				Message:     `{{ .CommonLabels.Message }}`,
-				Description: `{{ .CommonLabels.Description }}`,
-				Source:      `{{ .CommonLabels.Source }}`,
-				Details: map[string]string{
-					"Description": `adjusted {{ .CommonLabels.Description }}`,
-				},
-				Responders: []config.OpsGenieConfigResponder{
-					{
-						Name: `{{ .CommonLabels.ResponderName3 }}`,
-						Type: `{{ .CommonLabels.ResponderType3 }}`,
-					},
-				},
-				Tags:       `{{ .CommonLabels.Tags }}`,
-				Note:       `{{ .CommonLabels.Note }}`,
-				Priority:   `{{ .CommonLabels.Priority }}`,
-				APIKey:     `{{ .ExternalURL }}`,
-				APIURL:     &config.URL{URL: u},
-				HTTPConfig: &commoncfg.HTTPClientConfig{},
-			},
-			expectedEmptyAlertBody: `{"alias":"6b86b273ff34fce19d6b804eff5a3f5747ada4eaa22f1d49c01e52ddb7875b4b","message":"","details":{"Description":"adjusted "},"source":""}
-`,
-			expectedBody: `{"alias":"6b86b273ff34fce19d6b804eff5a3f5747ada4eaa22f1d49c01e52ddb7875b4b","message":"message","description":"description","details":{"Actions":"doThis,doThat","Description":"adjusted description","Entity":"test-domain","Message":"message","Note":"this is a note","Priority":"P1","ResponderName1":"TeamA","ResponderName2":"EscalationA","ResponderName3":"TeamA,TeamB","ResponderType1":"team","ResponderType2":"escalation","ResponderType3":"teams","Source":"http://prometheus","Tags":"tag1,tag2"},"source":"http://prometheus","responders":[{"name":"TeamA","type":"team"},{"name":"TeamB","type":"team"}],"tags":["tag1","tag2"],"note":"this is a note","priority":"P1"}
-`,
-		},
-	} {
-		t.Run(tc.title, func(t *testing.T) {
-			notifier, err := New(tc.cfg, tmpl, logger)
-			require.NoError(t, err)
-
-			ctx := context.Background()
-			ctx = notify.WithGroupKey(ctx, "1")
-
-			expectedURL, _ := url.Parse("https://opsgenie/apiv2/alerts")
-
-			// Empty alert.
-			alert1 := &types.Alert{
-				Alert: model.Alert{
-					StartsAt: time.Now(),
-					EndsAt:   time.Now().Add(time.Hour),
-				},
-			}
-
-			req, retry, err := notifier.createRequests(ctx, alert1)
-			require.NoError(t, err)
-			require.Len(t, req, 1)
-			require.True(t, retry)
-			require.Equal(t, expectedURL, req[0].URL)
-			require.Equal(t, "GenieKey http://am", req[0].Header.Get("Authorization"))
-			require.Equal(t, tc.expectedEmptyAlertBody, readBody(t, req[0]))
-
-			// Fully defined alert.
-			alert2 := &types.Alert{
-				Alert: model.Alert{
-					Labels: model.LabelSet{
-						"Message":        "message",
-						"Description":    "description",
-						"Source":         "http://prometheus",
-						"ResponderName1": "TeamA",
-						"ResponderType1": "team",
-						"ResponderName2": "EscalationA",
-						"ResponderType2": "escalation",
-						"ResponderName3": "TeamA,TeamB",
-						"ResponderType3": "teams",
-						"Tags":           "tag1,tag2",
-						"Note":           "this is a note",
-						"Priority":       "P1",
-						"Entity":         "test-domain",
-						"Actions":        "doThis,doThat",
-					},
-					StartsAt: time.Now(),
-					EndsAt:   time.Now().Add(time.Hour),
-				},
-			}
-			req, retry, err = notifier.createRequests(ctx, alert2)
-			require.NoError(t, err)
-			require.True(t, retry)
-			require.Len(t, req, 1)
-			require.Equal(t, tc.expectedBody, readBody(t, req[0]))
-
-			// Broken API Key Template.
-			tc.cfg.APIKey = "{{ kaput "
-			_, _, err = notifier.createRequests(ctx, alert2)
-			require.Error(t, err)
-			require.Equal(t, "template: :1: function \"kaput\" not defined", err.Error())
-		})
-	}
-}
-
-func TestOpsGenieWithUpdate(t *testing.T) {
-	u, err := url.Parse("https://test-opsgenie-url")
-	require.NoError(t, err)
-	tmpl := test.CreateTmpl(t)
-	ctx := context.Background()
-	ctx = notify.WithGroupKey(ctx, "1")
-	opsGenieConfigWithUpdate := config.OpsGenieConfig{
-		Message:      `{{ .CommonLabels.Message }}`,
-		Description:  `{{ .CommonLabels.Description }}`,
-		UpdateAlerts: true,
-		APIKey:       "test-api-key",
-		APIURL:       &config.URL{URL: u},
-		HTTPConfig:   &commoncfg.HTTPClientConfig{},
-	}
-	notifierWithUpdate, err := New(&opsGenieConfigWithUpdate, tmpl, promslog.NewNopLogger())
-	alert := &types.Alert{
-		Alert: model.Alert{
-			StartsAt: time.Now(),
-			EndsAt:   time.Now().Add(time.Hour),
-			Labels: model.LabelSet{
-				"Message":     "new message",
-				"Description": "new description",
-			},
-		},
-	}
-	require.NoError(t, err)
-	requests, retry, err := notifierWithUpdate.createRequests(ctx, alert)
-	require.NoError(t, err)
-	require.True(t, retry)
-	require.Len(t, requests, 3)
-
-	body0 := readBody(t, requests[0])
-	body1 := readBody(t, requests[1])
-	body2 := readBody(t, requests[2])
-	key, _ := notify.ExtractGroupKey(ctx)
-	alias := key.Hash()
-
-	require.Equal(t, "https://test-opsgenie-url/v2/alerts", requests[0].URL.String())
-	require.NotEmpty(t, body0)
-
-	require.Equal(t, requests[1].URL.String(), fmt.Sprintf("https://test-opsgenie-url/v2/alerts/%s/message?identifierType=alias", alias))
-	require.JSONEq(t, `{"message":"new message"}`, body1)
-	require.Equal(t, requests[2].URL.String(), fmt.Sprintf("https://test-opsgenie-url/v2/alerts/%s/description?identifierType=alias", alias))
-	require.JSONEq(t, `{"description":"new description"}`, body2)
-}
-
-func TestOpsGenieApiKeyFile(t *testing.T) {
-	u, err := url.Parse("https://test-opsgenie-url")
-	require.NoError(t, err)
-	tmpl := test.CreateTmpl(t)
-	ctx := context.Background()
-	ctx = notify.WithGroupKey(ctx, "1")
-	opsGenieConfigWithUpdate := config.OpsGenieConfig{
-		APIKeyFile: `./api_key_file`,
-		APIURL:     &config.URL{URL: u},
-		HTTPConfig: &commoncfg.HTTPClientConfig{},
-	}
-	notifierWithUpdate, err := New(&opsGenieConfigWithUpdate, tmpl, promslog.NewNopLogger())
-
-	require.NoError(t, err)
-	requests, _, err := notifierWithUpdate.createRequests(ctx)
-	require.NoError(t, err)
-	require.Equal(t, "GenieKey my_secret_api_key", requests[0].Header.Get("Authorization"))
-}
-
-func readBody(t *testing.T, r *http.Request) string {
-	t.Helper()
-	body, err := io.ReadAll(r.Body)
-	require.NoError(t, err)
-	return string(body)
-}

pkg/alertmanager/alertmanagernotify/pagerduty/pagerduty.go

@@ -1,374 +0,0 @@
-package pagerduty
-
-import (
-	"bytes"
-	"context"
-	"encoding/json"
-	"fmt"
-	"io"
-	"log/slog"
-	"net/http"
-	"os"
-	"strings"
-
-	"github.com/SigNoz/signoz/pkg/errors"
-	"github.com/alecthomas/units"
-	commoncfg "github.com/prometheus/common/config"
-	"github.com/prometheus/common/model"
-
-	"github.com/prometheus/alertmanager/config"
-	"github.com/prometheus/alertmanager/notify"
-	"github.com/prometheus/alertmanager/template"
-	"github.com/prometheus/alertmanager/types"
-)
-
-const (
-	Integration = "pagerduty"
-)
-
-const (
-	maxEventSize int = 512000
-	// https://developer.pagerduty.com/docs/ZG9jOjExMDI5NTc4-send-a-v1-event - 1024 characters or runes.
-	maxV1DescriptionLenRunes = 1024
-	// https://developer.pagerduty.com/docs/ZG9jOjExMDI5NTgx-send-an-alert-event - 1024 characters or runes.
-	maxV2SummaryLenRunes = 1024
-)
-
-// Notifier implements a Notifier for PagerDuty notifications.
-type Notifier struct {
-	conf    *config.PagerdutyConfig
-	tmpl    *template.Template
-	logger  *slog.Logger
-	apiV1   string // for tests.
-	client  *http.Client
-	retrier *notify.Retrier
-}
-
-// New returns a new PagerDuty notifier.
-func New(c *config.PagerdutyConfig, t *template.Template, l *slog.Logger, httpOpts ...commoncfg.HTTPClientOption) (*Notifier, error) {
-	client, err := notify.NewClientWithTracing(*c.HTTPConfig, Integration, httpOpts...)
-	if err != nil {
-		return nil, err
-	}
-	n := &Notifier{conf: c, tmpl: t, logger: l, client: client}
-	if c.ServiceKey != "" || c.ServiceKeyFile != "" {
-		n.apiV1 = "https://events.pagerduty.com/generic/2010-04-15/create_event.json"
-		// Retrying can solve the issue on 403 (rate limiting) and 5xx response codes.
-		// https://developer.pagerduty.com/docs/events-api-v1-overview#api-response-codes--retry-logic
-		n.retrier = &notify.Retrier{RetryCodes: []int{http.StatusForbidden}, CustomDetailsFunc: errDetails}
-	} else {
-		// Retrying can solve the issue on 429 (rate limiting) and 5xx response codes.
-		// https://developer.pagerduty.com/docs/events-api-v2-overview#response-codes--retry-logic
-		n.retrier = &notify.Retrier{RetryCodes: []int{http.StatusTooManyRequests}, CustomDetailsFunc: errDetails}
-	}
-	return n, nil
-}
-
-const (
-	pagerDutyEventTrigger = "trigger"
-	pagerDutyEventResolve = "resolve"
-)
-
-type pagerDutyMessage struct {
-	RoutingKey  string            `json:"routing_key,omitempty"`
-	ServiceKey  string            `json:"service_key,omitempty"`
-	DedupKey    string            `json:"dedup_key,omitempty"`
-	IncidentKey string            `json:"incident_key,omitempty"`
-	EventType   string            `json:"event_type,omitempty"`
-	Description string            `json:"description,omitempty"`
-	EventAction string            `json:"event_action"`
-	Payload     *pagerDutyPayload `json:"payload"`
-	Client      string            `json:"client,omitempty"`
-	ClientURL   string            `json:"client_url,omitempty"`
-	Details     map[string]any    `json:"details,omitempty"`
-	Images      []pagerDutyImage  `json:"images,omitempty"`
-	Links       []pagerDutyLink   `json:"links,omitempty"`
-}
-
-type pagerDutyLink struct {
-	HRef string `json:"href"`
-	Text string `json:"text"`
-}
-
-type pagerDutyImage struct {
-	Src  string `json:"src"`
-	Alt  string `json:"alt"`
-	Href string `json:"href"`
-}
-
-type pagerDutyPayload struct {
-	Summary       string         `json:"summary"`
-	Source        string         `json:"source"`
-	Severity      string         `json:"severity"`
-	Timestamp     string         `json:"timestamp,omitempty"`
-	Class         string         `json:"class,omitempty"`
-	Component     string         `json:"component,omitempty"`
-	Group         string         `json:"group,omitempty"`
-	CustomDetails map[string]any `json:"custom_details,omitempty"`
-}
-
-func (n *Notifier) encodeMessage(ctx context.Context, msg *pagerDutyMessage) (bytes.Buffer, error) {
-	var buf bytes.Buffer
-	if err := json.NewEncoder(&buf).Encode(msg); err != nil {
-		return buf, errors.WrapInternalf(err, errors.CodeInternal, "failed to encode PagerDuty message")
-	}
-
-	if buf.Len() > maxEventSize {
-		truncatedMsg := fmt.Sprintf("Custom details have been removed because the original event exceeds the maximum size of %s", units.MetricBytes(maxEventSize).String())
-
-		if n.apiV1 != "" {
-			msg.Details = map[string]any{"error": truncatedMsg}
-		} else {
-			msg.Payload.CustomDetails = map[string]any{"error": truncatedMsg}
-		}
-
-		n.logger.WarnContext(ctx, "Truncated Details because message of size exceeds limit", "message_size", units.MetricBytes(buf.Len()).String(), "max_size", units.MetricBytes(maxEventSize).String())
-
-		buf.Reset()
-		if err := json.NewEncoder(&buf).Encode(msg); err != nil {
-			return buf, errors.WrapInternalf(err, errors.CodeInternal, "failed to encode PagerDuty message")
-		}
-	}
-
-	return buf, nil
-}
-
-func (n *Notifier) notifyV1(
-	ctx context.Context,
-	eventType string,
-	key notify.Key,
-	data *template.Data,
-	details map[string]any,
-) (bool, error) {
-	var tmplErr error
-	tmpl := notify.TmplText(n.tmpl, data, &tmplErr)
-
-	description, truncated := notify.TruncateInRunes(tmpl(n.conf.Description), maxV1DescriptionLenRunes)
-	if truncated {
-		n.logger.WarnContext(ctx, "Truncated description", "key", key, "max_runes", maxV1DescriptionLenRunes)
-	}
-
-	serviceKey := string(n.conf.ServiceKey)
-	if serviceKey == "" {
-		content, fileErr := os.ReadFile(n.conf.ServiceKeyFile)
-		if fileErr != nil {
-			return false, errors.WrapInternalf(fileErr, errors.CodeInternal, "failed to read service key from file")
-		}
-		serviceKey = strings.TrimSpace(string(content))
-	}
-
-	msg := &pagerDutyMessage{
-		ServiceKey:  tmpl(serviceKey),
-		EventType:   eventType,
-		IncidentKey: key.Hash(),
-		Description: description,
-		Details:     details,
-	}
-
-	if eventType == pagerDutyEventTrigger {
-		msg.Client = tmpl(n.conf.Client)
-		msg.ClientURL = tmpl(n.conf.ClientURL)
-	}
-
-	if tmplErr != nil {
-		return false, errors.WrapInternalf(tmplErr, errors.CodeInternal, "failed to template PagerDuty v1 message")
-	}
-
-	// Ensure that the service key isn't empty after templating.
-	if msg.ServiceKey == "" {
-		return false, errors.NewInternalf(errors.CodeInternal, "service key cannot be empty")
-	}
-
-	encodedMsg, err := n.encodeMessage(ctx, msg)
-	if err != nil {
-		return false, err
-	}
-
-	resp, err := notify.PostJSON(ctx, n.client, n.apiV1, &encodedMsg) //nolint:bodyclose
-	if err != nil {
-		return true, errors.WrapInternalf(err, errors.CodeInternal, "failed to post message to PagerDuty v1")
-	}
-	defer notify.Drain(resp)
-
-	return n.retrier.Check(resp.StatusCode, resp.Body)
-}
-
-func (n *Notifier) notifyV2(
-	ctx context.Context,
-	eventType string,
-	key notify.Key,
-	data *template.Data,
-	details map[string]any,
-) (bool, error) {
-	var tmplErr error
-	tmpl := notify.TmplText(n.tmpl, data, &tmplErr)
-
-	if n.conf.Severity == "" {
-		n.conf.Severity = "error"
-	}
-
-	summary, truncated := notify.TruncateInRunes(tmpl(n.conf.Description), maxV2SummaryLenRunes)
-	if truncated {
-		n.logger.WarnContext(ctx, "Truncated summary", "key", key, "max_runes", maxV2SummaryLenRunes)
-	}
-
-	routingKey := string(n.conf.RoutingKey)
-	if routingKey == "" {
-		content, fileErr := os.ReadFile(n.conf.RoutingKeyFile)
-		if fileErr != nil {
-			return false, errors.WrapInternalf(fileErr, errors.CodeInternal, "failed to read routing key from file")
-		}
-		routingKey = strings.TrimSpace(string(content))
-	}
-
-	msg := &pagerDutyMessage{
-		Client:      tmpl(n.conf.Client),
-		ClientURL:   tmpl(n.conf.ClientURL),
-		RoutingKey:  tmpl(routingKey),
-		EventAction: eventType,
-		DedupKey:    key.Hash(),
-		Images:      make([]pagerDutyImage, 0, len(n.conf.Images)),
-		Links:       make([]pagerDutyLink, 0, len(n.conf.Links)),
-		Payload: &pagerDutyPayload{
-			Summary:       summary,
-			Source:        tmpl(n.conf.Source),
-			Severity:      tmpl(n.conf.Severity),
-			CustomDetails: details,
-			Class:         tmpl(n.conf.Class),
-			Component:     tmpl(n.conf.Component),
-			Group:         tmpl(n.conf.Group),
-		},
-	}
-
-	for _, item := range n.conf.Images {
-		image := pagerDutyImage{
-			Src:  tmpl(item.Src),
-			Alt:  tmpl(item.Alt),
-			Href: tmpl(item.Href),
-		}
-
-		if image.Src != "" {
-			msg.Images = append(msg.Images, image)
-		}
-	}
-
-	for _, item := range n.conf.Links {
-		link := pagerDutyLink{
-			HRef: tmpl(item.Href),
-			Text: tmpl(item.Text),
-		}
-
-		if link.HRef != "" {
-			msg.Links = append(msg.Links, link)
-		}
-	}
-
-	if tmplErr != nil {
-		return false, errors.WrapInternalf(tmplErr, errors.CodeInternal, "failed to template PagerDuty v2 message")
-	}
-
-	// Ensure that the routing key isn't empty after templating.
-	if msg.RoutingKey == "" {
-		return false, errors.NewInternalf(errors.CodeInternal, "routing key cannot be empty")
-	}
-
-	encodedMsg, err := n.encodeMessage(ctx, msg)
-	if err != nil {
-		return false, err
-	}
-
-	resp, err := notify.PostJSON(ctx, n.client, n.conf.URL.String(), &encodedMsg) //nolint:bodyclose
-	if err != nil {
-		return true, errors.WrapInternalf(err, errors.CodeInternal, "failed to post message to PagerDuty")
-	}
-	defer notify.Drain(resp)
-
-	retry, err := n.retrier.Check(resp.StatusCode, resp.Body)
-	if err != nil {
-		return retry, notify.NewErrorWithReason(notify.GetFailureReasonFromStatusCode(resp.StatusCode), err)
-	}
-	return retry, err
-}
-
-// Notify implements the Notifier interface.
-func (n *Notifier) Notify(ctx context.Context, as ...*types.Alert) (bool, error) {
-	key, err := notify.ExtractGroupKey(ctx)
-	if err != nil {
-		return false, err
-	}
-	logger := n.logger.With("group_key", key)
-
-	var (
-		alerts    = types.Alerts(as...)
-		data      = notify.GetTemplateData(ctx, n.tmpl, as, logger)
-		eventType = pagerDutyEventTrigger
-	)
-
-	if alerts.Status() == model.AlertResolved {
-		eventType = pagerDutyEventResolve
-	}
-
-	logger.DebugContext(ctx, "extracted group key", "event_type", eventType)
-
-	details, err := n.renderDetails(data)
-	if err != nil {
-		return false, errors.WrapInternalf(err, errors.CodeInternal, "failed to render details: %v", err)
-	}
-
-	if n.conf.Timeout > 0 {
-		nfCtx, cancel := context.WithTimeoutCause(ctx, n.conf.Timeout, errors.NewInternalf(errors.CodeInternal, "configured pagerduty timeout reached (%s)", n.conf.Timeout))
-		defer cancel()
-		ctx = nfCtx
-	}
-
-	nf := n.notifyV2
-	if n.apiV1 != "" {
-		nf = n.notifyV1
-	}
-	retry, err := nf(ctx, eventType, key, data, details)
-	if err != nil {
-		if ctx.Err() != nil {
-			err = errors.WrapInternalf(err, errors.CodeInternal, "failed to notify PagerDuty: %v", context.Cause(ctx))
-		}
-		return retry, err
-	}
-	return retry, nil
-}
-
-func errDetails(status int, body io.Reader) string {
-	// See https://v2.developer.pagerduty.com/docs/trigger-events for the v1 events API.
-	// See https://v2.developer.pagerduty.com/docs/send-an-event-events-api-v2 for the v2 events API.
-	if status != http.StatusBadRequest || body == nil {
-		return ""
-	}
-	var pgr struct {
-		Status  string   `json:"status"`
-		Message string   `json:"message"`
-		Errors  []string `json:"errors"`
-	}
-	if err := json.NewDecoder(body).Decode(&pgr); err != nil {
-		return ""
-	}
-	return fmt.Sprintf("%s: %s", pgr.Message, strings.Join(pgr.Errors, ","))
-}
-
-func (n *Notifier) renderDetails(
-	data *template.Data,
-) (map[string]any, error) {
-	var (
-		tmplTextErr  error
-		tmplText     = notify.TmplText(n.tmpl, data, &tmplTextErr)
-		tmplTextFunc = func(tmpl string) (string, error) {
-			return tmplText(tmpl), tmplTextErr
-		}
-	)
-	var err error
-	rendered := make(map[string]any, len(n.conf.Details))
-	for k, v := range n.conf.Details {
-		rendered[k], err = template.DeepCopyWithTemplate(v, tmplTextFunc)
-		if err != nil {
-			return nil, err
-		}
-	}
-	return rendered, nil
-}

pkg/alertmanager/alertmanagernotify/pagerduty/pagerduty_test.go

@@ -1,879 +0,0 @@
-package pagerduty
-
-import (
-	"bytes"
-	"context"
-	"encoding/json"
-	"io"
-	"net/http"
-	"net/http/httptest"
-	"net/url"
-	"os"
-	"strings"
-	"testing"
-	"time"
-
-	"github.com/SigNoz/signoz/pkg/errors"
-	commoncfg "github.com/prometheus/common/config"
-	"github.com/prometheus/common/model"
-	"github.com/prometheus/common/promslog"
-	"github.com/stretchr/testify/require"
-
-	"github.com/prometheus/alertmanager/config"
-	"github.com/prometheus/alertmanager/notify"
-	"github.com/prometheus/alertmanager/notify/test"
-	"github.com/prometheus/alertmanager/template"
-	"github.com/prometheus/alertmanager/types"
-)
-
-func TestPagerDutyRetryV1(t *testing.T) {
-	notifier, err := New(
-		&config.PagerdutyConfig{
-			ServiceKey: config.Secret("01234567890123456789012345678901"),
-			HTTPConfig: &commoncfg.HTTPClientConfig{},
-		},
-		test.CreateTmpl(t),
-		promslog.NewNopLogger(),
-	)
-	require.NoError(t, err)
-
-	retryCodes := append(test.DefaultRetryCodes(), http.StatusForbidden)
-	for statusCode, expected := range test.RetryTests(retryCodes) {
-		actual, _ := notifier.retrier.Check(statusCode, nil)
-		require.Equal(t, expected, actual, "retryv1 - error on status %d", statusCode)
-	}
-}
-
-func TestPagerDutyRetryV2(t *testing.T) {
-	notifier, err := New(
-		&config.PagerdutyConfig{
-			RoutingKey: config.Secret("01234567890123456789012345678901"),
-			HTTPConfig: &commoncfg.HTTPClientConfig{},
-		},
-		test.CreateTmpl(t),
-		promslog.NewNopLogger(),
-	)
-	require.NoError(t, err)
-
-	retryCodes := append(test.DefaultRetryCodes(), http.StatusTooManyRequests)
-	for statusCode, expected := range test.RetryTests(retryCodes) {
-		actual, _ := notifier.retrier.Check(statusCode, nil)
-		require.Equal(t, expected, actual, "retryv2 - error on status %d", statusCode)
-	}
-}
-
-func TestPagerDutyRedactedURLV1(t *testing.T) {
-	ctx, u, fn := test.GetContextWithCancelingURL()
-	defer fn()
-
-	key := "01234567890123456789012345678901"
-	notifier, err := New(
-		&config.PagerdutyConfig{
-			ServiceKey: config.Secret(key),
-			HTTPConfig: &commoncfg.HTTPClientConfig{},
-		},
-		test.CreateTmpl(t),
-		promslog.NewNopLogger(),
-	)
-	require.NoError(t, err)
-	notifier.apiV1 = u.String()
-
-	test.AssertNotifyLeaksNoSecret(ctx, t, notifier, key)
-}
-
-func TestPagerDutyRedactedURLV2(t *testing.T) {
-	ctx, u, fn := test.GetContextWithCancelingURL()
-	defer fn()
-
-	key := "01234567890123456789012345678901"
-	notifier, err := New(
-		&config.PagerdutyConfig{
-			URL:        &config.URL{URL: u},
-			RoutingKey: config.Secret(key),
-			HTTPConfig: &commoncfg.HTTPClientConfig{},
-		},
-		test.CreateTmpl(t),
-		promslog.NewNopLogger(),
-	)
-	require.NoError(t, err)
-
-	test.AssertNotifyLeaksNoSecret(ctx, t, notifier, key)
-}
-
-func TestPagerDutyV1ServiceKeyFromFile(t *testing.T) {
-	key := "01234567890123456789012345678901"
-	f, err := os.CreateTemp(t.TempDir(), "pagerduty_test")
-	require.NoError(t, err, "creating temp file failed")
-	_, err = f.WriteString(key)
-	require.NoError(t, err, "writing to temp file failed")
-
-	ctx, u, fn := test.GetContextWithCancelingURL()
-	defer fn()
-
-	notifier, err := New(
-		&config.PagerdutyConfig{
-			ServiceKeyFile: f.Name(),
-			HTTPConfig:     &commoncfg.HTTPClientConfig{},
-		},
-		test.CreateTmpl(t),
-		promslog.NewNopLogger(),
-	)
-	require.NoError(t, err)
-	notifier.apiV1 = u.String()
-
-	test.AssertNotifyLeaksNoSecret(ctx, t, notifier, key)
-}
-
-func TestPagerDutyV2RoutingKeyFromFile(t *testing.T) {
-	key := "01234567890123456789012345678901"
-	f, err := os.CreateTemp(t.TempDir(), "pagerduty_test")
-	require.NoError(t, err, "creating temp file failed")
-	_, err = f.WriteString(key)
-	require.NoError(t, err, "writing to temp file failed")
-
-	ctx, u, fn := test.GetContextWithCancelingURL()
-	defer fn()
-
-	notifier, err := New(
-		&config.PagerdutyConfig{
-			URL:            &config.URL{URL: u},
-			RoutingKeyFile: f.Name(),
-			HTTPConfig:     &commoncfg.HTTPClientConfig{},
-		},
-		test.CreateTmpl(t),
-		promslog.NewNopLogger(),
-	)
-	require.NoError(t, err)
-
-	test.AssertNotifyLeaksNoSecret(ctx, t, notifier, key)
-}
-
-func TestPagerDutyTemplating(t *testing.T) {
-	srv := httptest.NewServer(http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
-		dec := json.NewDecoder(r.Body)
-		out := make(map[string]any)
-		err := dec.Decode(&out)
-		if err != nil {
-			panic(err)
-		}
-	}))
-	defer srv.Close()
-	u, _ := url.Parse(srv.URL)
-
-	for _, tc := range []struct {
-		title string
-		cfg   *config.PagerdutyConfig
-
-		retry  bool
-		errMsg string
-	}{
-		{
-			title: "full-blown legacy message",
-			cfg: &config.PagerdutyConfig{
-				RoutingKey: config.Secret("01234567890123456789012345678901"),
-				Images: []config.PagerdutyImage{
-					{
-						Src:  "{{ .Status }}",
-						Alt:  "{{ .Status }}",
-						Href: "{{ .Status }}",
-					},
-				},
-				Links: []config.PagerdutyLink{
-					{
-						Href: "{{ .Status }}",
-						Text: "{{ .Status }}",
-					},
-				},
-				Details: map[string]any{
-					"firing":       `{{ .Alerts.Firing | toJson }}`,
-					"resolved":     `{{ .Alerts.Resolved | toJson }}`,
-					"num_firing":   `{{ .Alerts.Firing | len }}`,
-					"num_resolved": `{{ .Alerts.Resolved | len }}`,
-				},
-			},
-		},
-		{
-			title: "full-blown legacy message",
-			cfg: &config.PagerdutyConfig{
-				RoutingKey: config.Secret("01234567890123456789012345678901"),
-				Images: []config.PagerdutyImage{
-					{
-						Src:  "{{ .Status }}",
-						Alt:  "{{ .Status }}",
-						Href: "{{ .Status }}",
-					},
-				},
-				Links: []config.PagerdutyLink{
-					{
-						Href: "{{ .Status }}",
-						Text: "{{ .Status }}",
-					},
-				},
-				Details: map[string]any{
-					"firing":       `{{ template "pagerduty.default.instances" .Alerts.Firing }}`,
-					"resolved":     `{{ template "pagerduty.default.instances" .Alerts.Resolved }}`,
-					"num_firing":   `{{ .Alerts.Firing | len }}`,
-					"num_resolved": `{{ .Alerts.Resolved | len }}`,
-				},
-			},
-		},
-		{
-			title: "nested details",
-			cfg: &config.PagerdutyConfig{
-				RoutingKey: config.Secret("01234567890123456789012345678901"),
-				Details: map[string]any{
-					"a": map[string]any{
-						"b": map[string]any{
-							"c": map[string]any{
-								"firing":       `{{ .Alerts.Firing | toJson }}`,
-								"resolved":     `{{ .Alerts.Resolved | toJson }}`,
-								"num_firing":   `{{ .Alerts.Firing | len }}`,
-								"num_resolved": `{{ .Alerts.Resolved | len }}`,
-							},
-						},
-					},
-				},
-			},
-		},
-		{
-			title: "nested details with template error",
-			cfg: &config.PagerdutyConfig{
-				RoutingKey: config.Secret("01234567890123456789012345678901"),
-				Details: map[string]any{
-					"a": map[string]any{
-						"b": map[string]any{
-							"c": map[string]any{
-								"firing": `{{ template "pagerduty.default.instances" .Alerts.Firing`,
-							},
-						},
-					},
-				},
-			},
-			errMsg: "failed to render details: template: :1: unclosed action",
-		},
-		{
-			title: "details with templating errors",
-			cfg: &config.PagerdutyConfig{
-				RoutingKey: config.Secret("01234567890123456789012345678901"),
-				Details: map[string]any{
-					"firing":       `{{ .Alerts.Firing | toJson`,
-					"resolved":     `{{ .Alerts.Resolved | toJson }}`,
-					"num_firing":   `{{ .Alerts.Firing | len }}`,
-					"num_resolved": `{{ .Alerts.Resolved | len }}`,
-				},
-			},
-			errMsg: "failed to render details: template: :1: unclosed action",
-		},
-		{
-			title: "v2 message with templating errors",
-			cfg: &config.PagerdutyConfig{
-				RoutingKey: config.Secret("01234567890123456789012345678901"),
-				Severity:   "{{ ",
-			},
-			errMsg: "failed to template",
-		},
-		{
-			title: "v1 message with templating errors",
-			cfg: &config.PagerdutyConfig{
-				ServiceKey: config.Secret("01234567890123456789012345678901"),
-				Client:     "{{ ",
-			},
-			errMsg: "failed to template",
-		},
-		{
-			title: "routing key cannot be empty",
-			cfg: &config.PagerdutyConfig{
-				RoutingKey: config.Secret(`{{ "" }}`),
-			},
-			errMsg: "routing key cannot be empty",
-		},
-		{
-			title: "service_key cannot be empty",
-			cfg: &config.PagerdutyConfig{
-				ServiceKey: config.Secret(`{{ "" }}`),
-			},
-			errMsg: "service key cannot be empty",
-		},
-	} {
-		t.Run(tc.title, func(t *testing.T) {
-			tc.cfg.URL = &config.URL{URL: u}
-			tc.cfg.HTTPConfig = &commoncfg.HTTPClientConfig{}
-			pd, err := New(tc.cfg, test.CreateTmpl(t), promslog.NewNopLogger())
-			require.NoError(t, err)
-			if pd.apiV1 != "" {
-				pd.apiV1 = u.String()
-			}
-
-			ctx := context.Background()
-			ctx = notify.WithGroupKey(ctx, "1")
-
-			ok, err := pd.Notify(ctx, []*types.Alert{
-				{
-					Alert: model.Alert{
-						Labels: model.LabelSet{
-							"lbl1": "val1",
-						},
-						StartsAt: time.Now(),
-						EndsAt:   time.Now().Add(time.Hour),
-					},
-				},
-			}...)
-			if tc.errMsg == "" {
-				require.NoError(t, err)
-			} else {
-				require.Error(t, err)
-				if errors.Asc(err, errors.CodeInternal) {
-					_, _, errMsg, _, _, _ := errors.Unwrapb(err)
-					require.Contains(t, errMsg, tc.errMsg)
-				} else {
-					require.Contains(t, err.Error(), tc.errMsg)
-				}
-			}
-			require.Equal(t, tc.retry, ok)
-		})
-	}
-}
-
-func TestErrDetails(t *testing.T) {
-	for _, tc := range []struct {
-		status int
-		body   io.Reader
-
-		exp string
-	}{
-		{
-			status: http.StatusBadRequest,
-			body: bytes.NewBuffer([]byte(
-				`{"status":"invalid event","message":"Event object is invalid","errors":["Length of 'routing_key' is incorrect (should be 32 characters)"]}`,
-			)),
-
-			exp: "Length of 'routing_key' is incorrect",
-		},
-		{
-			status: http.StatusBadRequest,
-			body:   bytes.NewBuffer([]byte(`{"status"}`)),
-
-			exp: "",
-		},
-		{
-			status: http.StatusBadRequest,
-
-			exp: "",
-		},
-		{
-			status: http.StatusTooManyRequests,
-
-			exp: "",
-		},
-	} {
-		t.Run("", func(t *testing.T) {
-			err := errDetails(tc.status, tc.body)
-			require.Contains(t, err, tc.exp)
-		})
-	}
-}
-
-func TestEventSizeEnforcement(t *testing.T) {
-	bigDetailsV1 := map[string]any{
-		"firing": strings.Repeat("a", 513000),
-	}
-	bigDetailsV2 := map[string]any{
-		"firing": strings.Repeat("a", 513000),
-	}
-
-	// V1 Messages
-	msgV1 := &pagerDutyMessage{
-		ServiceKey: "01234567890123456789012345678901",
-		EventType:  "trigger",
-		Details:    bigDetailsV1,
-	}
-
-	notifierV1, err := New(
-		&config.PagerdutyConfig{
-			ServiceKey: config.Secret("01234567890123456789012345678901"),
-			HTTPConfig: &commoncfg.HTTPClientConfig{},
-		},
-		test.CreateTmpl(t),
-		promslog.NewNopLogger(),
-	)
-	require.NoError(t, err)
-
-	encodedV1, err := notifierV1.encodeMessage(context.Background(), msgV1)
-	require.NoError(t, err)
-	require.Contains(t, encodedV1.String(), `"details":{"error":"Custom details have been removed because the original event exceeds the maximum size of 512KB"}`)
-
-	// V2 Messages
-	msgV2 := &pagerDutyMessage{
-		RoutingKey:  "01234567890123456789012345678901",
-		EventAction: "trigger",
-		Payload: &pagerDutyPayload{
-			CustomDetails: bigDetailsV2,
-		},
-	}
-
-	notifierV2, err := New(
-		&config.PagerdutyConfig{
-			RoutingKey: config.Secret("01234567890123456789012345678901"),
-			HTTPConfig: &commoncfg.HTTPClientConfig{},
-		},
-		test.CreateTmpl(t),
-		promslog.NewNopLogger(),
-	)
-	require.NoError(t, err)
-
-	encodedV2, err := notifierV2.encodeMessage(context.Background(), msgV2)
-	require.NoError(t, err)
-	require.Contains(t, encodedV2.String(), `"custom_details":{"error":"Custom details have been removed because the original event exceeds the maximum size of 512KB"}`)
-}
-
-func TestPagerDutyEmptySrcHref(t *testing.T) {
-	type pagerDutyEvent struct {
-		RoutingKey  string           `json:"routing_key"`
-		EventAction string           `json:"event_action"`
-		DedupKey    string           `json:"dedup_key"`
-		Payload     pagerDutyPayload `json:"payload"`
-		Images      []pagerDutyImage
-		Links       []pagerDutyLink
-	}
-
-	images := []config.PagerdutyImage{
-		{
-			Src:  "",
-			Alt:  "Empty src",
-			Href: "https://example.com/",
-		},
-		{
-			Src:  "https://example.com/cat.jpg",
-			Alt:  "Empty href",
-			Href: "",
-		},
-		{
-			Src:  "https://example.com/cat.jpg",
-			Alt:  "",
-			Href: "https://example.com/",
-		},
-	}
-
-	links := []config.PagerdutyLink{
-		{
-			Href: "",
-			Text: "Empty href",
-		},
-		{
-			Href: "https://example.com/",
-			Text: "",
-		},
-	}
-
-	expectedImages := make([]pagerDutyImage, 0, len(images))
-	for _, image := range images {
-		if image.Src == "" {
-			continue
-		}
-		expectedImages = append(expectedImages, pagerDutyImage{
-			Src:  image.Src,
-			Alt:  image.Alt,
-			Href: image.Href,
-		})
-	}
-
-	expectedLinks := make([]pagerDutyLink, 0, len(links))
-	for _, link := range links {
-		if link.Href == "" {
-			continue
-		}
-		expectedLinks = append(expectedLinks, pagerDutyLink{
-			HRef: link.Href,
-			Text: link.Text,
-		})
-	}
-
-	server := httptest.NewServer(http.HandlerFunc(
-		func(w http.ResponseWriter, r *http.Request) {
-			decoder := json.NewDecoder(r.Body)
-			var event pagerDutyEvent
-			if err := decoder.Decode(&event); err != nil {
-				panic(err)
-			}
-
-			if event.RoutingKey == "" || event.EventAction == "" {
-				http.Error(w, http.StatusText(http.StatusBadRequest), http.StatusBadRequest)
-				return
-			}
-
-			for _, image := range event.Images {
-				if image.Src == "" {
-					http.Error(w, "Event object is invalid: 'image src' is missing or blank", http.StatusBadRequest)
-					return
-				}
-			}
-
-			for _, link := range event.Links {
-				if link.HRef == "" {
-					http.Error(w, "Event object is invalid: 'link href' is missing or blank", http.StatusBadRequest)
-					return
-				}
-			}
-
-			require.Equal(t, expectedImages, event.Images)
-			require.Equal(t, expectedLinks, event.Links)
-		},
-	))
-	defer server.Close()
-
-	url, err := url.Parse(server.URL)
-	require.NoError(t, err)
-
-	pagerDutyConfig := config.PagerdutyConfig{
-		HTTPConfig: &commoncfg.HTTPClientConfig{},
-		RoutingKey: config.Secret("01234567890123456789012345678901"),
-		URL:        &config.URL{URL: url},
-		Images:     images,
-		Links:      links,
-	}
-
-	pagerDuty, err := New(&pagerDutyConfig, test.CreateTmpl(t), promslog.NewNopLogger())
-	require.NoError(t, err)
-
-	ctx := context.Background()
-	ctx = notify.WithGroupKey(ctx, "1")
-
-	_, err = pagerDuty.Notify(ctx, []*types.Alert{
-		{
-			Alert: model.Alert{
-				Labels: model.LabelSet{
-					"lbl1": "val1",
-				},
-				StartsAt: time.Now(),
-				EndsAt:   time.Now().Add(time.Hour),
-			},
-		},
-	}...)
-	require.NoError(t, err)
-}
-
-func TestPagerDutyTimeout(t *testing.T) {
-	type pagerDutyEvent struct {
-		RoutingKey  string           `json:"routing_key"`
-		EventAction string           `json:"event_action"`
-		DedupKey    string           `json:"dedup_key"`
-		Payload     pagerDutyPayload `json:"payload"`
-		Images      []pagerDutyImage
-		Links       []pagerDutyLink
-	}
-
-	tests := map[string]struct {
-		latency time.Duration
-		timeout time.Duration
-		wantErr bool
-	}{
-		"success": {latency: 100 * time.Millisecond, timeout: 120 * time.Millisecond, wantErr: false},
-		"error":   {latency: 100 * time.Millisecond, timeout: 80 * time.Millisecond, wantErr: true},
-	}
-
-	for name, tt := range tests {
-		t.Run(name, func(t *testing.T) {
-			srv := httptest.NewServer(http.HandlerFunc(
-				func(w http.ResponseWriter, r *http.Request) {
-					decoder := json.NewDecoder(r.Body)
-					var event pagerDutyEvent
-					if err := decoder.Decode(&event); err != nil {
-						panic(err)
-					}
-
-					if event.RoutingKey == "" || event.EventAction == "" {
-						http.Error(w, http.StatusText(http.StatusBadRequest), http.StatusBadRequest)
-						return
-					}
-					time.Sleep(tt.latency)
-				},
-			))
-			defer srv.Close()
-			u, err := url.Parse(srv.URL)
-			require.NoError(t, err)
-
-			cfg := config.PagerdutyConfig{
-				HTTPConfig: &commoncfg.HTTPClientConfig{},
-				RoutingKey: config.Secret("01234567890123456789012345678901"),
-				URL:        &config.URL{URL: u},
-				Timeout:    tt.timeout,
-			}
-
-			pd, err := New(&cfg, test.CreateTmpl(t), promslog.NewNopLogger())
-			require.NoError(t, err)
-
-			ctx := context.Background()
-			ctx = notify.WithGroupKey(ctx, "1")
-			alert := &types.Alert{
-				Alert: model.Alert{
-					Labels: model.LabelSet{
-						"lbl1": "val1",
-					},
-					StartsAt: time.Now(),
-					EndsAt:   time.Now().Add(time.Hour),
-				},
-			}
-			_, err = pd.Notify(ctx, alert)
-			require.Equal(t, tt.wantErr, err != nil)
-		})
-	}
-}
-
-func TestRenderDetails(t *testing.T) {
-	type args struct {
-		details map[string]any
-		data    *template.Data
-	}
-	tests := []struct {
-		name    string
-		args    args
-		want    map[string]any
-		wantErr bool
-	}{
-		{
-			name: "flat",
-			args: args{
-				details: map[string]any{
-					"a": "{{ .Status }}",
-					"b": "String",
-				},
-				data: &template.Data{
-					Status: "Flat",
-				},
-			},
-			want: map[string]any{
-				"a": "Flat",
-				"b": "String",
-			},
-			wantErr: false,
-		},
-		{
-			name: "flat error",
-			args: args{
-				details: map[string]any{
-					"a": "{{ .Status",
-				},
-				data: &template.Data{
-					Status: "Error",
-				},
-			},
-			want:    nil,
-			wantErr: true,
-		},
-		{
-			name: "nested",
-			args: args{
-				details: map[string]any{
-					"a": map[string]any{
-						"b": map[string]any{
-							"c": "{{ .Status }}",
-							"d": "String",
-						},
-					},
-				},
-				data: &template.Data{
-					Status: "Nested",
-				},
-			},
-			want: map[string]any{
-				"a": map[string]any{
-					"b": map[string]any{
-						"c": "Nested",
-						"d": "String",
-					},
-				},
-			},
-			wantErr: false,
-		},
-		{
-			name: "nested error",
-			args: args{
-				details: map[string]any{
-					"a": map[string]any{
-						"b": map[string]any{
-							"c": "{{ .Status",
-						},
-					},
-				},
-				data: &template.Data{
-					Status: "Error",
-				},
-			},
-			want:    nil,
-			wantErr: true,
-		},
-		{
-			name: "alerts",
-			args: args{
-				details: map[string]any{
-					"alerts": map[string]any{
-						"firing":       "{{ .Alerts.Firing | toJson }}",
-						"resolved":     "{{ .Alerts.Resolved | toJson }}",
-						"num_firing":   "{{ len .Alerts.Firing }}",
-						"num_resolved": "{{ len .Alerts.Resolved }}",
-					},
-				},
-				data: &template.Data{
-					Alerts: template.Alerts{
-						{
-							Status: "firing",
-							Annotations: template.KV{
-								"annotation1": "value1",
-								"annotation2": "value2",
-							},
-							Labels: template.KV{
-								"alertname": "Firing1",
-								"label1":    "value1",
-								"label2":    "value2",
-							},
-							Fingerprint:  "fingerprint1",
-							GeneratorURL: "http://generator1",
-							StartsAt:     time.Date(2001, time.January, 1, 0, 0, 0, 0, time.UTC),
-							EndsAt:       time.Date(2001, time.January, 1, 1, 0, 0, 0, time.UTC),
-						},
-						{
-							Status: "firing",
-							Annotations: template.KV{
-								"annotation1": "value1",
-								"annotation2": "value2",
-							},
-							Labels: template.KV{
-								"alertname": "Firing2",
-								"label1":    "value1",
-								"label2":    "value2",
-							},
-							Fingerprint:  "fingerprint2",
-							GeneratorURL: "http://generator2",
-							StartsAt:     time.Date(2002, time.January, 1, 0, 0, 0, 0, time.UTC),
-							EndsAt:       time.Date(2002, time.January, 1, 1, 0, 0, 0, time.UTC),
-						},
-						{
-							Status: "resolved",
-							Annotations: template.KV{
-								"annotation1": "value1",
-								"annotation2": "value2",
-							},
-							Labels: template.KV{
-								"alertname": "Resolved1",
-								"label1":    "value1",
-								"label2":    "value2",
-							},
-							Fingerprint:  "fingerprint3",
-							GeneratorURL: "http://generator3",
-							StartsAt:     time.Date(2001, time.January, 1, 0, 0, 0, 0, time.UTC),
-							EndsAt:       time.Date(2001, time.January, 1, 1, 0, 0, 0, time.UTC),
-						},
-						{
-							Status: "resolved",
-							Annotations: template.KV{
-								"annotation1": "value1",
-								"annotation2": "value2",
-							},
-							Labels: template.KV{
-								"alertname": "Resolved2",
-								"label1":    "value1",
-								"label2":    "value2",
-							},
-							Fingerprint:  "fingerprint4",
-							GeneratorURL: "http://generator4",
-							StartsAt:     time.Date(2002, time.January, 1, 0, 0, 0, 0, time.UTC),
-							EndsAt:       time.Date(2002, time.January, 1, 1, 0, 0, 0, time.UTC),
-						},
-					},
-				},
-			},
-			want: map[string]any{
-				"alerts": map[string]any{
-					"firing": []any{
-						map[string]any{
-							"status": "firing",
-							"labels": map[string]any{
-								"alertname": "Firing1",
-								"label1":    "value1",
-								"label2":    "value2",
-							},
-							"annotations": map[string]any{
-								"annotation1": "value1",
-								"annotation2": "value2",
-							},
-							"startsAt":     time.Date(2001, time.January, 1, 0, 0, 0, 0, time.UTC).Format(time.RFC3339),
-							"endsAt":       time.Date(2001, time.January, 1, 1, 0, 0, 0, time.UTC).Format(time.RFC3339),
-							"fingerprint":  "fingerprint1",
-							"generatorURL": "http://generator1",
-						},
-						map[string]any{
-							"status": "firing",
-							"labels": map[string]any{
-								"alertname": "Firing2",
-								"label1":    "value1",
-								"label2":    "value2",
-							},
-							"annotations": map[string]any{
-								"annotation1": "value1",
-								"annotation2": "value2",
-							},
-							"startsAt":     time.Date(2002, time.January, 1, 0, 0, 0, 0, time.UTC).Format(time.RFC3339),
-							"endsAt":       time.Date(2002, time.January, 1, 1, 0, 0, 0, time.UTC).Format(time.RFC3339),
-							"fingerprint":  "fingerprint2",
-							"generatorURL": "http://generator2",
-						},
-					},
-					"resolved": []any{
-						map[string]any{
-							"status": "resolved",
-							"labels": map[string]any{
-								"alertname": "Resolved1",
-								"label1":    "value1",
-								"label2":    "value2",
-							},
-							"annotations": map[string]any{
-								"annotation1": "value1",
-								"annotation2": "value2",
-							},
-							"startsAt":     time.Date(2001, time.January, 1, 0, 0, 0, 0, time.UTC).Format(time.RFC3339),
-							"endsAt":       time.Date(2001, time.January, 1, 1, 0, 0, 0, time.UTC).Format(time.RFC3339),
-							"fingerprint":  "fingerprint3",
-							"generatorURL": "http://generator3",
-						},
-						map[string]any{
-							"status": "resolved",
-							"labels": map[string]any{
-								"alertname": "Resolved2",
-								"label1":    "value1",
-								"label2":    "value2",
-							},
-							"annotations": map[string]any{
-								"annotation1": "value1",
-								"annotation2": "value2",
-							},
-							"startsAt":     time.Date(2002, time.January, 1, 0, 0, 0, 0, time.UTC).Format(time.RFC3339),
-							"endsAt":       time.Date(2002, time.January, 1, 1, 0, 0, 0, time.UTC).Format(time.RFC3339),
-							"fingerprint":  "fingerprint4",
-							"generatorURL": "http://generator4",
-						},
-					},
-					"num_firing":   2,
-					"num_resolved": 2,
-				},
-			},
-			wantErr: false,
-		},
-	}
-
-	for _, tt := range tests {
-		t.Run(tt.name, func(t *testing.T) {
-			n := &Notifier{
-				conf: &config.PagerdutyConfig{
-					Details: tt.args.details,
-				},
-				tmpl: test.CreateTmpl(t),
-			}
-			got, err := n.renderDetails(tt.args.data)
-			if (err != nil) != tt.wantErr {
-				t.Errorf("renderDetails() error = %v, wantErr %v", err, tt.wantErr)
-				return
-			}
-			require.Equal(t, tt.want, got)
-		})
-	}
-}

pkg/alertmanager/alertmanagernotify/receiver.go

@@ -2,14 +2,8 @@ package alertmanagernotify
 
 import (
 	"log/slog"
-	"slices"
 
-	"github.com/SigNoz/signoz/pkg/alertmanager/alertmanagernotify/email"
 	"github.com/SigNoz/signoz/pkg/alertmanager/alertmanagernotify/msteamsv2"
-	"github.com/SigNoz/signoz/pkg/alertmanager/alertmanagernotify/opsgenie"
-	"github.com/SigNoz/signoz/pkg/alertmanager/alertmanagernotify/pagerduty"
-	"github.com/SigNoz/signoz/pkg/alertmanager/alertmanagernotify/slack"
-	"github.com/SigNoz/signoz/pkg/alertmanager/alertmanagernotify/webhook"
 	"github.com/SigNoz/signoz/pkg/types/alertmanagertypes"
 	"github.com/prometheus/alertmanager/config/receiver"
 	"github.com/prometheus/alertmanager/notify"
@@ -17,15 +11,6 @@ import (
 	"github.com/prometheus/alertmanager/types"
 )
 
-var customNotifierIntegrations = []string{
-	webhook.Integration,
-	email.Integration,
-	pagerduty.Integration,
-	opsgenie.Integration,
-	slack.Integration,
-	msteamsv2.Integration,
-}
-
 func NewReceiverIntegrations(nc alertmanagertypes.Receiver, tmpl *template.Template, logger *slog.Logger) ([]notify.Integration, error) {
 	upstreamIntegrations, err := receiver.BuildReceiverIntegrations(nc, tmpl, logger)
 	if err != nil {
@@ -46,29 +31,14 @@ func NewReceiverIntegrations(nc alertmanagertypes.Receiver, tmpl *template.Templ
 	)
 
 	for _, integration := range upstreamIntegrations {
-		// skip upstream integration if we support custom integration for it
-		if !slices.Contains(customNotifierIntegrations, integration.Name()) {
+		// skip upstream msteamsv2 integration
+		if integration.Name() != "msteamsv2" {
 			integrations = append(integrations, integration)
 		}
 	}
 
-	for i, c := range nc.WebhookConfigs {
-		add(webhook.Integration, i, c, func(l *slog.Logger) (notify.Notifier, error) { return webhook.New(c, tmpl, l) })
-	}
-	for i, c := range nc.EmailConfigs {
-		add(email.Integration, i, c, func(l *slog.Logger) (notify.Notifier, error) { return email.New(c, tmpl, l), nil })
-	}
-	for i, c := range nc.PagerdutyConfigs {
-		add(pagerduty.Integration, i, c, func(l *slog.Logger) (notify.Notifier, error) { return pagerduty.New(c, tmpl, l) })
-	}
-	for i, c := range nc.OpsGenieConfigs {
-		add(opsgenie.Integration, i, c, func(l *slog.Logger) (notify.Notifier, error) { return opsgenie.New(c, tmpl, l) })
-	}
-	for i, c := range nc.SlackConfigs {
-		add(slack.Integration, i, c, func(l *slog.Logger) (notify.Notifier, error) { return slack.New(c, tmpl, l) })
-	}
 	for i, c := range nc.MSTeamsV2Configs {
-		add(msteamsv2.Integration, i, c, func(l *slog.Logger) (notify.Notifier, error) {
+		add("msteamsv2", i, c, func(l *slog.Logger) (notify.Notifier, error) {
 			return msteamsv2.New(c, tmpl, `{{ template "msteamsv2.default.titleLink" . }}`, l)
 		})
 	}

pkg/alertmanager/alertmanagernotify/slack/slack.go

@@ -1,291 +0,0 @@
-package slack
-
-import (
-	"bytes"
-	"context"
-	"encoding/json"
-	"io"
-	"log/slog"
-	"net/http"
-	"os"
-	"strings"
-
-	"github.com/SigNoz/signoz/pkg/alertmanager/alertmanagertemplate"
-	"github.com/SigNoz/signoz/pkg/errors"
-	commoncfg "github.com/prometheus/common/config"
-
-	"github.com/prometheus/alertmanager/config"
-	"github.com/prometheus/alertmanager/notify"
-	"github.com/prometheus/alertmanager/template"
-	"github.com/prometheus/alertmanager/types"
-)
-
-const (
-	Integration = "slack"
-)
-
-// https://api.slack.com/reference/messaging/attachments#legacy_fields - 1024, no units given, assuming runes or characters.
-const maxTitleLenRunes = 1024
-
-// Notifier implements a Notifier for Slack notifications.
-type Notifier struct {
-	conf    *config.SlackConfig
-	tmpl    *template.Template
-	logger  *slog.Logger
-	client  *http.Client
-	retrier *notify.Retrier
-
-	postJSONFunc func(ctx context.Context, client *http.Client, url string, body io.Reader) (*http.Response, error)
-}
-
-// New returns a new Slack notification handler.
-func New(c *config.SlackConfig, t *template.Template, l *slog.Logger, httpOpts ...commoncfg.HTTPClientOption) (*Notifier, error) {
-	client, err := notify.NewClientWithTracing(*c.HTTPConfig, Integration, httpOpts...)
-	if err != nil {
-		return nil, err
-	}
-
-	return &Notifier{
-		conf:         c,
-		tmpl:         t,
-		logger:       l,
-		client:       client,
-		retrier:      &notify.Retrier{},
-		postJSONFunc: notify.PostJSON,
-	}, nil
-}
-
-// request is the request for sending a slack notification.
-type request struct {
-	Channel     string       `json:"channel,omitempty"`
-	Username    string       `json:"username,omitempty"`
-	IconEmoji   string       `json:"icon_emoji,omitempty"`
-	IconURL     string       `json:"icon_url,omitempty"`
-	LinkNames   bool         `json:"link_names,omitempty"`
-	Text        string       `json:"text,omitempty"`
-	Attachments []attachment `json:"attachments"`
-}
-
-// attachment is used to display a richly-formatted message block.
-type attachment struct {
-	Title      string               `json:"title,omitempty"`
-	TitleLink  string               `json:"title_link,omitempty"`
-	Pretext    string               `json:"pretext,omitempty"`
-	Text       string               `json:"text"`
-	Fallback   string               `json:"fallback"`
-	CallbackID string               `json:"callback_id"`
-	Fields     []config.SlackField  `json:"fields,omitempty"`
-	Actions    []config.SlackAction `json:"actions,omitempty"`
-	ImageURL   string               `json:"image_url,omitempty"`
-	ThumbURL   string               `json:"thumb_url,omitempty"`
-	Footer     string               `json:"footer"`
-	Color      string               `json:"color,omitempty"`
-	MrkdwnIn   []string             `json:"mrkdwn_in,omitempty"`
-}
-
-// Notify implements the Notifier interface.
-func (n *Notifier) Notify(ctx context.Context, as ...*types.Alert) (bool, error) {
-	var err error
-
-	key, err := notify.ExtractGroupKey(ctx)
-	if err != nil {
-		return false, err
-	}
-	logger := n.logger.With("group_key", key)
-	logger.DebugContext(ctx, "extracted group key")
-
-	var (
-		data     = notify.GetTemplateData(ctx, n.tmpl, as, logger)
-		tmplText = notify.TmplText(n.tmpl, data, &err)
-	)
-
-	titleTmpl, bodyTmpl := alertmanagertemplate.ExtractTemplatesFromAnnotations(as)
-	expanded, expandErr := alertmanagertemplate.ExpandAlertTemplates(ctx, n.tmpl, alertmanagertemplate.TemplateInput{
-		TitleTemplate:        titleTmpl,
-		BodyTemplate:         bodyTmpl,
-		DefaultTitleTemplate: n.conf.Title,
-		DefaultBodyTemplate:  n.conf.Text,
-	}, as, logger)
-	if expandErr != nil {
-		return false, expandErr
-	}
-
-	var markdownIn []string
-
-	if len(n.conf.MrkdwnIn) == 0 {
-		markdownIn = []string{"fallback", "pretext", "text"}
-	} else {
-		markdownIn = n.conf.MrkdwnIn
-	}
-
-	expandedTitle, truncated := notify.TruncateInRunes(expanded.Title, maxTitleLenRunes)
-	if truncated {
-		logger.WarnContext(ctx, "Truncated title", "max_runes", maxTitleLenRunes)
-	}
-	att := &attachment{
-		Title:      expandedTitle,
-		TitleLink:  tmplText(n.conf.TitleLink),
-		Pretext:    tmplText(n.conf.Pretext),
-		Text:       expanded.Body,
-		Fallback:   tmplText(n.conf.Fallback),
-		CallbackID: tmplText(n.conf.CallbackID),
-		ImageURL:   tmplText(n.conf.ImageURL),
-		ThumbURL:   tmplText(n.conf.ThumbURL),
-		Footer:     tmplText(n.conf.Footer),
-		Color:      tmplText(n.conf.Color),
-		MrkdwnIn:   markdownIn,
-	}
-
-	numFields := len(n.conf.Fields)
-	if numFields > 0 {
-		fields := make([]config.SlackField, numFields)
-		for index, field := range n.conf.Fields {
-			// Check if short was defined for the field otherwise fallback to the global setting
-			var short bool
-			if field.Short != nil {
-				short = *field.Short
-			} else {
-				short = n.conf.ShortFields
-			}
-
-			// Rebuild the field by executing any templates and setting the new value for short
-			fields[index] = config.SlackField{
-				Title: tmplText(field.Title),
-				Value: tmplText(field.Value),
-				Short: &short,
-			}
-		}
-		att.Fields = fields
-	}
-
-	numActions := len(n.conf.Actions)
-	if numActions > 0 {
-		actions := make([]config.SlackAction, numActions)
-		for index, action := range n.conf.Actions {
-			slackAction := config.SlackAction{
-				Type:  tmplText(action.Type),
-				Text:  tmplText(action.Text),
-				URL:   tmplText(action.URL),
-				Style: tmplText(action.Style),
-				Name:  tmplText(action.Name),
-				Value: tmplText(action.Value),
-			}
-
-			if action.ConfirmField != nil {
-				slackAction.ConfirmField = &config.SlackConfirmationField{
-					Title:       tmplText(action.ConfirmField.Title),
-					Text:        tmplText(action.ConfirmField.Text),
-					OkText:      tmplText(action.ConfirmField.OkText),
-					DismissText: tmplText(action.ConfirmField.DismissText),
-				}
-			}
-
-			actions[index] = slackAction
-		}
-		att.Actions = actions
-	}
-
-	req := &request{
-		Channel:     tmplText(n.conf.Channel),
-		Username:    tmplText(n.conf.Username),
-		IconEmoji:   tmplText(n.conf.IconEmoji),
-		IconURL:     tmplText(n.conf.IconURL),
-		LinkNames:   n.conf.LinkNames,
-		Text:        tmplText(n.conf.MessageText),
-		Attachments: []attachment{*att},
-	}
-	if err != nil {
-		return false, err
-	}
-
-	var buf bytes.Buffer
-	if err := json.NewEncoder(&buf).Encode(req); err != nil {
-		return false, err
-	}
-
-	var u string
-	if n.conf.APIURL != nil {
-		u = n.conf.APIURL.String()
-	} else {
-		content, err := os.ReadFile(n.conf.APIURLFile)
-		if err != nil {
-			return false, err
-		}
-		u = strings.TrimSpace(string(content))
-	}
-
-	if n.conf.Timeout > 0 {
-		postCtx, cancel := context.WithTimeoutCause(ctx, n.conf.Timeout, errors.NewInternalf(errors.CodeInternal, "configured slack timeout reached (%s)", n.conf.Timeout))
-		defer cancel()
-		ctx = postCtx
-	}
-
-	resp, err := n.postJSONFunc(ctx, n.client, u, &buf) //nolint:bodyclose
-	if err != nil {
-		if ctx.Err() != nil {
-			err = errors.NewInternalf(errors.CodeInternal, "failed to post JSON to slack: %v", context.Cause(ctx))
-		}
-		return true, notify.RedactURL(err)
-	}
-	defer notify.Drain(resp)
-
-	// Use a retrier to generate an error message for non-200 responses and
-	// classify them as retriable or not.
-	retry, err := n.retrier.Check(resp.StatusCode, resp.Body)
-	if err != nil {
-		err = errors.NewInternalf(errors.CodeInternal, "channel %q: %v", req.Channel, err)
-		return retry, notify.NewErrorWithReason(notify.GetFailureReasonFromStatusCode(resp.StatusCode), err)
-	}
-
-	// Slack web API might return errors with a 200 response code.
-	// https://slack.dev/node-slack-sdk/web-api#handle-errors
-	retry, err = checkResponseError(resp)
-	if err != nil {
-		err = errors.NewInternalf(errors.CodeInternal, "channel %q: %v", req.Channel, err)
-		return retry, notify.NewErrorWithReason(notify.ClientErrorReason, err)
-	}
-
-	return retry, nil
-}
-
-// checkResponseError parses out the error message from Slack API response.
-func checkResponseError(resp *http.Response) (bool, error) {
-	body, err := io.ReadAll(resp.Body)
-	if err != nil {
-		return true, errors.WrapInternalf(err, errors.CodeInternal, "could not read response body")
-	}
-
-	if strings.HasPrefix(resp.Header.Get("Content-Type"), "application/json") {
-		return checkJSONResponseError(body)
-	}
-	return checkTextResponseError(body)
-}
-
-// checkTextResponseError classifies plaintext responses from Slack.
-// A plaintext (non-JSON) response is successful if it's a string "ok".
-// This is typically a response for an Incoming Webhook
-// (https://api.slack.com/messaging/webhooks#handling_errors)
-func checkTextResponseError(body []byte) (bool, error) {
-	if !bytes.Equal(body, []byte("ok")) {
-		return false, errors.NewInternalf(errors.CodeInternal, "received an error response from Slack: %s", string(body))
-	}
-	return false, nil
-}
-
-// checkJSONResponseError classifies JSON responses from Slack.
-func checkJSONResponseError(body []byte) (bool, error) {
-	// response is for parsing out errors from the JSON response.
-	type response struct {
-		OK    bool   `json:"ok"`
-		Error string `json:"error"`
-	}
-
-	var data response
-	if err := json.Unmarshal(body, &data); err != nil {
-		return true, errors.NewInternalf(errors.CodeInternal, "could not unmarshal JSON response %q: %v", string(body), err)
-	}
-	if !data.OK {
-		return false, errors.NewInternalf(errors.CodeInternal, "error response from Slack: %s", data.Error)
-	}
-	return false, nil
-}

pkg/alertmanager/alertmanagernotify/slack/slack_test.go

@@ -1,339 +0,0 @@
-package slack
-
-import (
-	"context"
-	"encoding/json"
-	"io"
-	"log/slog"
-	"net/http"
-	"net/http/httptest"
-	"net/url"
-	"os"
-	"strings"
-	"testing"
-	"time"
-
-	commoncfg "github.com/prometheus/common/config"
-	"github.com/prometheus/common/model"
-	"github.com/prometheus/common/promslog"
-	"github.com/stretchr/testify/require"
-
-	"github.com/prometheus/alertmanager/config"
-	"github.com/prometheus/alertmanager/notify"
-	"github.com/prometheus/alertmanager/notify/test"
-	"github.com/prometheus/alertmanager/template"
-	"github.com/prometheus/alertmanager/types"
-)
-
-func TestSlackRetry(t *testing.T) {
-	notifier, err := New(
-		&config.SlackConfig{
-			HTTPConfig: &commoncfg.HTTPClientConfig{},
-		},
-		test.CreateTmpl(t),
-		promslog.NewNopLogger(),
-	)
-	require.NoError(t, err)
-
-	for statusCode, expected := range test.RetryTests(test.DefaultRetryCodes()) {
-		actual, _ := notifier.retrier.Check(statusCode, nil)
-		require.Equal(t, expected, actual, "error on status %d", statusCode)
-	}
-}
-
-func TestSlackRedactedURL(t *testing.T) {
-	ctx, u, fn := test.GetContextWithCancelingURL()
-	defer fn()
-
-	notifier, err := New(
-		&config.SlackConfig{
-			APIURL:     &config.SecretURL{URL: u},
-			HTTPConfig: &commoncfg.HTTPClientConfig{},
-		},
-		test.CreateTmpl(t),
-		promslog.NewNopLogger(),
-	)
-	require.NoError(t, err)
-
-	test.AssertNotifyLeaksNoSecret(ctx, t, notifier, u.String())
-}
-
-func TestGettingSlackURLFromFile(t *testing.T) {
-	ctx, u, fn := test.GetContextWithCancelingURL()
-	defer fn()
-
-	f, err := os.CreateTemp(t.TempDir(), "slack_test")
-	require.NoError(t, err, "creating temp file failed")
-	_, err = f.WriteString(u.String())
-	require.NoError(t, err, "writing to temp file failed")
-
-	notifier, err := New(
-		&config.SlackConfig{
-			APIURLFile: f.Name(),
-			HTTPConfig: &commoncfg.HTTPClientConfig{},
-		},
-		test.CreateTmpl(t),
-		promslog.NewNopLogger(),
-	)
-	require.NoError(t, err)
-
-	test.AssertNotifyLeaksNoSecret(ctx, t, notifier, u.String())
-}
-
-func TestTrimmingSlackURLFromFile(t *testing.T) {
-	ctx, u, fn := test.GetContextWithCancelingURL()
-	defer fn()
-
-	f, err := os.CreateTemp(t.TempDir(), "slack_test_newline")
-	require.NoError(t, err, "creating temp file failed")
-	_, err = f.WriteString(u.String() + "\n\n")
-	require.NoError(t, err, "writing to temp file failed")
-
-	notifier, err := New(
-		&config.SlackConfig{
-			APIURLFile: f.Name(),
-			HTTPConfig: &commoncfg.HTTPClientConfig{},
-		},
-		test.CreateTmpl(t),
-		promslog.NewNopLogger(),
-	)
-	require.NoError(t, err)
-
-	test.AssertNotifyLeaksNoSecret(ctx, t, notifier, u.String())
-}
-
-func TestNotifier_Notify_WithReason(t *testing.T) {
-	tests := []struct {
-		name           string
-		statusCode     int
-		responseBody   string
-		expectedReason notify.Reason
-		expectedErr    string
-		expectedRetry  bool
-		noError        bool
-	}{
-		{
-			name:           "with a 4xx status code",
-			statusCode:     http.StatusUnauthorized,
-			expectedReason: notify.ClientErrorReason,
-			expectedRetry:  false,
-			expectedErr:    "unexpected status code 401",
-		},
-		{
-			name:           "with a 5xx status code",
-			statusCode:     http.StatusInternalServerError,
-			expectedReason: notify.ServerErrorReason,
-			expectedRetry:  true,
-			expectedErr:    "unexpected status code 500",
-		},
-		{
-			name:           "with a 3xx status code",
-			statusCode:     http.StatusTemporaryRedirect,
-			expectedReason: notify.DefaultReason,
-			expectedRetry:  false,
-			expectedErr:    "unexpected status code 307",
-		},
-		{
-			name:           "with a 1xx status code",
-			statusCode:     http.StatusSwitchingProtocols,
-			expectedReason: notify.DefaultReason,
-			expectedRetry:  false,
-			expectedErr:    "unexpected status code 101",
-		},
-		{
-			name:           "2xx response with invalid JSON",
-			statusCode:     http.StatusOK,
-			responseBody:   `{"not valid json"}`,
-			expectedReason: notify.ClientErrorReason,
-			expectedRetry:  true,
-			expectedErr:    "could not unmarshal",
-		},
-		{
-			name:           "2xx response with a JSON error",
-			statusCode:     http.StatusOK,
-			responseBody:   `{"ok":false,"error":"error_message"}`,
-			expectedReason: notify.ClientErrorReason,
-			expectedRetry:  false,
-			expectedErr:    "error response from Slack: error_message",
-		},
-		{
-			name:           "2xx response with a plaintext error",
-			statusCode:     http.StatusOK,
-			responseBody:   "no_channel",
-			expectedReason: notify.ClientErrorReason,
-			expectedRetry:  false,
-			expectedErr:    "error response from Slack: no_channel",
-		},
-		{
-			name:         "successful JSON response",
-			statusCode:   http.StatusOK,
-			responseBody: `{"ok":true}`,
-			noError:      true,
-		},
-		{
-			name:         "successful plaintext response",
-			statusCode:   http.StatusOK,
-			responseBody: "ok",
-			noError:      true,
-		},
-	}
-	for _, tt := range tests {
-		t.Run(tt.name, func(t *testing.T) {
-			apiurl, _ := url.Parse("https://slack.com/post.Message")
-			notifier, err := New(
-				&config.SlackConfig{
-					NotifierConfig: config.NotifierConfig{},
-					HTTPConfig:     &commoncfg.HTTPClientConfig{},
-					APIURL:         &config.SecretURL{URL: apiurl},
-					Channel:        "channelname",
-				},
-				test.CreateTmpl(t),
-				promslog.NewNopLogger(),
-			)
-			require.NoError(t, err)
-
-			notifier.postJSONFunc = func(ctx context.Context, client *http.Client, url string, body io.Reader) (*http.Response, error) {
-				resp := httptest.NewRecorder()
-				if strings.HasPrefix(tt.responseBody, "{") {
-					resp.Header().Add("Content-Type", "application/json; charset=utf-8")
-				}
-				resp.WriteHeader(tt.statusCode)
-				_, _ = resp.WriteString(tt.responseBody)
-				return resp.Result(), nil
-			}
-			ctx := context.Background()
-			ctx = notify.WithGroupKey(ctx, "1")
-
-			alert1 := &types.Alert{
-				Alert: model.Alert{
-					StartsAt: time.Now(),
-					EndsAt:   time.Now().Add(time.Hour),
-				},
-			}
-			retry, err := notifier.Notify(ctx, alert1)
-			require.Equal(t, tt.expectedRetry, retry)
-			if tt.noError {
-				require.NoError(t, err)
-			} else {
-				var reasonError *notify.ErrorWithReason
-				require.ErrorAs(t, err, &reasonError)
-				require.Equal(t, tt.expectedReason, reasonError.Reason)
-				require.Contains(t, err.Error(), tt.expectedErr)
-				require.Contains(t, err.Error(), "channelname")
-			}
-		})
-	}
-}
-
-func TestSlackTimeout(t *testing.T) {
-	tests := map[string]struct {
-		latency time.Duration
-		timeout time.Duration
-		wantErr bool
-	}{
-		"success": {latency: 100 * time.Millisecond, timeout: 120 * time.Millisecond, wantErr: false},
-		"error":   {latency: 100 * time.Millisecond, timeout: 80 * time.Millisecond, wantErr: true},
-	}
-
-	for name, tt := range tests {
-		t.Run(name, func(t *testing.T) {
-			u, _ := url.Parse("https://slack.com/post.Message")
-			notifier, err := New(
-				&config.SlackConfig{
-					NotifierConfig: config.NotifierConfig{},
-					HTTPConfig:     &commoncfg.HTTPClientConfig{},
-					APIURL:         &config.SecretURL{URL: u},
-					Channel:        "channelname",
-					Timeout:        tt.timeout,
-				},
-				test.CreateTmpl(t),
-				promslog.NewNopLogger(),
-			)
-			require.NoError(t, err)
-			notifier.postJSONFunc = func(ctx context.Context, client *http.Client, url string, body io.Reader) (*http.Response, error) {
-				select {
-				case <-ctx.Done():
-					return nil, ctx.Err()
-				case <-time.After(tt.latency):
-					resp := httptest.NewRecorder()
-					resp.Header().Set("Content-Type", "application/json; charset=utf-8")
-					resp.WriteHeader(http.StatusOK)
-					_, _ = resp.WriteString(`{"ok":true}`)
-
-					return resp.Result(), nil
-				}
-			}
-			ctx := context.Background()
-			ctx = notify.WithGroupKey(ctx, "1")
-
-			alert := &types.Alert{
-				Alert: model.Alert{
-					StartsAt: time.Now(),
-					EndsAt:   time.Now().Add(time.Hour),
-				},
-			}
-			_, err = notifier.Notify(ctx, alert)
-			require.Equal(t, tt.wantErr, err != nil)
-		})
-	}
-}
-
-func TestSlackMessageField(t *testing.T) {
-	// 1. Setup a fake Slack server
-	server := httptest.NewServer(http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
-		var body map[string]any
-		if err := json.NewDecoder(r.Body).Decode(&body); err != nil {
-			t.Fatal(err)
-		}
-
-		// 2. VERIFY: Top-level text exists
-		if body["text"] != "My Top Level Message" {
-			t.Errorf("Expected top-level 'text' to be 'My Top Level Message', got %v", body["text"])
-		}
-
-		// 3. VERIFY: Old attachments still exist
-		attachments, ok := body["attachments"].([]any)
-		if !ok || len(attachments) == 0 {
-			t.Errorf("Expected attachments to exist")
-		} else {
-			first := attachments[0].(map[string]any)
-			if first["title"] != "Old Attachment Title" {
-				t.Errorf("Expected attachment title 'Old Attachment Title', got %v", first["title"])
-			}
-		}
-
-		w.Header().Set("Content-Type", "application/json")
-		w.WriteHeader(http.StatusOK)
-		_, _ = w.Write([]byte(`{"ok": true}`))
-	}))
-	defer server.Close()
-
-	// 4. Configure Notifier with BOTH new and old fields
-	u, _ := url.Parse(server.URL)
-	conf := &config.SlackConfig{
-		APIURL:      &config.SecretURL{URL: u},
-		MessageText: "My Top Level Message", // Your NEW field
-		Title:       "Old Attachment Title", // An OLD field
-		Channel:     "#test-channel",
-		HTTPConfig:  &commoncfg.HTTPClientConfig{},
-	}
-
-	tmpl, err := template.FromGlobs([]string{})
-	if err != nil {
-		t.Fatal(err)
-	}
-	tmpl.ExternalURL = u
-
-	logger := slog.New(slog.DiscardHandler)
-	notifier, err := New(conf, tmpl, logger)
-	if err != nil {
-		t.Fatal(err)
-	}
-
-	ctx := context.Background()
-	ctx = notify.WithGroupKey(ctx, "test-group-key")
-
-	if _, err := notifier.Notify(ctx); err != nil {
-		t.Fatal("Notify failed:", err)
-	}
-}

pkg/alertmanager/alertmanagernotify/webhook/webhook.go

@@ -1,136 +0,0 @@
-package webhook
-
-import (
-	"bytes"
-	"context"
-	"encoding/json"
-	"log/slog"
-	"net/http"
-	"os"
-	"strings"
-
-	"github.com/SigNoz/signoz/pkg/errors"
-	commoncfg "github.com/prometheus/common/config"
-
-	"github.com/prometheus/alertmanager/config"
-	"github.com/prometheus/alertmanager/notify"
-	"github.com/prometheus/alertmanager/template"
-	"github.com/prometheus/alertmanager/types"
-)
-
-const (
-	Integration = "webhook"
-)
-
-// Notifier implements a Notifier for generic webhooks.
-type Notifier struct {
-	conf    *config.WebhookConfig
-	tmpl    *template.Template
-	logger  *slog.Logger
-	client  *http.Client
-	retrier *notify.Retrier
-}
-
-// New returns a new Webhook.
-func New(conf *config.WebhookConfig, t *template.Template, l *slog.Logger, httpOpts ...commoncfg.HTTPClientOption) (*Notifier, error) {
-	client, err := notify.NewClientWithTracing(*conf.HTTPConfig, Integration, httpOpts...)
-	if err != nil {
-		return nil, err
-	}
-	return &Notifier{
-		conf:   conf,
-		tmpl:   t,
-		logger: l,
-		client: client,
-		// Webhooks are assumed to respond with 2xx response codes on a successful
-		// request and 5xx response codes are assumed to be recoverable.
-		retrier: &notify.Retrier{},
-	}, nil
-}
-
-// Message defines the JSON object send to webhook endpoints.
-type Message struct {
-	*template.Data
-
-	// The protocol version.
-	Version         string `json:"version"`
-	GroupKey        string `json:"groupKey"`
-	TruncatedAlerts uint64 `json:"truncatedAlerts"`
-}
-
-func truncateAlerts(maxAlerts uint64, alerts []*types.Alert) ([]*types.Alert, uint64) {
-	if maxAlerts != 0 && uint64(len(alerts)) > maxAlerts {
-		return alerts[:maxAlerts], uint64(len(alerts)) - maxAlerts
-	}
-
-	return alerts, 0
-}
-
-// Notify implements the Notifier interface.
-func (n *Notifier) Notify(ctx context.Context, alerts ...*types.Alert) (bool, error) {
-	alerts, numTruncated := truncateAlerts(n.conf.MaxAlerts, alerts)
-	data := notify.GetTemplateData(ctx, n.tmpl, alerts, n.logger)
-
-	groupKey, err := notify.ExtractGroupKey(ctx)
-	if err != nil {
-		return false, err
-	}
-
-	logger := n.logger.With("group_key", groupKey)
-	logger.DebugContext(ctx, "extracted group key")
-
-	msg := &Message{
-		Version:         "4",
-		Data:            data,
-		GroupKey:        groupKey.String(),
-		TruncatedAlerts: numTruncated,
-	}
-
-	var buf bytes.Buffer
-	if err := json.NewEncoder(&buf).Encode(msg); err != nil {
-		return false, err
-	}
-
-	var url string
-	var tmplErr error
-	tmpl := notify.TmplText(n.tmpl, data, &tmplErr)
-
-	if n.conf.URL != "" {
-		url = tmpl(string(n.conf.URL))
-	} else {
-		content, err := os.ReadFile(n.conf.URLFile)
-		if err != nil {
-			return false, errors.WrapInternalf(err, errors.CodeInternal, "read url_file")
-		}
-		url = tmpl(strings.TrimSpace(string(content)))
-	}
-
-	if tmplErr != nil {
-		return false, errors.NewInternalf(errors.CodeInternal, "failed to template webhook URL: %v", tmplErr)
-	}
-
-	if url == "" {
-		return false, errors.NewInternalf(errors.CodeInternal, "webhook URL is empty after templating")
-	}
-
-	if n.conf.Timeout > 0 {
-		postCtx, cancel := context.WithTimeoutCause(ctx, n.conf.Timeout, errors.NewInternalf(errors.CodeInternal, "configured webhook timeout reached (%s)", n.conf.Timeout))
-		defer cancel()
-		ctx = postCtx
-	}
-
-	resp, err := notify.PostJSON(ctx, n.client, url, &buf) //nolint:bodyclose
-	if err != nil {
-		if ctx.Err() != nil {
-			err = errors.NewInternalf(errors.CodeInternal, "failed to post JSON to webhook: %v", context.Cause(ctx))
-		}
-		return true, notify.RedactURL(err)
-	}
-	defer notify.Drain(resp)
-
-	shouldRetry, err := n.retrier.Check(resp.StatusCode, resp.Body)
-	if err != nil {
-		return shouldRetry, notify.NewErrorWithReason(notify.GetFailureReasonFromStatusCode(resp.StatusCode), err)
-	}
-	return shouldRetry, err
-}

pkg/alertmanager/alertmanagernotify/webhook/webhook_test.go

@@ -1,214 +0,0 @@
-package webhook
-
-import (
-	"bytes"
-	"context"
-	"fmt"
-	"io"
-	"net/http"
-	"net/http/httptest"
-	"os"
-	"testing"
-	"time"
-
-	commoncfg "github.com/prometheus/common/config"
-	"github.com/prometheus/common/model"
-	"github.com/prometheus/common/promslog"
-	"github.com/stretchr/testify/require"
-
-	"github.com/prometheus/alertmanager/config"
-	"github.com/prometheus/alertmanager/notify"
-	"github.com/prometheus/alertmanager/notify/test"
-	"github.com/prometheus/alertmanager/types"
-)
-
-func TestWebhookRetry(t *testing.T) {
-	notifier, err := New(
-		&config.WebhookConfig{
-			URL:        config.SecretTemplateURL("http://example.com"),
-			HTTPConfig: &commoncfg.HTTPClientConfig{},
-		},
-		test.CreateTmpl(t),
-		promslog.NewNopLogger(),
-	)
-	if err != nil {
-		require.NoError(t, err)
-	}
-
-	t.Run("test retry status code", func(t *testing.T) {
-		for statusCode, expected := range test.RetryTests(test.DefaultRetryCodes()) {
-			actual, _ := notifier.retrier.Check(statusCode, nil)
-			require.Equal(t, expected, actual, "error on status %d", statusCode)
-		}
-	})
-
-	t.Run("test retry error details", func(t *testing.T) {
-		for _, tc := range []struct {
-			status int
-			body   io.Reader
-
-			exp string
-		}{
-			{
-				status: http.StatusBadRequest,
-				body: bytes.NewBuffer([]byte(
-					`{"status":"invalid event"}`,
-				)),
-
-				exp: fmt.Sprintf(`unexpected status code %d: {"status":"invalid event"}`, http.StatusBadRequest),
-			},
-			{
-				status: http.StatusBadRequest,
-
-				exp: fmt.Sprintf(`unexpected status code %d`, http.StatusBadRequest),
-			},
-		} {
-			t.Run("", func(t *testing.T) {
-				_, err = notifier.retrier.Check(tc.status, tc.body)
-				require.Equal(t, tc.exp, err.Error())
-			})
-		}
-	})
-}
-
-func TestWebhookTruncateAlerts(t *testing.T) {
-	alerts := make([]*types.Alert, 10)
-
-	truncatedAlerts, numTruncated := truncateAlerts(0, alerts)
-	require.Len(t, truncatedAlerts, 10)
-	require.EqualValues(t, 0, numTruncated)
-
-	truncatedAlerts, numTruncated = truncateAlerts(4, alerts)
-	require.Len(t, truncatedAlerts, 4)
-	require.EqualValues(t, 6, numTruncated)
-
-	truncatedAlerts, numTruncated = truncateAlerts(100, alerts)
-	require.Len(t, truncatedAlerts, 10)
-	require.EqualValues(t, 0, numTruncated)
-}
-
-func TestWebhookRedactedURL(t *testing.T) {
-	ctx, u, fn := test.GetContextWithCancelingURL()
-	defer fn()
-
-	secret := "secret"
-	notifier, err := New(
-		&config.WebhookConfig{
-			URL:        config.SecretTemplateURL(u.String()),
-			HTTPConfig: &commoncfg.HTTPClientConfig{},
-		},
-		test.CreateTmpl(t),
-		promslog.NewNopLogger(),
-	)
-	require.NoError(t, err)
-
-	test.AssertNotifyLeaksNoSecret(ctx, t, notifier, secret)
-}
-
-func TestWebhookReadingURLFromFile(t *testing.T) {
-	ctx, u, fn := test.GetContextWithCancelingURL()
-	defer fn()
-
-	f, err := os.CreateTemp(t.TempDir(), "webhook_url")
-	require.NoError(t, err, "creating temp file failed")
-	_, err = f.WriteString(u.String() + "\n")
-	require.NoError(t, err, "writing to temp file failed")
-
-	notifier, err := New(
-		&config.WebhookConfig{
-			URLFile:    f.Name(),
-			HTTPConfig: &commoncfg.HTTPClientConfig{},
-		},
-		test.CreateTmpl(t),
-		promslog.NewNopLogger(),
-	)
-	require.NoError(t, err)
-
-	test.AssertNotifyLeaksNoSecret(ctx, t, notifier, u.String())
-}
-
-func TestWebhookURLTemplating(t *testing.T) {
-	var calledURL string
-	srv := httptest.NewServer(http.HandlerFunc(func(w http.ResponseWriter, r *http.Request) {
-		calledURL = r.URL.Path
-		w.WriteHeader(http.StatusOK)
-	}))
-	defer srv.Close()
-
-	tests := []struct {
-		name           string
-		url            string
-		groupLabels    model.LabelSet
-		alertLabels    model.LabelSet
-		expectError    bool
-		expectedErrMsg string
-		expectedPath   string
-	}{
-		{
-			name:         "templating with alert labels",
-			url:          srv.URL + "/{{ .GroupLabels.alertname }}/{{ .CommonLabels.severity }}",
-			groupLabels:  model.LabelSet{"alertname": "TestAlert"},
-			alertLabels:  model.LabelSet{"alertname": "TestAlert", "severity": "critical"},
-			expectError:  false,
-			expectedPath: "/TestAlert/critical",
-		},
-		{
-			name:           "invalid template field",
-			url:            srv.URL + "/{{ .InvalidField }}",
-			groupLabels:    model.LabelSet{"alertname": "TestAlert"},
-			alertLabels:    model.LabelSet{"alertname": "TestAlert"},
-			expectError:    true,
-			expectedErrMsg: "failed to template webhook URL",
-		},
-		{
-			name:           "template renders to empty string",
-			url:            "{{ if .CommonLabels.nonexistent }}http://example.com{{ end }}",
-			groupLabels:    model.LabelSet{"alertname": "TestAlert"},
-			alertLabels:    model.LabelSet{"alertname": "TestAlert"},
-			expectError:    true,
-			expectedErrMsg: "webhook URL is empty after templating",
-		},
-	}
-
-	for _, tc := range tests {
-		t.Run(tc.name, func(t *testing.T) {
-			calledURL = "" // Reset for each test
-
-			notifier, err := New(
-				&config.WebhookConfig{
-					URL:        config.SecretTemplateURL(tc.url),
-					HTTPConfig: &commoncfg.HTTPClientConfig{},
-				},
-				test.CreateTmpl(t),
-				promslog.NewNopLogger(),
-			)
-			require.NoError(t, err)
-
-			ctx := context.Background()
-			ctx = notify.WithGroupKey(ctx, "test-group")
-			if tc.groupLabels != nil {
-				ctx = notify.WithGroupLabels(ctx, tc.groupLabels)
-			}
-
-			alerts := []*types.Alert{
-				{
-					Alert: model.Alert{
-						Labels:   tc.alertLabels,
-						StartsAt: time.Now(),
-						EndsAt:   time.Now().Add(time.Hour),
-					},
-				},
-			}
-
-			_, err = notifier.Notify(ctx, alerts...)
-
-			if tc.expectError {
-				require.Error(t, err)
-				require.Contains(t, err.Error(), tc.expectedErrMsg)
-			} else {
-				require.NoError(t, err)
-				require.Equal(t, tc.expectedPath, calledURL)
-			}
-		})
-	}
-}

pkg/alertmanager/alertmanagertemplate/alertmanagertemplate.go

@@ -1,336 +0,0 @@
-package alertmanagertemplate
-
-import (
-	"context"
-	"log/slog"
-	"strings"
-	"time"
-
-	"github.com/SigNoz/signoz/pkg/types/ruletypes"
-	"github.com/prometheus/alertmanager/notify"
-	"github.com/prometheus/alertmanager/template"
-	"github.com/prometheus/alertmanager/types"
-	"github.com/prometheus/common/model"
-)
-
-// TemplateInput carries the title/body templates
-// and their defaults to apply in case the custom templates
-// are result in empty strings.
-type TemplateInput struct {
-	TitleTemplate        string
-	BodyTemplate         string
-	DefaultTitleTemplate string
-	DefaultBodyTemplate  string
-}
-
-// ExpandedTemplates is the result of ExpandAlertTemplates.
-type ExpandedTemplates struct {
-	Title string
-	Body  string
-}
-
-// AlertData holds per-alert data used when expanding body templates.
-type AlertData struct {
-	Status       string      `json:"status"`
-	Labels       template.KV `json:"labels"`
-	Annotations  template.KV `json:"annotations"`
-	StartsAt     time.Time   `json:"starts_at"`
-	EndsAt       time.Time   `json:"ends_at"`
-	GeneratorURL string      `json:"generator_url"`
-	Fingerprint  string      `json:"fingerprint"`
-
-	// Convenience fields extracted from well-known labels/annotations.
-	AlertName string `json:"rule_name"`
-	RuleID    string `json:"rule_id"`
-	RuleLink  string `json:"rule_link"`
-	Severity  string `json:"severity"`
-
-	// Link annotations added by the rule evaluator.
-	LogLink   string `json:"log_link"`
-	TraceLink string `json:"trace_link"`
-
-	// Status booleans for easy conditional templating.
-	IsFiring      bool `json:"is_firing"`
-	IsResolved    bool `json:"is_resolved"`
-	IsMissingData bool `json:"is_missing_data"`
-	IsRecovering  bool `json:"is_recovering"`
-}
-
-// NotificationTemplateData is the top-level data struct provided to custom templates.
-type NotificationTemplateData struct {
-	Receiver string `json:"receiver"`
-	Status   string `json:"status"`
-
-	// Convenience fields for title templates.
-	AlertName     string `json:"rule_name"`
-	RuleID        string `json:"rule_id"`
-	RuleLink      string `json:"rule_link"`
-	TotalFiring   int    `json:"total_firing"`
-	TotalResolved int    `json:"total_resolved"`
-
-	// Per-alert data, also available as filtered sub-slices.
-	Alerts []AlertData `json:"alerts"`
-
-	// Cross-alert aggregates, computed as intersection across all alerts.
-	GroupLabels       template.KV `json:"group_labels"`
-	CommonLabels      template.KV `json:"common_labels"`
-	CommonAnnotations template.KV `json:"common_annotations"`
-	ExternalURL       string      `json:"external_url"`
-}
-
-// ExtractTemplatesFromAnnotations computes the common annotations across all alerts
-// and returns the values for the title_template and body_template annotation keys.
-func ExtractTemplatesFromAnnotations(alerts []*types.Alert) (titleTemplate, bodyTemplate string) {
-	if len(alerts) == 0 {
-		return "", ""
-	}
-
-	commonAnnotations := computeCommonAnnotations(alerts)
-	return commonAnnotations[ruletypes.AnnotationTitleTemplate], commonAnnotations[ruletypes.AnnotationBodyTemplate]
-}
-
-// ExpandAlertTemplates expands the title and body templates from input
-// against the provided alerts and returns the expanded templates.
-func ExpandAlertTemplates(
-	ctx context.Context,
-	tmpl *template.Template,
-	input TemplateInput,
-	alerts []*types.Alert,
-	logger *slog.Logger,
-) (*ExpandedTemplates, error) {
-	ntd := buildNotificationTemplateData(ctx, tmpl, alerts, logger)
-
-	title, err := expandTitle(ctx, tmpl, input, alerts, ntd, logger)
-	if err != nil {
-		return nil, err
-	}
-
-	body, err := expandBody(ctx, tmpl, input, alerts, ntd, logger)
-	if err != nil {
-		return nil, err
-	}
-
-	return &ExpandedTemplates{Title: title, Body: body}, nil
-}
-
-// expandTitle expands the title template. Falls back to the default if the custom template
-// result in empty string.
-func expandTitle(
-	ctx context.Context,
-	tmpl *template.Template,
-	input TemplateInput,
-	alerts []*types.Alert,
-	ntd *NotificationTemplateData,
-	logger *slog.Logger,
-) (string, error) {
-	if input.TitleTemplate != "" {
-		result, err := tmpl.ExecuteTextString(input.TitleTemplate, ntd)
-		if err != nil {
-			return "", err
-		}
-		if strings.TrimSpace(result) != "" {
-			return result, nil
-		}
-	}
-
-	// Fall back to the notifier's default title template using standard template.Data.
-	if input.DefaultTitleTemplate == "" {
-		return "", nil
-	}
-	data := notify.GetTemplateData(ctx, tmpl, alerts, logger)
-	return tmpl.ExecuteTextString(input.DefaultTitleTemplate, data)
-}
-
-// expandBody expands the body template once per alert, concatenates the results
-// and falls back to the default if the custom template result in empty string.
-func expandBody(
-	ctx context.Context,
-	tmpl *template.Template,
-	input TemplateInput,
-	alerts []*types.Alert,
-	ntd *NotificationTemplateData,
-	logger *slog.Logger,
-) (string, error) {
-	if input.BodyTemplate != "" && len(ntd.Alerts) > 0 {
-		var parts []string
-		for i := range ntd.Alerts {
-			part, err := tmpl.ExecuteTextString(input.BodyTemplate, &ntd.Alerts[i])
-			if err != nil {
-				return "", err
-			}
-			parts = append(parts, part)
-		}
-		result := strings.Join(parts, "<br><br>") // markdown uses html for line breaks
-		if strings.TrimSpace(result) != "" {
-			return result, nil
-		}
-	}
-
-	// Fall back to the notifier's default body template using standard template.Data.
-	if input.DefaultBodyTemplate == "" {
-		return "", nil
-	}
-	data := notify.GetTemplateData(ctx, tmpl, alerts, logger)
-	return tmpl.ExecuteTextString(input.DefaultBodyTemplate, data)
-}
-
-// buildNotificationTemplateData derives a NotificationTemplateData from
-// the context, template, and the raw alerts.
-func buildNotificationTemplateData(
-	ctx context.Context,
-	tmpl *template.Template,
-	alerts []*types.Alert,
-	logger *slog.Logger,
-) *NotificationTemplateData {
-	// extract the required data from the context
-	receiver, ok := notify.ReceiverName(ctx)
-	if !ok {
-		logger.WarnContext(ctx, "missing receiver name in context")
-	}
-
-	groupLabels, ok := notify.GroupLabels(ctx)
-	if !ok {
-		logger.WarnContext(ctx, "missing group labels in context")
-	}
-
-	// extract the external URL from the template
-	externalURL := ""
-	if tmpl.ExternalURL != nil {
-		externalURL = tmpl.ExternalURL.String()
-	}
-
-	commonAnnotations := computeCommonAnnotations(alerts)
-	commonLabels := computeCommonLabels(alerts)
-
-	// build the alert data slice
-	alertDataSlice := make([]AlertData, 0, len(alerts))
-	for _, a := range alerts {
-		ad := buildAlertData(a)
-		alertDataSlice = append(alertDataSlice, ad)
-	}
-
-	// count the number of firing and resolved alerts
-	var firing, resolved int
-	for _, ad := range alertDataSlice {
-		if ad.IsFiring {
-			firing++
-		} else if ad.IsResolved {
-			resolved++
-		}
-	}
-
-	// extract the rule-level convenience fields from common labels
-	alertName := commonLabels[ruletypes.LabelAlertName]
-	ruleID := commonLabels[ruletypes.LabelRuleId]
-	ruleLink := commonLabels[ruletypes.LabelRuleSource]
-
-	// build the group labels
-	gl := make(template.KV, len(groupLabels))
-	for k, v := range groupLabels {
-		gl[string(k)] = string(v)
-	}
-
-	// build the notification template data
-	return &NotificationTemplateData{
-		Receiver:          receiver,
-		Status:            string(types.Alerts(alerts...).Status()),
-		AlertName:         alertName,
-		RuleID:            ruleID,
-		RuleLink:          ruleLink,
-		TotalFiring:       firing,
-		TotalResolved:     resolved,
-		Alerts:            alertDataSlice,
-		GroupLabels:       gl,
-		CommonLabels:      commonLabels,
-		CommonAnnotations: commonAnnotations,
-		ExternalURL:       externalURL,
-	}
-}
-
-// buildAlertData converts a single *types.Alert into an AlertData.
-func buildAlertData(a *types.Alert) AlertData {
-	labels := make(template.KV, len(a.Labels))
-	for k, v := range a.Labels {
-		labels[string(k)] = string(v)
-	}
-
-	annotations := make(template.KV, len(a.Annotations))
-	for k, v := range a.Annotations {
-		annotations[string(k)] = string(v)
-	}
-
-	status := string(a.Status())
-	isFiring := a.Status() == model.AlertFiring
-	isResolved := a.Status() == model.AlertResolved
-	isMissingData := labels[ruletypes.LabelNoData] == "true"
-
-	return AlertData{
-		Status:        status,
-		Labels:        labels,
-		Annotations:   annotations,
-		StartsAt:      a.StartsAt,
-		EndsAt:        a.EndsAt,
-		GeneratorURL:  a.GeneratorURL,
-		Fingerprint:   a.Fingerprint().String(),
-		AlertName:     labels[ruletypes.LabelAlertName],
-		RuleID:        labels[ruletypes.LabelRuleId],
-		RuleLink:      labels[ruletypes.LabelRuleSource],
-		Severity:      labels[ruletypes.LabelSeverityName],
-		LogLink:       annotations[ruletypes.AnnotationRelatedLogs],
-		TraceLink:     annotations[ruletypes.AnnotationRelatedTraces],
-		IsFiring:      isFiring,
-		IsResolved:    isResolved,
-		IsMissingData: isMissingData,
-	}
-}
-
-// computeCommonAnnotations returns the intersection of annotations across all alerts as a template.KV.
-// An annotation key/value pair is included only if it appears identically on every alert.
-func computeCommonAnnotations(alerts []*types.Alert) template.KV {
-	if len(alerts) == 0 {
-		return template.KV{}
-	}
-
-	common := make(template.KV, len(alerts[0].Annotations))
-	for k, v := range alerts[0].Annotations {
-		common[string(k)] = string(v)
-	}
-
-	for _, a := range alerts[1:] {
-		for k := range common {
-			if string(a.Annotations[model.LabelName(k)]) != common[k] {
-				delete(common, k)
-			}
-		}
-		if len(common) == 0 {
-			break
-		}
-	}
-
-	return common
-}
-
-// computeCommonLabels returns the intersection of labels across all alerts as a template.KV.
-func computeCommonLabels(alerts []*types.Alert) template.KV {
-	if len(alerts) == 0 {
-		return template.KV{}
-	}
-
-	common := make(template.KV, len(alerts[0].Labels))
-	for k, v := range alerts[0].Labels {
-		common[string(k)] = string(v)
-	}
-
-	for _, a := range alerts[1:] {
-		for k := range common {
-			if string(a.Labels[model.LabelName(k)]) != common[k] {
-				delete(common, k)
-			}
-		}
-		if len(common) == 0 {
-			break
-		}
-	}
-
-	return common
-}

pkg/alertmanager/alertmanagertemplate/alertmanagertemplate_test.go

@@ -1,147 +0,0 @@
-package alertmanagertemplate
-
-import (
-	"context"
-	"io"
-	"log/slog"
-	"testing"
-	"time"
-
-	test "github.com/SigNoz/signoz/pkg/alertmanager/alertmanagernotify/alertmanagernotifytest"
-	"github.com/SigNoz/signoz/pkg/types/ruletypes"
-	"github.com/prometheus/common/model"
-	"github.com/stretchr/testify/require"
-
-	"github.com/prometheus/alertmanager/notify"
-	"github.com/prometheus/alertmanager/template"
-	"github.com/prometheus/alertmanager/types"
-)
-
-// testSetup returns template, context, and logger for tests.
-func testSetup(t *testing.T) (*template.Template, context.Context, *slog.Logger) {
-	t.Helper()
-	tmpl := test.CreateTmpl(t)
-	ctx := context.Background()
-	ctx = notify.WithGroupKey(ctx, "test-group")
-	ctx = notify.WithReceiverName(ctx, "slack")
-	ctx = notify.WithGroupLabels(ctx, model.LabelSet{"alertname": "HighCPU", "severity": "critical"})
-	logger := slog.New(slog.NewTextHandler(io.Discard, nil))
-	return tmpl, ctx, logger
-}
-
-// firingAlert returns a firing alert with the given labels/annotations.
-func firingAlert(labels, annotations map[string]string) *types.Alert {
-	ls := model.LabelSet{}
-	for k, v := range labels {
-		ls[model.LabelName(k)] = model.LabelValue(v)
-	}
-	ann := model.LabelSet{}
-	for k, v := range annotations {
-		ann[model.LabelName(k)] = model.LabelValue(v)
-	}
-	now := time.Now()
-	return &types.Alert{
-		Alert: model.Alert{
-			Labels:      ls,
-			Annotations: ann,
-			StartsAt:    now,
-			EndsAt:      now.Add(time.Hour),
-		},
-	}
-}
-
-// TestExpandAlertTemplates_BothCustomTitleAndBody verifies that when both custom
-// title and body templates are provided, both expand correctly (main happy path).
-func TestExpandAlertTemplates_BothCustomTitleAndBody(t *testing.T) {
-	tmpl, ctx, logger := testSetup(t)
-	alerts := []*types.Alert{
-		firingAlert(
-			map[string]string{ruletypes.LabelAlertName: "HighCPU", ruletypes.LabelRuleId: "rule-1", ruletypes.LabelSeverityName: "critical"},
-			nil,
-		),
-	}
-	input := TemplateInput{
-		TitleTemplate:        "[{{.Status}}] {{.AlertName}}",
-		BodyTemplate:         "Alert {{.AlertName}} ({{.Status}})",
-		DefaultTitleTemplate: "{{ .CommonLabels.alertname }}",
-		DefaultBodyTemplate:  "{{ .Status }}",
-	}
-	got, err := ExpandAlertTemplates(ctx, tmpl, input, alerts, logger)
-	require.NoError(t, err)
-	require.Equal(t, "[firing] HighCPU", got.Title)
-	require.Equal(t, "Alert HighCPU (firing)", got.Body)
-}
-
-// TestExpandAlertTemplates_CustomTitleExpands verifies that a custom title
-// template expands against NotificationTemplateData (rule-level fields).
-func TestExpandAlertTemplates_CustomTitleExpands(t *testing.T) {
-	tmpl, ctx, logger := testSetup(t)
-	alerts := []*types.Alert{
-		firingAlert(map[string]string{ruletypes.LabelAlertName: "HighCPU", ruletypes.LabelRuleId: "r1"}, nil),
-		firingAlert(map[string]string{ruletypes.LabelAlertName: "HighCPU", ruletypes.LabelRuleId: "r1"}, nil),
-	}
-	input := TemplateInput{
-		TitleTemplate:        "{{.AlertName}}: {{.TotalFiring}} firing",
-		DefaultTitleTemplate: "fallback",
-	}
-	got, err := ExpandAlertTemplates(ctx, tmpl, input, alerts, logger)
-	require.NoError(t, err)
-	require.Equal(t, "HighCPU: 2 firing", got.Title)
-	require.Equal(t, "", got.Body)
-}
-
-// TestExpandAlertTemplates_CustomBodySingleAlert verifies that a custom body
-// template is expanded once per alert; with one alert, body is that expansion.
-func TestExpandAlertTemplates_CustomBodySingleAlert(t *testing.T) {
-	tmpl, ctx, logger := testSetup(t)
-	alerts := []*types.Alert{
-		firingAlert(
-			map[string]string{ruletypes.LabelAlertName: "HighCPU", ruletypes.LabelSeverityName: "critical"},
-			map[string]string{"description": "CPU > 80%"},
-		),
-	}
-	input := TemplateInput{
-		BodyTemplate: "{{.AlertName}} ({{.Severity}}): {{.Annotations.description}}",
-	}
-	got, err := ExpandAlertTemplates(ctx, tmpl, input, alerts, logger)
-	require.NoError(t, err)
-	require.Equal(t, "", got.Title)
-	require.Equal(t, "HighCPU (critical): CPU > 80%", got.Body)
-}
-
-// TestExpandAlertTemplates_CustomBodyMultipleAlerts verifies that body template
-// is expanded per alert and results are concatenated with "<br><br>".
-func TestExpandAlertTemplates_CustomBodyMultipleAlerts(t *testing.T) {
-	tmpl, ctx, logger := testSetup(t)
-	alerts := []*types.Alert{
-		firingAlert(map[string]string{ruletypes.LabelAlertName: "A"}, nil),
-		firingAlert(map[string]string{ruletypes.LabelAlertName: "B"}, nil),
-		firingAlert(map[string]string{ruletypes.LabelAlertName: "C"}, nil),
-	}
-	input := TemplateInput{
-		BodyTemplate: "{{.AlertName}}",
-	}
-	got, err := ExpandAlertTemplates(ctx, tmpl, input, alerts, logger)
-	require.NoError(t, err)
-	require.Equal(t, "A<br><br>B<br><br>C", got.Body)
-}
-
-// TestExpandAlertTemplates_BothDefaultTitleAndBody verifies that when no custom
-// templates are set, both title and body fall back to default templates
-// (executed against Prometheus template.Data).
-func TestExpandAlertTemplates_BothDefaultTitleAndBody(t *testing.T) {
-	tmpl, ctx, logger := testSetup(t)
-	alerts := []*types.Alert{
-		firingAlert(map[string]string{ruletypes.LabelAlertName: "HighCPU", ruletypes.LabelSeverityName: "critical"}, nil),
-	}
-	input := TemplateInput{
-		TitleTemplate:        "",
-		BodyTemplate:         "",
-		DefaultTitleTemplate: "{{ .CommonLabels.alertname }}",
-		DefaultBodyTemplate:  "{{ .Status }}: {{ .CommonLabels.alertname }}",
-	}
-	got, err := ExpandAlertTemplates(ctx, tmpl, input, alerts, logger)
-	require.NoError(t, err)
-	require.Equal(t, "HighCPU", got.Title)
-	require.Equal(t, "firing: HighCPU", got.Body)
-}

pkg/errors/errors.go

@@ -147,7 +147,7 @@ func Ast(cause error, typ typ) bool {
 	return t == typ
 }
 
-// Asc checks if the provided error matches the specified custom error code.
+// Ast checks if the provided error matches the specified custom error code.
 func Asc(cause error, code Code) bool {
 	_, c, _, _, _, _ := Unwrapb(cause)
 

pkg/types/ruletypes/constants.go

@@ -9,15 +9,4 @@ const (
 	LabelSeverityName     = "severity"
 	LabelLastSeen         = "lastSeen"
 	LabelRuleId           = "ruleId"
-	LabelRuleSource       = "ruleSource"
-	LabelNoData           = "nodata"
-	LabelTestAlert        = "testalert"
-	LabelAlertName        = "alertname"
-)
-
-const (
-	AnnotationRelatedLogs   = "related_logs"
-	AnnotationRelatedTraces = "related_traces"
-	AnnotationTitleTemplate = "title_template"
-	AnnotationBodyTemplate  = "body_template"
 )