chore: base path setup and routing and navigation migrations

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

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

deploy/docker-swarm/docker-compose.yaml

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

deploy/docker/docker-compose.ha.yaml

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

deploy/docker/docker-compose.yaml

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

docs/contributing/onboarding.md

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

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

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

frontend/.eslintrc.cjs

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

frontend/example.env

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

frontend/index.html

@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
 	<head>
+		<base href="<%- BASE_PATH %>" />
 		<meta charset="utf-8" />
 		<meta
 			http-equiv="Cache-Control"
@@ -59,32 +60,9 @@
 		<meta data-react-helmet="true" name="docusaurus_locale" content="en" />
 		<meta data-react-helmet="true" name="docusaurus_tag" content="default" />
 		<meta name="robots" content="noindex" />
-		<link data-react-helmet="true" rel="shortcut icon" href="/favicon.ico" />
+		<link data-react-helmet="true" rel="shortcut icon" href="./favicon.ico" />
 	</head>
 	<body data-theme="default">
-		<script>
-			// Apply theme class synchronously before React renders to prevent flash.
-			// Mirrors the logic in ThemeProvider (hooks/useDarkMode/index.tsx).
-			(function () {
-				try {
-					var theme = localStorage.getItem('THEME');
-					var autoSwitch = localStorage.getItem('THEME_AUTO_SWITCH') === 'true';
-					if (autoSwitch) {
-						theme = window.matchMedia('(prefers-color-scheme: dark)').matches
-							? 'dark'
-							: 'light';
-					}
-					if (theme === 'light') {
-						document.body.classList.add('lightMode');
-					} else {
-						// Default to dark when no preference is stored
-						document.body.classList.add('dark', 'darkMode');
-					}
-				} catch (e) {
-					document.body.classList.add('dark', 'darkMode');
-				}
-			})();
-		</script>
 		<noscript>You need to enable JavaScript to run this app.</noscript>
 		<div id="root"></div>
 
@@ -136,7 +114,7 @@
 				})(document, 'script');
 			}
 		</script>
-		<link rel="stylesheet" href="/css/uPlot.min.css" />
+		<link rel="stylesheet" href="./css/uPlot.min.css" />
 		<script type="module" src="./src/index.tsx"></script>
 	</body>
 </html>

frontend/jest.config.ts

@@ -15,12 +15,12 @@ const config: Config.InitialOptions = {
 			'<rootDir>/__mocks__/fileMock.ts',
 		'^@/(.*)$': '<rootDir>/src/$1',
 		'\\.(css|less|scss)$': '<rootDir>/__mocks__/cssMock.ts',
-		'\\.module\\.mjs$': '<rootDir>/__mocks__/cssMock.ts',
 		'\\.md$': '<rootDir>/__mocks__/cssMock.ts',
 		'^uplot$': '<rootDir>/__mocks__/uplotMock.ts',
 		'^@signozhq/resizable$': '<rootDir>/__mocks__/resizableMock.tsx',
 		'^hooks/useSafeNavigate$': USE_SAFE_NAVIGATE_MOCK_PATH,
 		'^src/hooks/useSafeNavigate$': USE_SAFE_NAVIGATE_MOCK_PATH,
+		'^hooks/useSafeNavigate\\.impl$': '<rootDir>/src/hooks/useSafeNavigate.ts',
 		'^.*/useSafeNavigate$': USE_SAFE_NAVIGATE_MOCK_PATH,
 		'^constants/env$': '<rootDir>/__mocks__/env.ts',
 		'^src/constants/env$': '<rootDir>/__mocks__/env.ts',
@@ -45,7 +45,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/*|date-fns|d3-interpolate|d3-color|api|@codemirror|@lezer|@marijn|@grafana|nuqs)/)',
+		'node_modules/(?!(lodash-es|react-dnd|core-dnd|@react-dnd|dnd-core|react-dnd-html5-backend|axios|@signozhq/design-tokens|@signozhq/table|@signozhq/calendar|@signozhq/input|@signozhq/popover|@signozhq/button|@signozhq/sonner|@signozhq/*|date-fns|d3-interpolate|d3-color|api|@codemirror|@lezer|@marijn|@grafana|nuqs)/)',
 	],
 	setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
 	testPathIgnorePatterns: ['/node_modules/', '/public/'],

frontend/jest.setup.ts

@@ -24,30 +24,6 @@ window.matchMedia =
 		};
 	};
 
-// Patch getComputedStyle to handle CSS parsing errors from @signozhq/* packages.
-// These packages inject CSS at import time via style-inject / vite-plugin-css-injected-by-js.
-// jsdom's nwsapi cannot parse some of the injected selectors (e.g. Tailwind's :animate-in),
-// causing SyntaxErrors during getComputedStyle / getByRole calls.
-const _origGetComputedStyle = window.getComputedStyle;
-window.getComputedStyle = function (
-	elt: Element,
-	pseudoElt?: string | null,
-): CSSStyleDeclaration {
-	try {
-		return _origGetComputedStyle.call(window, elt, pseudoElt);
-	} catch {
-		// Return a minimal CSSStyleDeclaration so callers (testing-library, Radix UI)
-		// see the element as visible and without animations.
-		return ({
-			display: '',
-			visibility: '',
-			opacity: '1',
-			animationName: 'none',
-			getPropertyValue: () => '',
-		} as unknown) as CSSStyleDeclaration;
-	}
-};
-
 beforeAll(() => server.listen());
 
 afterEach(() => server.resetHandlers());

frontend/package.json

@@ -48,13 +48,14 @@
     "@radix-ui/react-tooltip": "1.0.7",
     "@sentry/react": "8.41.0",
     "@sentry/vite-plugin": "2.22.6",
+    "@signozhq/badge": "0.0.2",
     "@signozhq/button": "0.0.2",
     "@signozhq/calendar": "0.0.0",
     "@signozhq/callout": "0.0.2",
     "@signozhq/checkbox": "0.0.2",
     "@signozhq/combobox": "0.0.2",
     "@signozhq/command": "0.0.0",
-    "@signozhq/design-tokens": "2.1.4",
+    "@signozhq/design-tokens": "2.1.1",
     "@signozhq/dialog": "^0.0.2",
     "@signozhq/drawer": "0.0.4",
     "@signozhq/icons": "0.1.0",
@@ -62,8 +63,11 @@
     "@signozhq/popover": "0.0.0",
     "@signozhq/radio-group": "0.0.2",
     "@signozhq/resizable": "0.0.0",
+    "@signozhq/sonner": "0.1.0",
+    "@signozhq/switch": "0.0.2",
     "@signozhq/table": "0.3.7",
     "@signozhq/toggle-group": "0.0.1",
+    "@signozhq/tooltip": "0.0.2",
     "@signozhq/ui": "0.0.5",
     "@tanstack/react-table": "8.21.3",
     "@tanstack/react-virtual": "3.13.22",

frontend/src/__tests__/query_range_v5.util.ts

@@ -1,125 +0,0 @@
-import { ENVIRONMENT } from 'constants/env';
-import { server } from 'mocks-server/server';
-import { rest, RestRequest } from 'msw';
-import { MetricRangePayloadV5 } from 'types/api/v5/queryRange';
-
-const QUERY_RANGE_URL = `${ENVIRONMENT.baseURL}/api/v5/query_range`;
-
-export type MockLogsOptions = {
-	offset?: number;
-	pageSize?: number;
-	hasMore?: boolean;
-	delay?: number;
-	onReceiveRequest?: (
-		req: RestRequest,
-	) =>
-		| undefined
-		| void
-		| Omit<MockLogsOptions, 'onReceiveRequest'>
-		| Promise<Omit<MockLogsOptions, 'onReceiveRequest'>>
-		| Promise<void>;
-};
-
-const createLogsResponse = ({
-	offset = 0,
-	pageSize = 100,
-	hasMore = true,
-}: MockLogsOptions): MetricRangePayloadV5 => {
-	const itemsForThisPage = hasMore ? pageSize : pageSize / 2;
-
-	return {
-		data: {
-			type: 'raw',
-			data: {
-				results: [
-					{
-						queryName: 'A',
-						rows: Array.from({ length: itemsForThisPage }, (_, index) => {
-							const cumulativeIndex = offset + index;
-							const baseTimestamp = new Date('2024-02-15T21:20:22Z').getTime();
-							const currentTimestamp = new Date(
-								baseTimestamp - cumulativeIndex * 1000,
-							);
-							const timestampString = currentTimestamp.toISOString();
-							const id = `log-id-${cumulativeIndex}`;
-							const logLevel = ['INFO', 'WARN', 'ERROR'][cumulativeIndex % 3];
-							const service = ['frontend', 'backend', 'database'][cumulativeIndex % 3];
-
-							return {
-								timestamp: timestampString,
-								data: {
-									attributes_bool: {},
-									attributes_float64: {},
-									attributes_int64: {},
-									attributes_string: {
-										host_name: 'test-host',
-										log_level: logLevel,
-										service,
-									},
-									body: `${timestampString} ${logLevel} ${service} Log message ${cumulativeIndex}`,
-									id,
-									resources_string: {
-										'host.name': 'test-host',
-									},
-									severity_number: [9, 13, 17][cumulativeIndex % 3],
-									severity_text: logLevel,
-									span_id: `span-${cumulativeIndex}`,
-									trace_flags: 0,
-									trace_id: `trace-${cumulativeIndex}`,
-								},
-							};
-						}),
-					},
-				],
-			},
-			meta: {
-				bytesScanned: 0,
-				durationMs: 0,
-				rowsScanned: 0,
-				stepIntervals: {},
-			},
-		},
-	};
-};
-
-export function mockQueryRangeV5WithLogsResponse({
-	hasMore = true,
-	offset = 0,
-	pageSize = 100,
-	delay = 0,
-	onReceiveRequest,
-}: MockLogsOptions = {}): void {
-	server.use(
-		rest.post(QUERY_RANGE_URL, async (req, res, ctx) =>
-			res(
-				...(delay ? [ctx.delay(delay)] : []),
-				ctx.status(200),
-				ctx.json(
-					createLogsResponse(
-						(await onReceiveRequest?.(req)) ?? {
-							hasMore,
-							pageSize,
-							offset,
-						},
-					),
-				),
-			),
-		),
-	);
-}
-
-export function mockQueryRangeV5WithError(
-	error: string,
-	statusCode = 500,
-): void {
-	server.use(
-		rest.post(QUERY_RANGE_URL, (_, res, ctx) =>
-			res(
-				ctx.status(statusCode),
-				ctx.json({
-					error,
-				}),
-			),
-		),
-	);
-}

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

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

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

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

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

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

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

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

frontend/src/api/infra/getHostAttributeKeys.ts

@@ -2,7 +2,7 @@ import axios from 'api';
 import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
 import { AxiosError, AxiosResponse } from 'axios';
 import { baseAutoCompleteIdKeysOrder } from 'constants/queryBuilder';
-import { InfraMonitoringEntity } from 'container/InfraMonitoringK8s/constants';
+import { K8sCategory } from 'container/InfraMonitoringK8s/constants';
 import { createIdFromObjectFields } from 'lib/createIdFromObjectFields';
 import { ErrorResponse, SuccessResponse } from 'types/api';
 import {
@@ -12,7 +12,7 @@ import {
 
 export const getHostAttributeKeys = async (
 	searchText = '',
-	entity: InfraMonitoringEntity,
+	entity: K8sCategory,
 ): Promise<SuccessResponse<IQueryAutocompleteResponse> | ErrorResponse> => {
 	try {
 		const response: AxiosResponse<{

frontend/src/api/infraMonitoring/getHostLists.ts

@@ -33,8 +33,6 @@ export interface HostData {
 	hostName: string;
 	active: boolean;
 	os: string;
-	/** Present when the list API returns grouped rows or extra resource attributes. */
-	meta?: Record<string, string>;
 	cpu: number;
 	cpuTimeSeries: TimeSeries;
 	memory: number;

frontend/src/api/infraMonitoring/getK8sClustersList.ts

@@ -1,14 +1,13 @@
 import axios from 'api';
 import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
-import { UnderscoreToDotMap } from 'api/utils';
 import { AxiosError } from 'axios';
 import { ErrorResponse, SuccessResponse } from 'types/api';
 import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { TagFilter } from 'types/api/queryBuilder/queryBuilderData';
 
-import { K8sBaseFilters } from '../Base/types';
+import { UnderscoreToDotMap } from '../utils';
 
-export interface K8sNodesListPayload {
+export interface K8sClustersListPayload {
 	filters: TagFilter;
 	groupBy?: BaseAutocompleteData[];
 	offset?: number;
@@ -19,24 +18,23 @@ export interface K8sNodesListPayload {
 	};
 }
 
-export interface K8sNodeData {
-	nodeUID: string;
-	nodeCPUUsage: number;
-	nodeCPUAllocatable: number;
-	nodeMemoryUsage: number;
-	nodeMemoryAllocatable: number;
+export interface K8sClustersData {
+	clusterUID: string;
+	cpuUsage: number;
+	cpuAllocatable: number;
+	memoryUsage: number;
+	memoryAllocatable: number;
 	meta: {
-		k8s_node_name: string;
-		k8s_node_uid: string;
 		k8s_cluster_name: string;
+		k8s_cluster_uid: string;
 	};
 }
 
-export interface K8sNodesListResponse {
+export interface K8sClustersListResponse {
 	status: string;
 	data: {
 		type: string;
-		records: K8sNodeData[];
+		records: K8sClustersData[];
 		groups: null;
 		total: number;
 		sentAnyHostMetricsData: boolean;
@@ -44,32 +42,30 @@ export interface K8sNodesListResponse {
 	};
 }
 
-// TODO(H4ad): Erase this whole file when migrating to openapi
-export const nodesMetaMap = [
-	{ dot: 'k8s.node.name', under: 'k8s_node_name' },
-	{ dot: 'k8s.node.uid', under: 'k8s_node_uid' },
+export const clustersMetaMap = [
 	{ dot: 'k8s.cluster.name', under: 'k8s_cluster_name' },
+	{ dot: 'k8s.cluster.uid', under: 'k8s_cluster_uid' },
 ] as const;
 
-export function mapNodesMeta(
+export function mapClustersMeta(
 	raw: Record<string, unknown>,
-): K8sNodeData['meta'] {
+): K8sClustersData['meta'] {
 	const out: Record<string, unknown> = { ...raw };
-	nodesMetaMap.forEach(({ dot, under }) => {
+	clustersMetaMap.forEach(({ dot, under }) => {
 		if (dot in raw) {
 			const v = raw[dot];
 			out[under] = typeof v === 'string' ? v : raw[under];
 		}
 	});
-	return out as K8sNodeData['meta'];
+	return out as K8sClustersData['meta'];
 }
 
-export const getK8sNodesList = async (
-	props: K8sBaseFilters,
+export const getK8sClustersList = async (
+	props: K8sClustersListPayload,
 	signal?: AbortSignal,
 	headers?: Record<string, string>,
 	dotMetricsEnabled = false,
-): Promise<SuccessResponse<K8sNodesListResponse> | ErrorResponse> => {
+): Promise<SuccessResponse<K8sClustersListResponse> | ErrorResponse> => {
 	try {
 		const requestProps =
 			dotMetricsEnabled && Array.isArray(props.filters?.items)
@@ -104,16 +100,16 @@ export const getK8sNodesList = async (
 				  }
 				: props;
 
-		const response = await axios.post('/nodes/list', requestProps, {
+		const response = await axios.post('/clusters/list', requestProps, {
 			signal,
 			headers,
 		});
-		const payload: K8sNodesListResponse = response.data;
+		const payload: K8sClustersListResponse = response.data;
 
-		// one-liner to map dot→underscore
+		// one-liner meta mapping
 		payload.data.records = payload.data.records.map((record) => ({
 			...record,
-			meta: mapNodesMeta(record.meta as Record<string, unknown>),
+			meta: mapClustersMeta(record.meta as Record<string, unknown>),
 		}));
 
 		return {

frontend/src/api/infraMonitoring/getK8sDaemonSetsList.ts

@@ -1,10 +1,22 @@
 import axios from 'api';
 import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
-import { UnderscoreToDotMap } from 'api/utils';
 import { AxiosError } from 'axios';
 import { ErrorResponse, SuccessResponse } from 'types/api';
+import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
+import { TagFilter } from 'types/api/queryBuilder/queryBuilderData';
 
-import { K8sBaseFilters } from '../Base/types';
+import { UnderscoreToDotMap } from '../utils';
+
+export interface K8sDaemonSetsListPayload {
+	filters: TagFilter;
+	groupBy?: BaseAutocompleteData[];
+	offset?: number;
+	limit?: number;
+	orderBy?: {
+		columnName: string;
+		order: 'asc' | 'desc';
+	};
+}
 
 export interface K8sDaemonSetsData {
 	daemonSetName: string;
@@ -36,7 +48,6 @@ export interface K8sDaemonSetsListResponse {
 	};
 }
 
-// TODO(H4ad): Erase this whole file when migrating to openapi
 export const daemonSetsMetaMap = [
 	{ dot: 'k8s.namespace.name', under: 'k8s_namespace_name' },
 	{ dot: 'k8s.daemonset.name', under: 'k8s_daemonset_name' },
@@ -57,43 +68,45 @@ export function mapDaemonSetsMeta(
 }
 
 export const getK8sDaemonSetsList = async (
-	props: K8sBaseFilters,
+	props: K8sDaemonSetsListPayload,
 	signal?: AbortSignal,
 	headers?: Record<string, string>,
 	dotMetricsEnabled = false,
 ): Promise<SuccessResponse<K8sDaemonSetsListResponse> | ErrorResponse> => {
 	try {
-		const requestProps = dotMetricsEnabled
-			? {
-					...props,
-					filters: {
-						...props.filters,
-						items: props.filters.items.reduce<typeof props.filters.items>(
-							(acc, item) => {
-								if (item.value === undefined) {
+		// filter prep (unchanged)…
+		const requestProps =
+			dotMetricsEnabled && Array.isArray(props.filters?.items)
+				? {
+						...props,
+						filters: {
+							...props.filters,
+							items: props.filters.items.reduce<typeof props.filters.items>(
+								(acc, item) => {
+									if (item.value === undefined) {
+										return acc;
+									}
+									if (
+										item.key &&
+										typeof item.key === 'object' &&
+										'key' in item.key &&
+										typeof item.key.key === 'string'
+									) {
+										const mappedKey = UnderscoreToDotMap[item.key.key] ?? item.key.key;
+										acc.push({
+											...item,
+											key: { ...item.key, key: mappedKey },
+										});
+									} else {
+										acc.push(item);
+									}
 									return acc;
-								}
-								if (
-									item.key &&
-									typeof item.key === 'object' &&
-									'key' in item.key &&
-									typeof item.key.key === 'string'
-								) {
-									const mappedKey = UnderscoreToDotMap[item.key.key] ?? item.key.key;
-									acc.push({
-										...item,
-										key: { ...item.key, key: mappedKey },
-									});
-								} else {
-									acc.push(item);
-								}
-								return acc;
-							},
-							[] as typeof props.filters.items,
-						),
-					},
-			  }
-			: props;
+								},
+								[] as typeof props.filters.items,
+							),
+						},
+				  }
+				: props;
 
 		const response = await axios.post('/daemonsets/list', requestProps, {
 			signal,
@@ -101,6 +114,7 @@ export const getK8sDaemonSetsList = async (
 		});
 		const payload: K8sDaemonSetsListResponse = response.data;
 
+		// single-line meta mapping
 		payload.data.records = payload.data.records.map((record) => ({
 			...record,
 			meta: mapDaemonSetsMeta(record.meta as Record<string, unknown>),

frontend/src/api/infraMonitoring/getK8sDeploymentsList.ts

@@ -1,12 +1,11 @@
 import axios from 'api';
 import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
-import { UnderscoreToDotMap } from 'api/utils';
 import { AxiosError } from 'axios';
 import { ErrorResponse, SuccessResponse } from 'types/api';
 import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { TagFilter } from 'types/api/queryBuilder/queryBuilderData';
 
-import { K8sBaseFilters } from '../Base/types';
+import { UnderscoreToDotMap } from '../utils';
 
 export interface K8sDeploymentsListPayload {
 	filters: TagFilter;
@@ -49,7 +48,6 @@ export interface K8sDeploymentsListResponse {
 	};
 }
 
-// TODO(H4ad): Erase this whole file when migrating to openapi
 export const deploymentsMetaMap = [
 	{ dot: 'k8s.cluster.name', under: 'k8s_cluster_name' },
 	{ dot: 'k8s.deployment.name', under: 'k8s_deployment_name' },
@@ -70,43 +68,44 @@ export function mapDeploymentsMeta(
 }
 
 export const getK8sDeploymentsList = async (
-	props: K8sBaseFilters,
+	props: K8sDeploymentsListPayload,
 	signal?: AbortSignal,
 	headers?: Record<string, string>,
 	dotMetricsEnabled = false,
 ): Promise<SuccessResponse<K8sDeploymentsListResponse> | ErrorResponse> => {
 	try {
-		const requestProps = dotMetricsEnabled
-			? {
-					...props,
-					filters: {
-						...props.filters,
-						items: props.filters.items.reduce<typeof props.filters.items>(
-							(acc, item) => {
-								if (item.value === undefined) {
+		const requestProps =
+			dotMetricsEnabled && Array.isArray(props.filters?.items)
+				? {
+						...props,
+						filters: {
+							...props.filters,
+							items: props.filters.items.reduce<typeof props.filters.items>(
+								(acc, item) => {
+									if (item.value === undefined) {
+										return acc;
+									}
+									if (
+										item.key &&
+										typeof item.key === 'object' &&
+										'key' in item.key &&
+										typeof item.key.key === 'string'
+									) {
+										const mappedKey = UnderscoreToDotMap[item.key.key] ?? item.key.key;
+										acc.push({
+											...item,
+											key: { ...item.key, key: mappedKey },
+										});
+									} else {
+										acc.push(item);
+									}
 									return acc;
-								}
-								if (
-									item.key &&
-									typeof item.key === 'object' &&
-									'key' in item.key &&
-									typeof item.key.key === 'string'
-								) {
-									const mappedKey = UnderscoreToDotMap[item.key.key] ?? item.key.key;
-									acc.push({
-										...item,
-										key: { ...item.key, key: mappedKey },
-									});
-								} else {
-									acc.push(item);
-								}
-								return acc;
-							},
-							[] as typeof props.filters.items,
-						),
-					},
-			  }
-			: props;
+								},
+								[] as typeof props.filters.items,
+							),
+						},
+				  }
+				: props;
 
 		const response = await axios.post('/deployments/list', requestProps, {
 			signal,
@@ -114,6 +113,7 @@ export const getK8sDeploymentsList = async (
 		});
 		const payload: K8sDeploymentsListResponse = response.data;
 
+		// single-line mapping
 		payload.data.records = payload.data.records.map((record) => ({
 			...record,
 			meta: mapDeploymentsMeta(record.meta as Record<string, unknown>),

frontend/src/api/infraMonitoring/getK8sJobsList.ts

@@ -1,10 +1,22 @@
 import axios from 'api';
 import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
-import { UnderscoreToDotMap } from 'api/utils';
 import { AxiosError } from 'axios';
 import { ErrorResponse, SuccessResponse } from 'types/api';
+import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
+import { TagFilter } from 'types/api/queryBuilder/queryBuilderData';
 
-import { K8sBaseFilters } from '../Base/types';
+import { UnderscoreToDotMap } from '../utils';
+
+export interface K8sJobsListPayload {
+	filters: TagFilter;
+	groupBy?: BaseAutocompleteData[];
+	offset?: number;
+	limit?: number;
+	orderBy?: {
+		columnName: string;
+		order: 'asc' | 'desc';
+	};
+}
 
 export interface K8sJobsData {
 	jobName: string;
@@ -38,7 +50,6 @@ export interface K8sJobsListResponse {
 	};
 }
 
-// TODO(H4ad): Erase this whole file when migrating to openapi
 export const jobsMetaMap = [
 	{ dot: 'k8s.cluster.name', under: 'k8s_cluster_name' },
 	{ dot: 'k8s.job.name', under: 'k8s_job_name' },
@@ -57,43 +68,44 @@ export function mapJobsMeta(raw: Record<string, unknown>): K8sJobsData['meta'] {
 }
 
 export const getK8sJobsList = async (
-	props: K8sBaseFilters,
+	props: K8sJobsListPayload,
 	signal?: AbortSignal,
 	headers?: Record<string, string>,
 	dotMetricsEnabled = false,
 ): Promise<SuccessResponse<K8sJobsListResponse> | ErrorResponse> => {
 	try {
-		const requestProps = dotMetricsEnabled
-			? {
-					...props,
-					filters: {
-						...props.filters,
-						items: props.filters?.items.reduce<typeof props.filters.items>(
-							(acc, item) => {
-								if (item.value === undefined) {
+		const requestProps =
+			dotMetricsEnabled && Array.isArray(props.filters?.items)
+				? {
+						...props,
+						filters: {
+							...props.filters,
+							items: props.filters.items.reduce<typeof props.filters.items>(
+								(acc, item) => {
+									if (item.value === undefined) {
+										return acc;
+									}
+									if (
+										item.key &&
+										typeof item.key === 'object' &&
+										'key' in item.key &&
+										typeof item.key.key === 'string'
+									) {
+										const mappedKey = UnderscoreToDotMap[item.key.key] ?? item.key.key;
+										acc.push({
+											...item,
+											key: { ...item.key, key: mappedKey },
+										});
+									} else {
+										acc.push(item);
+									}
 									return acc;
-								}
-								if (
-									item.key &&
-									typeof item.key === 'object' &&
-									'key' in item.key &&
-									typeof item.key.key === 'string'
-								) {
-									const mappedKey = UnderscoreToDotMap[item.key.key] ?? item.key.key;
-									acc.push({
-										...item,
-										key: { ...item.key, key: mappedKey },
-									});
-								} else {
-									acc.push(item);
-								}
-								return acc;
-							},
-							[] as typeof props.filters.items,
-						),
-					},
-			  }
-			: props;
+								},
+								[] as typeof props.filters.items,
+							),
+						},
+				  }
+				: props;
 
 		const response = await axios.post('/jobs/list', requestProps, {
 			signal,
@@ -101,6 +113,7 @@ export const getK8sJobsList = async (
 		});
 		const payload: K8sJobsListResponse = response.data;
 
+		// one-liner meta mapping
 		payload.data.records = payload.data.records.map((record) => ({
 			...record,
 			meta: mapJobsMeta(record.meta as Record<string, unknown>),

frontend/src/api/infraMonitoring/getK8sNamespacesList.ts

@@ -1,12 +1,11 @@
 import axios from 'api';
 import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
-import { UnderscoreToDotMap } from 'api/utils';
 import { AxiosError } from 'axios';
 import { ErrorResponse, SuccessResponse } from 'types/api';
 import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { TagFilter } from 'types/api/queryBuilder/queryBuilderData';
 
-import { K8sBaseFilters } from '../Base/types';
+import { UnderscoreToDotMap } from '../utils';
 
 export interface K8sNamespacesListPayload {
 	filters: TagFilter;
@@ -41,7 +40,6 @@ export interface K8sNamespacesListResponse {
 	};
 }
 
-// TODO(H4ad): Erase this whole file when migrating to openapi
 export const namespacesMetaMap = [
 	{ dot: 'k8s.cluster.name', under: 'k8s_cluster_name' },
 	{ dot: 'k8s.namespace.name', under: 'k8s_namespace_name' },
@@ -61,43 +59,44 @@ export function mapNamespacesMeta(
 }
 
 export const getK8sNamespacesList = async (
-	props: K8sBaseFilters,
+	props: K8sNamespacesListPayload,
 	signal?: AbortSignal,
 	headers?: Record<string, string>,
 	dotMetricsEnabled = false,
 ): Promise<SuccessResponse<K8sNamespacesListResponse> | ErrorResponse> => {
 	try {
-		const requestProps = dotMetricsEnabled
-			? {
-					...props,
-					filters: {
-						...props.filters,
-						items: props.filters?.items.reduce<typeof props.filters.items>(
-							(acc, item) => {
-								if (item.value === undefined) {
+		const requestProps =
+			dotMetricsEnabled && Array.isArray(props.filters?.items)
+				? {
+						...props,
+						filters: {
+							...props.filters,
+							items: props.filters.items.reduce<typeof props.filters.items>(
+								(acc, item) => {
+									if (item.value === undefined) {
+										return acc;
+									}
+									if (
+										item.key &&
+										typeof item.key === 'object' &&
+										'key' in item.key &&
+										typeof item.key.key === 'string'
+									) {
+										const mappedKey = UnderscoreToDotMap[item.key.key] ?? item.key.key;
+										acc.push({
+											...item,
+											key: { ...item.key, key: mappedKey },
+										});
+									} else {
+										acc.push(item);
+									}
 									return acc;
-								}
-								if (
-									item.key &&
-									typeof item.key === 'object' &&
-									'key' in item.key &&
-									typeof item.key.key === 'string'
-								) {
-									const mappedKey = UnderscoreToDotMap[item.key.key] ?? item.key.key;
-									acc.push({
-										...item,
-										key: { ...item.key, key: mappedKey },
-									});
-								} else {
-									acc.push(item);
-								}
-								return acc;
-							},
-							[] as typeof props.filters.items,
-						),
-					},
-			  }
-			: props;
+								},
+								[] as typeof props.filters.items,
+							),
+						},
+				  }
+				: props;
 
 		const response = await axios.post('/namespaces/list', requestProps, {
 			signal,

frontend/src/api/infraMonitoring/getK8sNodesList.ts

@@ -0,0 +1,127 @@
+import axios from 'api';
+import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
+import { AxiosError } from 'axios';
+import { ErrorResponse, SuccessResponse } from 'types/api';
+import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
+import { TagFilter } from 'types/api/queryBuilder/queryBuilderData';
+
+import { UnderscoreToDotMap } from '../utils';
+
+export interface K8sNodesListPayload {
+	filters: TagFilter;
+	groupBy?: BaseAutocompleteData[];
+	offset?: number;
+	limit?: number;
+	orderBy?: {
+		columnName: string;
+		order: 'asc' | 'desc';
+	};
+}
+
+export interface K8sNodesData {
+	nodeUID: string;
+	nodeCPUUsage: number;
+	nodeCPUAllocatable: number;
+	nodeMemoryUsage: number;
+	nodeMemoryAllocatable: number;
+	meta: {
+		k8s_node_name: string;
+		k8s_node_uid: string;
+		k8s_cluster_name: string;
+	};
+}
+
+export interface K8sNodesListResponse {
+	status: string;
+	data: {
+		type: string;
+		records: K8sNodesData[];
+		groups: null;
+		total: number;
+		sentAnyHostMetricsData: boolean;
+		isSendingK8SAgentMetrics: boolean;
+	};
+}
+
+export const nodesMetaMap = [
+	{ dot: 'k8s.node.name', under: 'k8s_node_name' },
+	{ dot: 'k8s.node.uid', under: 'k8s_node_uid' },
+	{ dot: 'k8s.cluster.name', under: 'k8s_cluster_name' },
+] as const;
+
+export function mapNodesMeta(
+	raw: Record<string, unknown>,
+): K8sNodesData['meta'] {
+	const out: Record<string, unknown> = { ...raw };
+	nodesMetaMap.forEach(({ dot, under }) => {
+		if (dot in raw) {
+			const v = raw[dot];
+			out[under] = typeof v === 'string' ? v : raw[under];
+		}
+	});
+	return out as K8sNodesData['meta'];
+}
+
+export const getK8sNodesList = async (
+	props: K8sNodesListPayload,
+	signal?: AbortSignal,
+	headers?: Record<string, string>,
+	dotMetricsEnabled = false,
+): Promise<SuccessResponse<K8sNodesListResponse> | ErrorResponse> => {
+	try {
+		const requestProps =
+			dotMetricsEnabled && Array.isArray(props.filters?.items)
+				? {
+						...props,
+						filters: {
+							...props.filters,
+							items: props.filters.items.reduce<typeof props.filters.items>(
+								(acc, item) => {
+									if (item.value === undefined) {
+										return acc;
+									}
+									if (
+										item.key &&
+										typeof item.key === 'object' &&
+										'key' in item.key &&
+										typeof item.key.key === 'string'
+									) {
+										const mappedKey = UnderscoreToDotMap[item.key.key] ?? item.key.key;
+										acc.push({
+											...item,
+											key: { ...item.key, key: mappedKey },
+										});
+									} else {
+										acc.push(item);
+									}
+									return acc;
+								},
+								[] as typeof props.filters.items,
+							),
+						},
+				  }
+				: props;
+
+		const response = await axios.post('/nodes/list', requestProps, {
+			signal,
+			headers,
+		});
+		const payload: K8sNodesListResponse = response.data;
+
+		// one-liner to map dot→underscore
+		payload.data.records = payload.data.records.map((record) => ({
+			...record,
+			meta: mapNodesMeta(record.meta as Record<string, unknown>),
+		}));
+
+		return {
+			statusCode: 200,
+			error: null,
+			message: 'Success',
+			payload,
+			params: requestProps,
+		};
+	} catch (error) {
+		return ErrorResponseHandler(error as AxiosError);
+	}
+};

frontend/src/api/infraMonitoring/getK8sPodsList.ts

@@ -1,36 +1,21 @@
 import axios from 'api';
 import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
-import { UnderscoreToDotMap } from 'api/utils';
 import { AxiosError } from 'axios';
 import { ErrorResponse, SuccessResponse } from 'types/api';
+import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
+import { TagFilter } from 'types/api/queryBuilder/queryBuilderData';
 
-import { K8sBaseFilters } from '../Base/types';
+import { UnderscoreToDotMap } from '../utils';
 
-// TODO(H4ad): Erase this whole file when migrating to openapi
-export const podsMetaMap = [
-	{ dot: 'k8s.cronjob.name', under: 'k8s_cronjob_name' },
-	{ dot: 'k8s.daemonset.name', under: 'k8s_daemonset_name' },
-	{ dot: 'k8s.deployment.name', under: 'k8s_deployment_name' },
-	{ dot: 'k8s.job.name', under: 'k8s_job_name' },
-	{ dot: 'k8s.namespace.name', under: 'k8s_namespace_name' },
-	{ dot: 'k8s.node.name', under: 'k8s_node_name' },
-	{ dot: 'k8s.pod.name', under: 'k8s_pod_name' },
-	{ dot: 'k8s.pod.uid', under: 'k8s_pod_uid' },
-	{ dot: 'k8s.statefulset.name', under: 'k8s_statefulset_name' },
-	{ dot: 'k8s.cluster.name', under: 'k8s_cluster_name' },
-] as const;
-
-export function mapPodsMeta(raw: Record<string, unknown>): K8sPodsData['meta'] {
-	// clone everything
-	const out: Record<string, unknown> = { ...raw };
-	// overlay only the dot→under mappings
-	podsMetaMap.forEach(({ dot, under }) => {
-		if (dot in raw) {
-			const v = raw[dot];
-			out[under] = typeof v === 'string' ? v : raw[under];
-		}
-	});
-	return out as K8sPodsData['meta'];
+export interface K8sPodsListPayload {
+	filters: TagFilter;
+	groupBy?: BaseAutocompleteData[];
+	offset?: number;
+	limit?: number;
+	orderBy?: {
+		columnName: string;
+		order: 'asc' | 'desc';
+	};
 }
 
 export interface TimeSeriesValue {
@@ -86,44 +71,72 @@ export interface K8sPodsListResponse {
 	};
 }
 
+export const podsMetaMap = [
+	{ dot: 'k8s.cronjob.name', under: 'k8s_cronjob_name' },
+	{ dot: 'k8s.daemonset.name', under: 'k8s_daemonset_name' },
+	{ dot: 'k8s.deployment.name', under: 'k8s_deployment_name' },
+	{ dot: 'k8s.job.name', under: 'k8s_job_name' },
+	{ dot: 'k8s.namespace.name', under: 'k8s_namespace_name' },
+	{ dot: 'k8s.node.name', under: 'k8s_node_name' },
+	{ dot: 'k8s.pod.name', under: 'k8s_pod_name' },
+	{ dot: 'k8s.pod.uid', under: 'k8s_pod_uid' },
+	{ dot: 'k8s.statefulset.name', under: 'k8s_statefulset_name' },
+	{ dot: 'k8s.cluster.name', under: 'k8s_cluster_name' },
+] as const;
+
+export function mapPodsMeta(raw: Record<string, unknown>): K8sPodsData['meta'] {
+	// clone everything
+	const out: Record<string, unknown> = { ...raw };
+	// overlay only the dot→under mappings
+	podsMetaMap.forEach(({ dot, under }) => {
+		if (dot in raw) {
+			const v = raw[dot];
+			out[under] = typeof v === 'string' ? v : raw[under];
+		}
+	});
+	return out as K8sPodsData['meta'];
+}
+
+// getK8sPodsList
 export const getK8sPodsList = async (
-	props: K8sBaseFilters,
+	props: K8sPodsListPayload,
 	signal?: AbortSignal,
 	headers?: Record<string, string>,
 	dotMetricsEnabled = false,
 ): Promise<SuccessResponse<K8sPodsListResponse> | ErrorResponse> => {
 	try {
-		const requestProps = dotMetricsEnabled
-			? {
-					...props,
-					filters: {
-						...props.filters,
-						items: props.filters?.items.reduce<typeof props.filters.items>(
-							(acc, item) => {
-								if (item.value === undefined) {
+		const requestProps =
+			dotMetricsEnabled && Array.isArray(props.filters?.items)
+				? {
+						...props,
+						filters: {
+							...props.filters,
+							items: props.filters.items.reduce<typeof props.filters.items>(
+								(acc, item) => {
+									if (item.value === undefined) {
+										return acc;
+									}
+									if (
+										item.key &&
+										typeof item.key === 'object' &&
+										'key' in item.key &&
+										typeof item.key.key === 'string'
+									) {
+										const mappedKey = UnderscoreToDotMap[item.key.key] ?? item.key.key;
+										acc.push({
+											...item,
+											key: { ...item.key, key: mappedKey },
+										});
+									} else {
+										acc.push(item);
+									}
 									return acc;
-								}
-								if (
-									item.key &&
-									typeof item.key === 'object' &&
-									'key' in item.key &&
-									typeof item.key.key === 'string'
-								) {
-									const mappedKey = UnderscoreToDotMap[item.key.key] ?? item.key.key;
-									acc.push({
-										...item,
-										key: { ...item.key, key: mappedKey },
-									});
-								} else {
-									acc.push(item);
-								}
-								return acc;
-							},
-							[] as typeof props.filters.items,
-						),
-					},
-			  }
-			: props;
+								},
+								[] as typeof props.filters.items,
+							),
+						},
+				  }
+				: props;
 
 		const response = await axios.post('/pods/list', requestProps, {
 			signal,

frontend/src/api/infraMonitoring/getK8sVolumesList.ts

@@ -1,10 +1,22 @@
 import axios from 'api';
 import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
-import { UnderscoreToDotMap } from 'api/utils';
 import { AxiosError } from 'axios';
 import { ErrorResponse, SuccessResponse } from 'types/api';
+import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
+import { TagFilter } from 'types/api/queryBuilder/queryBuilderData';
 
-import { K8sBaseFilters } from '../Base/types';
+import { UnderscoreToDotMap } from '../utils';
+
+export interface K8sVolumesListPayload {
+	filters: TagFilter;
+	groupBy?: BaseAutocompleteData[];
+	offset?: number;
+	limit?: number;
+	orderBy?: {
+		columnName: string;
+		order: 'asc' | 'desc';
+	};
+}
 
 export interface K8sVolumesData {
 	persistentVolumeClaimName: string;
@@ -37,7 +49,6 @@ export interface K8sVolumesListResponse {
 	};
 }
 
-// TODO(H4ad): Erase this whole file when migrating to openapi
 export const volumesMetaMap: Array<{
 	dot: keyof Record<string, unknown>;
 	under: keyof K8sVolumesData['meta'];
@@ -57,8 +68,10 @@ export const volumesMetaMap: Array<{
 export function mapVolumesMeta(
 	rawMeta: Record<string, unknown>,
 ): K8sVolumesData['meta'] {
+	// start with everything that was already there
 	const out: Record<string, unknown> = { ...rawMeta };
 
+	// for each dot→under rule, if the raw has the dot, overwrite the underscore
 	volumesMetaMap.forEach(({ dot, under }) => {
 		if (dot in rawMeta) {
 			const val = rawMeta[dot];
@@ -70,47 +83,42 @@ export function mapVolumesMeta(
 }
 
 export const getK8sVolumesList = async (
-	props: K8sBaseFilters,
+	props: K8sVolumesListPayload,
 	signal?: AbortSignal,
 	headers?: Record<string, string>,
 	dotMetricsEnabled = false,
 ): Promise<SuccessResponse<K8sVolumesListResponse> | ErrorResponse> => {
 	try {
-		const { orderBy, ...rest } = props;
-		const basePayload = {
-			...rest,
-			filters: props.filters ?? { items: [], op: 'and' },
-			...(orderBy != null ? { orderBy } : {}),
-		};
-
-		const requestProps = dotMetricsEnabled
-			? {
-					...basePayload,
-					filters: {
-						...basePayload.filters,
-						items: basePayload.filters.items.reduce<typeof basePayload.filters.items>(
-							(acc, item) => {
-								if (item.value === undefined) {
+		// Prepare filters
+		const requestProps =
+			dotMetricsEnabled && Array.isArray(props.filters?.items)
+				? {
+						...props,
+						filters: {
+							...props.filters,
+							items: props.filters.items.reduce<typeof props.filters.items>(
+								(acc, item) => {
+									if (item.value === undefined) {
+										return acc;
+									}
+									if (
+										item.key &&
+										typeof item.key === 'object' &&
+										'key' in item.key &&
+										typeof item.key.key === 'string'
+									) {
+										const mappedKey = UnderscoreToDotMap[item.key.key] ?? item.key.key;
+										acc.push({ ...item, key: { ...item.key, key: mappedKey } });
+									} else {
+										acc.push(item);
+									}
 									return acc;
-								}
-								if (
-									item.key &&
-									typeof item.key === 'object' &&
-									'key' in item.key &&
-									typeof item.key.key === 'string'
-								) {
-									const mappedKey = UnderscoreToDotMap[item.key.key] ?? item.key.key;
-									acc.push({ ...item, key: { ...item.key, key: mappedKey } });
-								} else {
-									acc.push(item);
-								}
-								return acc;
-							},
-							[] as typeof basePayload.filters.items,
-						),
-					},
-			  }
-			: basePayload;
+								},
+								[] as typeof props.filters.items,
+							),
+						},
+				  }
+				: props;
 
 		const response = await axios.post('/pvcs/list', requestProps, {
 			signal,

frontend/src/api/infraMonitoring/getsK8sStatefulSetsList.ts

@@ -1,12 +1,11 @@
 import axios from 'api';
 import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
-import { UnderscoreToDotMap } from 'api/utils';
 import { AxiosError } from 'axios';
 import { ErrorResponse, SuccessResponse } from 'types/api';
 import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { TagFilter } from 'types/api/queryBuilder/queryBuilderData';
 
-import { K8sBaseFilters } from '../Base/types';
+import { UnderscoreToDotMap } from '../utils';
 
 export interface K8sStatefulSetsListPayload {
 	filters: TagFilter;
@@ -48,7 +47,6 @@ export interface K8sStatefulSetsListResponse {
 	};
 }
 
-// TODO(H4ad): Erase this whole file when migrating to openapi
 export const statefulSetsMetaMap = [
 	{ dot: 'k8s.statefulset.name', under: 'k8s_statefulset_name' },
 	{ dot: 'k8s.namespace.name', under: 'k8s_namespace_name' },
@@ -68,37 +66,42 @@ export function mapStatefulSetsMeta(
 }
 
 export const getK8sStatefulSetsList = async (
-	props: K8sBaseFilters,
+	props: K8sStatefulSetsListPayload,
 	signal?: AbortSignal,
 	headers?: Record<string, string>,
 	dotMetricsEnabled = false,
 ): Promise<SuccessResponse<K8sStatefulSetsListResponse> | ErrorResponse> => {
 	try {
-		const requestProps = dotMetricsEnabled
-			? {
-					...props,
-					filters: {
-						...props.filters,
-						items: props.filters.items.reduce<TagFilter['items']>((acc, item) => {
-							if (item.value === undefined) {
-								return acc;
-							}
-							if (
-								item.key &&
-								typeof item.key === 'object' &&
-								'key' in item.key &&
-								typeof item.key.key === 'string'
-							) {
-								const mappedKey = UnderscoreToDotMap[item.key.key] ?? item.key.key;
-								acc.push({ ...item, key: { ...item.key, key: mappedKey } });
-							} else {
-								acc.push(item);
-							}
-							return acc;
-						}, [] as TagFilter['items']),
-					},
-			  }
-			: props;
+		// Prepare filters
+		const requestProps =
+			dotMetricsEnabled && Array.isArray(props.filters?.items)
+				? {
+						...props,
+						filters: {
+							...props.filters,
+							items: props.filters.items.reduce<typeof props.filters.items>(
+								(acc, item) => {
+									if (item.value === undefined) {
+										return acc;
+									}
+									if (
+										item.key &&
+										typeof item.key === 'object' &&
+										'key' in item.key &&
+										typeof item.key.key === 'string'
+									) {
+										const mappedKey = UnderscoreToDotMap[item.key.key] ?? item.key.key;
+										acc.push({ ...item, key: { ...item.key, key: mappedKey } });
+									} else {
+										acc.push(item);
+									}
+									return acc;
+								},
+								[] as typeof props.filters.items,
+							),
+						},
+				  }
+				: props;
 
 		const response = await axios.post('/statefulsets/list', requestProps, {
 			signal,
@@ -106,6 +109,7 @@ export const getK8sStatefulSetsList = async (
 		});
 		const payload: K8sStatefulSetsListResponse = response.data;
 
+		// apply our helper
 		payload.data.records = payload.data.records.map((record) => ({
 			...record,
 			meta: mapStatefulSetsMeta(record.meta as Record<string, unknown>),

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

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

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

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

frontend/src/auto-import-registry.d.ts

@@ -10,6 +10,7 @@
 // PR for reference: https://github.com/SigNoz/signoz/pull/9694
 // -------------------------------------------------------------------------
 
+import '@signozhq/badge';
 import '@signozhq/button';
 import '@signozhq/calendar';
 import '@signozhq/callout';
@@ -24,6 +25,9 @@ import '@signozhq/input';
 import '@signozhq/popover';
 import '@signozhq/radio-group';
 import '@signozhq/resizable';
+import '@signozhq/sonner';
+import '@signozhq/switch';
 import '@signozhq/table';
 import '@signozhq/toggle-group';
+import '@signozhq/tooltip';
 import '@signozhq/ui';

frontend/src/components/AlertDetailsFilters/Filters.styles.scss

@@ -2,6 +2,13 @@
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
-	background: var(--l3-background);
-	border: 1px solid var(--l1-border);
+	background: var(--bg-ink-300);
+	border: 1px solid var(--bg-slate-400);
+}
+
+.lightMode {
+	.reset-button {
+		background: var(--bg-vanilla-100);
+		border-color: var(--bg-vanilla-300);
+	}
 }

frontend/src/components/AppLoading/AppLoading.styles.scss

@@ -3,7 +3,7 @@
 	justify-content: center;
 	align-items: center;
 	height: 100vh;
-	background-color: var(--l2-background); // Background
+	background-color: var(--bg-ink-400, #121317); // Dark theme background
 
 	.app-loading-content {
 		display: flex;
@@ -28,7 +28,7 @@
 			.brand-title {
 				font-size: 20px;
 				font-weight: 600;
-				color: var(--l1-foreground); // Primary text
+				color: var(--bg-vanilla-100, #ffffff); // White text for dark theme
 				margin: 0;
 			}
 		}
@@ -37,7 +37,7 @@
 			margin-bottom: 24px;
 
 			.ant-typography {
-				color: var(--l2-foreground); // Secondary text
+				color: var(--bg-vanilla-400, #c0c1c3); // Light gray text for dark theme
 			}
 		}
 
@@ -46,7 +46,7 @@
 			width: 150px;
 			height: 12px;
 			border-radius: 2px;
-			color: var(--primary-background); // Primary blue color
+			color: var(--bg-robin-500, #4e74f8); // Primary blue color
 			border: 2px solid;
 			position: relative;
 		}
@@ -67,6 +67,38 @@
 	}
 }
 
+// Light theme styles - more specific selector
+.app-loading-container.lightMode {
+	background-color: var(
+		--bg-vanilla-100,
+		#ffffff
+	) !important; // White background for light theme
+
+	.app-loading-content {
+		.brand {
+			.brand-title {
+				color: var(--bg-ink-400, #121317) !important; // Dark text for light theme
+			}
+		}
+
+		.brand-tagline {
+			.ant-typography {
+				color: var(
+					--bg-ink-300,
+					#6b7280
+				) !important; // Dark gray text for light theme
+			}
+		}
+
+		.loader {
+			color: var(
+				--bg-robin-500,
+				#4e74f8
+			) !important; // Keep primary blue color for consistency
+		}
+	}
+}
+
 .perilin-bg {
 	position: absolute;
 	top: 0;
@@ -80,12 +112,41 @@
 
 	mask-image: radial-gradient(
 		circle at 50% 0,
-		color-mix(in srgb, var(--background) 10%, transparent) 0,
-		transparent 100%
+		rgba(11, 12, 14, 0.1) 0,
+		rgba(11, 12, 14, 0) 100%
 	);
 	-webkit-mask-image: radial-gradient(
 		circle at 50% 0,
-		color-mix(in srgb, var(--background) 10%, transparent) 0,
-		transparent 100%
+		rgba(11, 12, 14, 0.1) 0,
+		rgba(11, 12, 14, 0) 100%
 	);
 }
+
+// Dark theme styles - ensure dark theme is properly applied
+.app-loading-container.dark {
+	background-color: var(--bg-ink-400, #121317) !important; // Dark background
+
+	.app-loading-content {
+		.brand {
+			.brand-title {
+				color: var(
+					--bg-vanilla-100,
+					#ffffff
+				) !important; // White text for dark theme
+			}
+		}
+
+		.brand-tagline {
+			.ant-typography {
+				color: var(
+					--bg-vanilla-400,
+					#c0c1c3
+				) !important; // Light gray text for dark theme
+			}
+		}
+
+		.loader {
+			color: var(--bg-robin-500, #4e74f8) !important; // Primary blue color
+		}
+	}
+}

frontend/src/components/AuthError/AuthError.styles.scss

@@ -4,13 +4,12 @@
 	animation: horizontal-shaking 300ms ease-out;
 
 	.error-content {
-		background: color-mix(in srgb, var(--bg-cherry-500) 10%, transparent);
-		border: 1px solid color-mix(in srgb, var(--bg-cherry-500) 20%, transparent);
+		background: rgba(229, 72, 77, 0.1);
+		border: 1px solid rgba(229, 72, 77, 0.2);
 		border-radius: 4px;
 
 		&__summary-section {
-			border-bottom: 1px solid
-				color-mix(in srgb, var(--bg-cherry-500) 20%, transparent);
+			border-bottom: 1px solid rgba(229, 72, 77, 0.2);
 		}
 
 		&__summary {
@@ -32,7 +31,7 @@
 		}
 
 		&__error-code {
-			color: var(--bg-cherry-100);
+			color: #fadadb;
 			font-size: 13px;
 			font-weight: 500;
 			line-height: 1;
@@ -40,7 +39,7 @@
 		}
 
 		&__error-message {
-			color: var(--bg-cherry-300);
+			color: #f5b6b8;
 			font-size: 13px;
 			font-weight: 400;
 			line-height: 20px;
@@ -52,13 +51,13 @@
 		}
 
 		&__message-badge-label-text {
-			color: var(--bg-cherry-100);
+			color: #fadadb;
 		}
 
 		&__message-badge-line {
 			background-image: radial-gradient(
 				circle,
-				color-mix(in srgb, var(--bg-cherry-500) 30%, transparent) 1px,
+				rgba(229, 72, 77, 0.3) 1px,
 				transparent 2px
 			);
 		}
@@ -72,23 +71,23 @@
 		}
 
 		&__message-item {
-			color: var(--bg-cherry-300);
+			color: #f5b6b8;
 			font-size: 13px;
 			font-weight: 400;
 			line-height: 20px;
 			letter-spacing: -0.065px;
 
 			&::before {
-				background: var(--bg-cherry-300);
+				background: #f5b6b8;
 			}
 		}
 
 		&__scroll-hint {
-			background: color-mix(in srgb, var(--bg-cherry-500) 20%, transparent);
+			background: rgba(229, 72, 77, 0.2);
 		}
 
 		&__scroll-hint-text {
-			color: var(--bg-cherry-100);
+			color: #fadadb;
 		}
 	}
 
@@ -101,28 +100,27 @@
 .lightMode {
 	.auth-error-container {
 		.error-content {
+			background: rgba(229, 72, 77, 0.1);
+			border-color: rgba(229, 72, 77, 0.2);
+
 			&__error-code {
-				color: var(--l2-foreground);
+				color: var(--bg-ink-100);
 			}
 
 			&__error-message {
-				color: var(--l1-foreground);
-			}
-
-			&__message-badge-label-text {
-				color: var(--l2-foreground);
+				color: var(--bg-ink-400);
 			}
 
 			&__message-item {
-				color: var(--l1-foreground);
+				color: var(--bg-ink-400);
 
 				&::before {
-					background: var(--l3-background);
+					background: var(--bg-ink-400);
 				}
 			}
 
 			&__scroll-hint-text {
-				color: var(--l2-foreground);
+				color: var(--bg-ink-100);
 			}
 		}
 	}

frontend/src/components/AuthPageContainer/AuthFooter.styles.scss

@@ -16,8 +16,8 @@
 	justify-content: center;
 	gap: 16px;
 	padding: 12px;
-	background: var(--l2-background);
-	border: 1px solid var(--l1-border);
+	background: var(--bg-ink-400);
+	border: 1px solid var(--bg-ink-200);
 	border-radius: 4px;
 }
 
@@ -32,7 +32,7 @@
 	width: 6px;
 	height: 6px;
 	border-radius: 9999px;
-	background: var(--bg-forest-500);
+	background: #25e192;
 	flex-shrink: 0;
 }
 
@@ -49,7 +49,7 @@
 	font-size: 11px;
 	font-weight: 400;
 	line-height: 1;
-	color: var(--l2-foreground);
+	color: var(--text-neutral-dark-100);
 	text-align: center;
 }
 
@@ -67,16 +67,16 @@
 
 .auth-footer-link-icon {
 	flex-shrink: 0;
-	color: var(--l1-foreground);
+	color: var(--text-neutral-dark-50);
 }
 
 .auth-footer-link-status {
 	.auth-footer-text {
-		color: var(--bg-forest-500);
+		color: #25e192;
 	}
 
 	.auth-footer-link-icon {
-		color: var(--bg-forest-500);
+		color: #25e192;
 	}
 }
 
@@ -84,12 +84,14 @@
 	width: 4px;
 	height: 4px;
 	border-radius: 50%;
-	background: var(--l3-background);
+	background: var(--bg-ink-200);
 	flex-shrink: 0;
 }
 
 .lightMode {
 	.auth-footer-content {
+		background: var(--bg-base-white);
+		border-color: var(--bg-vanilla-300);
 		box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.08);
 	}
 
@@ -106,4 +108,8 @@
 	.auth-footer-link-icon {
 		color: var(--text-neutral-light-100);
 	}
+
+	.auth-footer-separator {
+		background: var(--bg-vanilla-300);
+	}
 }

frontend/src/components/AuthPageContainer/AuthHeader.styles.scss

@@ -30,7 +30,7 @@
 	font-size: 15.4px;
 	font-weight: 500;
 	line-height: 17.5px;
-	color: var(--l1-foreground);
+	color: var(--text-neutral-dark-50);
 	white-space: nowrap;
 }
 
@@ -41,7 +41,7 @@
 	gap: 8px;
 	height: 32px;
 	padding: 10px 16px;
-	background: var(--l2-background);
+	background: var(--bg-ink-400);
 	border: none;
 	border-radius: 2px;
 	cursor: pointer;
@@ -52,13 +52,13 @@
 		font-size: 11px;
 		font-weight: 500;
 		line-height: 1;
-		color: var(--l2-foreground);
+		color: var(--text-neutral-dark-100);
 		text-align: center;
 	}
 
 	svg {
 		flex-shrink: 0;
-		color: var(--l2-foreground);
+		color: var(--text-neutral-dark-100);
 	}
 
 	&:hover {
@@ -67,8 +67,16 @@
 }
 
 .lightMode {
+	.auth-header-logo-text {
+		color: var(--text-neutral-light-100);
+	}
+
 	.auth-header-help-button {
-		background: var(--l2-background);
-		border: 1px solid var(--l1-border);
+		background: var(--bg-vanilla-200);
+
+		span,
+		svg {
+			color: var(--text-neutral-light-200);
+		}
 	}
 }

frontend/src/components/AuthPageContainer/AuthHeader.tsx

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

frontend/src/components/AuthPageContainer/AuthPageContainer.styles.scss

@@ -4,7 +4,7 @@
 	position: relative;
 	min-height: 100vh;
 	width: 100%;
-	background: var(--l1-background);
+	background: var(--bg-neutral-dark-1000);
 	display: flex;
 	flex-direction: column;
 }
@@ -43,13 +43,13 @@
 .masked-dots {
 	mask-image: radial-gradient(
 		circle at 50% 0%,
-		color-mix(in srgb, var(--background) 10%, transparent) 0%,
-		transparent 56.77%
+		rgba(11, 12, 14, 0.1) 0%,
+		rgba(11, 12, 14, 0) 56.77%
 	);
 	-webkit-mask-image: radial-gradient(
 		circle at 50% 0%,
-		color-mix(in srgb, var(--background) 10%, transparent) 0%,
-		transparent 56.77%
+		rgba(11, 12, 14, 0.1) 0%,
+		rgba(11, 12, 14, 0) 56.77%
 	);
 }
 
@@ -65,7 +65,7 @@
 	border-radius: 956px;
 	background: radial-gradient(
 		ellipse at center -500px,
-		color-mix(in srgb, var(--primary-background) 30%, transparent) 0%,
+		rgba(78, 116, 248, 0.3) 0%,
 		transparent 70%
 	);
 	opacity: 0.3;
@@ -85,8 +85,8 @@
 	height: 100%;
 	background-image: repeating-linear-gradient(
 		to bottom,
-		var(--l1-border) 0px,
-		var(--l1-border) 4px,
+		var(--bg-ink-200) 0px,
+		var(--bg-ink-200) 4px,
 		transparent 4px,
 		transparent 8px
 	);
@@ -145,19 +145,19 @@
 }
 
 .lightMode {
+	.auth-page-wrapper {
+		background: var(--bg-base-white);
+	}
+
 	.bg-dot-pattern {
-		background: radial-gradient(
-			circle,
-			var(--l3-background) 1px,
-			transparent 1px
-		);
+		background: radial-gradient(circle, rgba(35, 38, 46, 1) 1px, transparent 1px);
 		background-size: 12px 12px;
 	}
 
 	.auth-page-gradient {
 		background: radial-gradient(
 			ellipse at center top,
-			color-mix(in srgb, var(--primary-background) 12%, transparent) 0%,
+			rgba(78, 116, 248, 0.12) 0%,
 			transparent 60%
 		);
 		opacity: 0.8;
@@ -167,4 +167,15 @@
 			filter: blur(300px);
 		}
 	}
+
+	.auth-page-line-left,
+	.auth-page-line-right {
+		background-image: repeating-linear-gradient(
+			to bottom,
+			var(--bg-vanilla-300) 0px,
+			var(--bg-vanilla-300) 4px,
+			transparent 4px,
+			transparent 8px
+		);
+	}
 }

frontend/src/components/CeleryOverview/CeleryOverviewConfigOptions/CeleryOverviewConfigOptions.styles.scss

@@ -21,8 +21,8 @@
 				min-width: 164px;
 
 				border-radius: 2px;
-				border: 1px solid var(--l1-border);
-				background: var(--l3-background);
+				border: 1px solid var(--bg-slate-400);
+				background: var(--bg-ink-300);
 			}
 		}
 	}
@@ -31,3 +31,16 @@
 		flex-shrink: 0;
 	}
 }
+
+.lightMode {
+	.celery-overview-filters {
+		.celery-filters {
+			.config-select-option {
+				.ant-select-selector {
+					border: 1px solid var(--bg-vanilla-300);
+					background: var(--bg-vanilla-100);
+				}
+			}
+		}
+	}
+}

frontend/src/components/CeleryOverview/CeleryOverviewTable/CeleryOverviewTable.styles.scss

@@ -27,10 +27,10 @@
 				font-size: 12px;
 				line-height: 18px;
 
-				background: var(--l1-background);
+				background: var(--bg-ink-500);
 				border-bottom: none;
 
-				color: var(--l2-foreground);
+				color: var(--Vanilla-400, #c0c1c3);
 				font-family: Inter;
 				font-size: 11px;
 				font-style: normal;
@@ -47,8 +47,8 @@
 				padding: 12px;
 				font-size: 13px;
 				line-height: 20px;
-				color: var(--l1-foreground);
-				background: var(--l1-background);
+				color: var(--bg-vanilla-100);
+				background: var(--bg-ink-500);
 			}
 
 			.progress-container {
@@ -59,7 +59,7 @@
 			}
 
 			.ant-table-tbody > tr:hover > td {
-				background: color-mix(in srgb, var(--l1-foreground) 4%, transparent);
+				background: rgba(255, 255, 255, 0.04);
 			}
 
 			.ant-table-cell:first-child {
@@ -89,7 +89,7 @@
 			position: relative;
 			bottom: 0;
 			width: 100%;
-			background: var(--l1-background);
+			background: var(--bg-ink-500);
 			padding: 4px;
 			margin: 0;
 
@@ -100,11 +100,48 @@
 				border-radius: 4px;
 
 				&-active {
-					background: var(--primary-background);
-					border-color: var(--primary-background);
+					background: var(--bg-robin-500);
+					border-color: var(--bg-robin-500);
 
 					a {
-						color: var(--primary-foreground) !important;
+						color: var(--bg-ink-500) !important;
+					}
+				}
+			}
+		}
+	}
+}
+
+.lightMode {
+	.celery-overview-table-container {
+		.celery-overview-table {
+			.ant-table {
+				.ant-table-thead > tr > th {
+					background: var(--bg-vanilla-100);
+					color: var(--text-ink-300);
+				}
+
+				.ant-table-cell {
+					background: var(--bg-vanilla-100);
+					color: var(--bg-ink-500);
+				}
+
+				.ant-table-tbody > tr:hover > td {
+					background: rgba(0, 0, 0, 0.04);
+				}
+			}
+
+			.ant-pagination {
+				background: var(--bg-vanilla-100);
+
+				.ant-pagination-item {
+					&-active {
+						background: var(--bg-robin-500);
+						border-color: var(--bg-robin-500);
+
+						a {
+							color: var(--bg-vanilla-100) !important;
+						}
 					}
 				}
 			}

frontend/src/components/CeleryTask/CeleryTaskConfigOptions/CeleryTaskConfigOptions.styles.scss

@@ -18,8 +18,21 @@
 				min-width: 164px;
 
 				border-radius: 2px;
-				border: 1px solid var(--l1-border);
-				background: var(--l3-background);
+				border: 1px solid var(--bg-slate-400);
+				background: var(--bg-ink-300);
+			}
+		}
+	}
+}
+
+.lightMode {
+	.celery-task-filters {
+		.celery-filters {
+			.config-select-option {
+				.ant-select-selector {
+					border: 1px solid var(--bg-vanilla-300);
+					background: var(--bg-vanilla-100);
+				}
 			}
 		}
 	}

frontend/src/components/CeleryTask/CeleryTaskDetail/CeleryTaskDetail.style.scss

@@ -1,7 +1,7 @@
 .celery-task-detail-drawer {
 	.ant-drawer-wrapper-body {
-		background: var(--l1-background);
-		border: 1px solid var(--l1-border);
+		background: var(--bg-ink-500);
+		border: 1px solid var(--bg-ink-300);
 	}
 
 	.ant-drawer-body {
@@ -11,17 +11,17 @@
 			border: none;
 			.ant-card-body {
 				height: 100%;
-				background: var(--l1-background);
+				background: var(--bg-ink-500);
 
 				.ant-table {
-					background: var(--l1-background);
+					background: var(--bg-ink-500);
 				}
 			}
 		}
 	}
 
 	.ant-drawer-header {
-		border-bottom: 1px solid var(--l1-border);
+		border-bottom: 1px solid var(--bg-ink-300);
 		.ant-drawer-header-title {
 			.ant-drawer-close {
 				position: absolute;
@@ -29,7 +29,7 @@
 			}
 
 			button > svg {
-				color: var(--l1-foreground);
+				color: var(--bg-vanilla-100);
 			}
 
 			.ant-drawer-title {
@@ -38,7 +38,7 @@
 				align-items: flex-start;
 
 				.title {
-					color: var(--l1-foreground);
+					color: var(--bg-vanilla-100);
 					font-family: Inter;
 					font-size: 18px;
 					font-style: normal;
@@ -48,7 +48,7 @@
 				}
 
 				.subtitle {
-					color: var(--l2-foreground);
+					color: var(--bg-vanilla-400);
 					font-family: Inter;
 					font-size: 12px;
 					font-style: normal;
@@ -60,10 +60,10 @@
 	}
 
 	.ant-drawer-footer {
-		border-top: 1px solid var(--l1-border);
+		border-top: 1px solid var(--bg-ink-300);
 
 		.footer-text {
-			color: var(--l2-foreground);
+			color: var(--bg-vanilla-400);
 			font-family: Inter;
 			font-size: 14px;
 			font-style: normal;
@@ -72,3 +72,51 @@
 		}
 	}
 }
+
+.lightMode {
+	.celery-task-detail-drawer {
+		.ant-drawer-wrapper-body {
+			background: var(--bg-vanilla-100);
+			border: 1px solid var(--bg-vanilla-300);
+		}
+
+		.ant-drawer-body {
+			.ant-card {
+				.ant-card-body {
+					background: var(--bg-vanilla-100);
+
+					.ant-table {
+						background: var(--bg-vanilla-100);
+					}
+				}
+			}
+		}
+
+		.ant-drawer-header {
+			border-bottom: 1px solid var(--bg-vanilla-300);
+			.ant-drawer-header-title {
+				button > svg {
+					color: var(--bg-ink-500);
+				}
+
+				.ant-drawer-title {
+					.title {
+						color: var(--bg-ink-400);
+					}
+
+					.subtitle {
+						color: var(--bg-ink-300);
+					}
+				}
+			}
+		}
+
+		.ant-drawer-footer {
+			border-top: 1px solid var(--bg-vanilla-300);
+
+			.footer-text {
+				color: var(--bg-ink-400);
+			}
+		}
+	}
+}

frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskGraph.style.scss

@@ -40,8 +40,13 @@
 		display: flex;
 		justify-content: center;
 		align-items: center;
-		border: 1px solid var(--l1-border);
-		background: linear-gradient(0deg, transparent 0%, transparent 100%), #0b0c0e;
+		border: 1px solid var(--bg-slate-500);
+		background: linear-gradient(
+				0deg,
+				rgba(171, 189, 255, 0) 0%,
+				rgba(171, 189, 255, 0) 100%
+			),
+			#0b0c0e;
 
 		.ant-card-body {
 			height: 100%;
@@ -142,13 +147,13 @@
 		gap: 16px;
 		align-items: center;
 
-		border: 1px dashed var(--l1-border);
+		border: 1px dashed var(--bg-slate-50);
 		border-radius: 4px;
 		padding: 6px 24px 6px 12px;
 		width: max-content;
 
 		.configure-option-Info-text {
-			color: var(--l2-foreground);
+			color: var(--bg-vanilla-400);
 			font-size: 12px;
 			font-weight: 400;
 		}
@@ -156,7 +161,7 @@
 
 	.row-panel {
 		border-radius: 4px;
-		background: color-mix(in srgb, var(--card) 40%, transparent);
+		background: rgba(18, 19, 23, 0.4);
 		padding: 8px;
 		display: flex;
 		gap: 6px;
@@ -175,12 +180,12 @@
 			align-items: center;
 
 			.row-icon {
-				color: var(--l2-foreground);
+				color: var(--bg-vanilla-400);
 				cursor: pointer;
 			}
 
 			.section-title {
-				color: var(--l2-foreground);
+				color: var(--bg-vanilla-400);
 				font-family: Inter;
 				font-size: 14px;
 				font-style: normal;
@@ -193,7 +198,7 @@
 }
 
 .celery-task-states {
-	border-bottom: 1px solid var(--l1-border);
+	border-bottom: 1px solid var(--bg-ink-200);
 
 	&__tab {
 		min-width: 140px;
@@ -202,11 +207,11 @@
 		position: relative;
 
 		&:not([data-last-tab='true']) {
-			border-right: 1px solid var(--l1-border);
+			border-right: 1px solid var(--bg-ink-200);
 		}
 
 		&--selected {
-			background-color: var(--l3-background);
+			background-color: rgba(38, 38, 38, 0.5);
 		}
 	}
 
@@ -220,7 +225,7 @@
 	&__label {
 		font-family: 'Inter';
 		font-size: 14px;
-		color: var(--l2-foreground);
+		color: var(--bg-vanilla-400);
 		line-height: 20px;
 		font-weight: 500;
 	}
@@ -228,7 +233,7 @@
 	&__value {
 		font-family: 'Geist Mono';
 		font-size: 24px;
-		color: var(--l1-foreground);
+		color: var(--bg-vanilla-100);
 		line-height: 32px;
 	}
 
@@ -238,15 +243,46 @@
 		height: 2px;
 		bottom: 0;
 		left: 0;
-		background-color: var(--l1-foreground);
+		background-color: var(--bg-vanilla-100);
 	}
 }
 
 .lightMode {
 	.celery-task-graph-grid-container {
 		.celery-task-graph-worker-count {
+			border: 1px solid var(--bg-vanilla-300);
 			background: unset;
 		}
+
+		.row-panel .row-panel-section .section-title {
+			color: var(--bg-ink-400);
+		}
+	}
+
+	.celery-task-states {
+		border-bottom: 1px solid var(--bg-vanilla-300);
+
+		&__tab {
+			&:not([data-last-tab='true']) {
+				border-right: 1px solid var(--bg-vanilla-300);
+			}
+
+			&--selected {
+				background-color: var(--bg-vanilla-200);
+			}
+		}
+
+		&__label {
+			color: var(--bg-ink-500);
+		}
+
+		&__value {
+			color: var(--bg-slate-100);
+		}
+
+		&__indicator {
+			background-color: var(--bg-ink-400);
+		}
 	}
 
 	.configure-option-Info {

frontend/src/components/CeleryTask/useNavigateToExplorer.ts

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

frontend/src/components/ChangePercentagePill/ChangePercentagePill.styles.scss

@@ -26,7 +26,7 @@
 		}
 	}
 	&--negative {
-		background: color-mix(in srgb, var(--bg-cherry-500) 10%, transparent);
+		background: rgba(229, 72, 77, 0.1);
 
 		.change-percentage-pill {
 			&__icon {

frontend/src/components/ChangelogModal/ChangelogModal.styles.scss

@@ -1,7 +1,7 @@
 .changelog-modal {
 	.ant-modal-content {
 		padding: unset;
-		background-color: var(--l2-background);
+		background-color: var(--bg-ink-400, #121317);
 
 		.ant-modal-header {
 			margin-bottom: unset;
@@ -16,12 +16,12 @@
 		display: flex;
 		align-items: center;
 		gap: 8px;
-		background-color: var(--l2-background);
+		background-color: var(--bg-ink-400, #121317);
 		padding: 16px;
 		font-size: 14px;
 		line-height: 20px;
-		color: var(--l1-foreground);
-		border-bottom: 1px solid var(--l1-border);
+		color: var(--text-vanilla-100, #fff);
+		border-bottom: 1px solid var(--bg-slate-500, #161922);
 	}
 
 	&-footer.scroll-available {
@@ -32,14 +32,14 @@
 
 	&-footer {
 		position: relative;
-		border: 1px solid var(--l1-border);
+		border: 1px solid var(--bg-slate-500, #161922);
 		padding: 12px;
 		display: flex;
 		align-items: center;
 		justify-content: space-between;
 
 		&-label {
-			color: var(--text-robin-400);
+			color: var(--text-robin-400, #7190f9);
 			font-size: 14px;
 			line-height: 24px;
 			position: relative;
@@ -54,7 +54,7 @@
 				width: 6px;
 				height: 6px;
 				border-radius: 100%;
-				background-color: var(--primary-background);
+				background-color: var(--bg-robin-500, #7190f9);
 			}
 		}
 
@@ -77,7 +77,7 @@
 			.scroll-btn {
 				all: unset;
 				padding: 4px 12px 4px 10px;
-				background-color: var(--l1-border);
+				background-color: var(--bg-slate-400, #1d212d);
 				border-radius: 20px;
 				cursor: pointer;
 				display: flex;
@@ -87,17 +87,17 @@
 				transition: background-color 0.1s;
 
 				&:hover {
-					background-color: var(--l1-border);
+					background-color: var(--bg-slate-200, #2c3140);
 				}
 
 				&:active {
-					background-color: var(--l1-border);
+					background-color: var(--bg-slate-600, #1c1f2a);
 				}
 
 				span {
 					font-size: 12px;
 					line-height: 18px;
-					color: var(--l2-foreground);
+					color: var(--text-vanilla-400, #c0c1c3);
 				}
 
 				// add animation to the chevrons down icon
@@ -112,7 +112,7 @@
 		max-height: calc(100vh - 300px);
 		overflow-y: auto;
 		padding: 16px 16px 18px 16px;
-		border: 1px solid var(--l1-border);
+		border: 1px solid var(--bg-slate-500, #161922);
 		border-top-width: 0;
 		border-bottom-width: 0;
 	}
@@ -127,3 +127,36 @@
 		opacity: 0.5;
 	}
 }
+
+.lightMode {
+	.changelog-modal {
+		.ant-modal-content {
+			background-color: var(--bg-vanilla-100);
+			border-color: var(--bg-vanilla-300);
+		}
+
+		&-title {
+			background: var(--bg-vanilla-100);
+			color: var(--bg-ink-500);
+			border-color: var(--bg-vanilla-300);
+		}
+
+		&-content {
+			border-color: var(--bg-vanilla-300);
+		}
+
+		&-footer {
+			border-color: var(--bg-vanilla-300);
+
+			.scroll-btn-container {
+				.scroll-btn {
+					background-color: var(--bg-vanilla-300);
+
+					span {
+						color: var(--text-ink-500);
+					}
+				}
+			}
+		}
+	}
+}

frontend/src/components/ChangelogModal/ChangelogModal.tsx

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

frontend/src/components/ChangelogModal/components/ChangelogRenderer.styles.scss

@@ -15,13 +15,13 @@
 	&-section-title {
 		font-size: 14px;
 		line-height: 20px;
-		color: var(--l1-foreground);
+		color: var(--text-vanilla-400, #c0c1c3);
 	}
 
 	.changelog-release-date {
 		font-size: 14px;
 		line-height: 20px;
-		color: var(--l1-foreground);
+		color: var(--text-vanilla-400, #c0c1c3);
 		display: block;
 		margin-bottom: 12px;
 	}
@@ -38,7 +38,7 @@
 		top: 6px;
 		bottom: -30px;
 		width: 1px;
-		background-color: var(--l1-border);
+		background-color: var(--bg-slate-400, #1d212d);
 
 		.inner-ball {
 			position: absolute;
@@ -47,7 +47,7 @@
 			height: 6px;
 			border-radius: 100%;
 			transform: translateX(-50%);
-			background-color: var(--primary-background);
+			background-color: var(--bg-robin-500, #7190f9);
 		}
 	}
 
@@ -69,7 +69,7 @@
 				top: 10px;
 				width: 20px;
 				height: 2px;
-				background-color: var(--primary-background);
+				background-color: var(--bg-robin-500, #7190f9);
 				transform: translate(-100%, -50%);
 			}
 		}
@@ -79,20 +79,19 @@
 	p {
 		font-size: 14px;
 		line-height: 20px;
-		color: var(--l1-foreground);
+		color: var(--text-vanilla-400, #c0c1c3);
 	}
 
 	code {
 		padding: 2px 4px;
-		background-color: var(--l1-border);
+		background-color: var(--bg-slate-500, #161922);
 		border-radius: 6px;
 		font-size: 95%;
 		vertical-align: middle;
-		border: 1px solid var(--l1-border);
-		color: var(--l1-foreground);
+		border: 1px solid var(--bg-slate-600, #1c1f2a);
 	}
 	a {
-		color: var(--text-robin-500);
+		color: var(--text-robin-500, #7190f9);
 		font-weight: 600;
 		text-decoration: underline;
 
@@ -103,7 +102,7 @@
 
 	& :is(h1, h2, h3, h4, h5, h6, &-section-title) {
 		font-weight: 600;
-		color: var(--l1-foreground);
+		color: var(--text-vanilla-100, #fff);
 	}
 
 	h1 {
@@ -123,7 +122,7 @@
 		width: 100%;
 		overflow: hidden;
 		border-radius: 4px;
-		border: 1px solid var(--l1-border);
+		border: 1px solid var(--bg-slate-400, #1d212d);
 		margin-bottom: 28px;
 	}
 
@@ -131,3 +130,25 @@
 		margin: 12px 0;
 	}
 }
+
+.lightMode {
+	.changelog-renderer {
+		.changelog-release-date {
+			color: var(--text-ink-500);
+		}
+
+		&-line {
+			background-color: var(--bg-vanilla-300);
+		}
+
+		& :is(h1, h2, h3, h4, h5, h6, p, li, &-section-title) {
+			color: var(--text-ink-500);
+		}
+
+		code {
+			background-color: var(--bg-vanilla-300);
+			border: 1px solid var(--bg-vanilla-300);
+			color: var(--text-ink-500);
+		}
+	}
+}

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

@@ -18,7 +18,7 @@
 		font-weight: var(--label-base-400-font-weight);
 		line-height: var(--label-base-400-line-height);
 		letter-spacing: -0.065px;
-		color: var(--l1-foreground);
+		color: var(--bg-base-white);
 		margin: 0;
 	}
 
@@ -54,7 +54,7 @@
 		height: 32px;
 		color: var(--l1-foreground);
 		background-color: var(--l2-background);
-		border-color: var(--l1-border);
+		border-color: var(--border);
 		font-size: var(--paragraph-base-400-font-size);
 		border-radius: 2px;
 		width: 100%;
@@ -96,3 +96,11 @@
 	gap: var(--spacing-4);
 	flex-shrink: 0;
 }
+
+.lightMode {
+	.create-sa-modal {
+		[data-slot='dialog-title'] {
+			color: var(--bg-base-black);
+		}
+	}
+}

frontend/src/components/CreateServiceAccountModal/CreateServiceAccountModal.tsx

@@ -4,7 +4,7 @@ import { Button } from '@signozhq/button';
 import { DialogFooter, DialogWrapper } from '@signozhq/dialog';
 import { X } from '@signozhq/icons';
 import { Input } from '@signozhq/input';
-import { toast } from '@signozhq/ui';
+import { toast } from '@signozhq/sonner';
 import { convertToApiError } from 'api/ErrorResponseHandlerForGeneratedAPIs';
 import {
 	invalidateListServiceAccounts,

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

@@ -1,12 +1,11 @@
-import { toast } from '@signozhq/ui';
+import { toast } from '@signozhq/sonner';
 import { rest, server } from 'mocks-server/server';
 import { NuqsTestingAdapter } from 'nuqs/adapters/testing';
 import { render, screen, userEvent, waitFor } from 'tests/test-utils';
 
 import CreateServiceAccountModal from '../CreateServiceAccountModal';
 
-jest.mock('@signozhq/ui', () => ({
-	...jest.requireActual('@signozhq/ui'),
+jest.mock('@signozhq/sonner', () => ({
 	toast: { success: jest.fn(), error: jest.fn() },
 }));
 

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

@@ -9,17 +9,16 @@
 		align-items: center;
 		justify-content: center;
 		flex-shrink: 0;
-		color: var(--secondary-foreground);
-		background-color: var(--secondary-background);
-		border: 1px solid var(--secondary-border);
+		color: var(--foreground);
+		border: 1px solid var(--border);
 		border-radius: 2px;
 		box-shadow: none;
 		padding: 10px;
 		height: 33px;
 
 		&:hover:not(:disabled) {
-			color: var(--primary-foreground);
-			background: var(--primary-background);
+			color: var(--bg-vanilla-100);
+			background: var(--primary);
 		}
 
 		&:disabled {
@@ -30,7 +29,7 @@
 
 	.timeSelection-input {
 		&:hover {
-			border-color: var(--l1-border) !important;
+			border-color: #1d212d !important;
 		}
 	}
 
@@ -99,7 +98,7 @@
 	justify-content: center;
 	padding: 4px;
 	cursor: default;
-	color: var(--l2-foreground) !important;
+	color: var(--bg-vanilla-400, #c0c1c3) !important;
 	font-size: 14px;
 	font-style: normal;
 	font-weight: 400;
@@ -147,10 +146,14 @@
 			color: rgba($color: #000000, $alpha: 0.4);
 		}
 	}
+
+	.info-text {
+		color: var(--bg-slate-400) !important;
+	}
 }
 
 .date-time-popover__footer {
-	border-top: 1px solid var(--l1-border);
+	border-top: 1px solid var(--bg-ink-200);
 	padding: 8px 14px;
 	.timezone-container {
 		display: flex;
@@ -202,7 +205,7 @@
 
 		display: flex;
 		align-items: center;
-		color: var(--l2-foreground);
+		color: var(--bg-vanilla-400);
 		gap: 6px;
 
 		.timezone {
@@ -210,10 +213,10 @@
 			align-items: center;
 			gap: 4px;
 			border-radius: 2px;
-			background: color-mix(in srgb, var(--bg-robin-200) 4%, transparent);
+			background: rgba(171, 189, 255, 0.04);
 			cursor: pointer;
 			padding: 0px 4px;
-			color: var(--l1-foreground);
+			color: var(--bg-vanilla-100);
 			border: none;
 		}
 	}
@@ -225,8 +228,8 @@
 	justify-content: center;
 	padding: 0 4px;
 	border-radius: 2px;
-	color: var(--l2-foreground);
-	background-color: var(--l3-background);
+	color: var(--bg-vanilla-400);
+	background-color: var(--bg-ink-200);
 	font-size: 9px;
 	font-weight: 400;
 	line-height: 12px;
@@ -246,8 +249,8 @@
 	width: 36px;
 
 	font-size: 11px;
-	color: var(--l2-foreground);
-	background-color: var(--l3-background);
+	color: var(--bg-vanilla-400);
+	background-color: var(--bg-ink-200);
 	cursor: pointer;
 
 	&.is-live {
@@ -269,14 +272,13 @@
 
 @keyframes ripple {
 	0% {
-		box-shadow: 0 0 0 0
-			color-mix(in srgb, var(--warning-background) 40%, transparent);
+		box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4);
 	}
 	60% {
-		box-shadow: 0 0 0 6px transparent;
+		box-shadow: 0 0 0 6px rgba(245, 158, 11, 0);
 	}
 	100% {
-		box-shadow: 0 0 0 0 transparent;
+		box-shadow: 0 0 0 0 rgba(245, 158, 11, 0);
 	}
 }
 
@@ -286,8 +288,8 @@
 	justify-content: center;
 	padding: 0 4px;
 	border-radius: 2px;
-	background: color-mix(in srgb, var(--bg-robin-200) 4%, transparent);
-	color: var(--l1-foreground);
+	background: rgba(171, 189, 255, 0.04);
+	color: var(--bg-vanilla-100);
 	font-size: 12px;
 	font-weight: 400;
 	line-height: 16px;
@@ -297,16 +299,23 @@
 	width: 20px;
 
 	&:hover {
-		background: color-mix(in srgb, var(--bg-robin-200) 8%, transparent);
+		background: rgba(171, 189, 255, 0.08);
 	}
 }
 
 .lightMode {
+	.date-time-popover__footer {
+		border-color: var(--bg-vanilla-400);
+	}
+
 	.timezone-container {
+		color: var(--bg-ink-400);
+
 		.timezone {
+			color: var(--bg-ink-100);
 			background: rgb(179 179 179 / 15%);
 			&__icon {
-				stroke: var(--l1-foreground);
+				stroke: var(--bg-ink-100);
 			}
 		}
 	}
@@ -314,16 +323,23 @@
 	.custom-time-picker {
 		.timeSelection-input {
 			&:hover {
-				border-color: var(--l1-border) !important;
+				border-color: var(--bg-vanilla-300) !important;
 			}
 		}
 	}
 
 	.timezone-badge {
+		color: var(--bg-ink-100);
 		background: rgb(179 179 179 / 15%);
 	}
 
+	.time-input-prefix {
+		background-color: var(--bg-vanilla-300);
+		color: var(--bg-ink-400);
+	}
+
 	.time-input-suffix-icon-badge {
+		color: var(--bg-ink-100);
 		background: rgb(179 179 179 / 15%);
 
 		&:hover {

frontend/src/components/CustomTimePicker/CustomTimePicker.tsx

@@ -656,13 +656,15 @@ function CustomTimePicker({
 						zoomOutDisabled ? 'Zoom out time range is limited to 1 month' : 'Zoom out'
 					}
 				>
-					<Button
-						className="zoom-out-btn"
-						onClick={handleZoomOut}
-						disabled={zoomOutDisabled}
-						data-testid="zoom-out-btn"
-						prefixIcon={<ZoomOut size={14} />}
-					/>
+					<span>
+						<Button
+							className="zoom-out-btn"
+							onClick={handleZoomOut}
+							disabled={zoomOutDisabled}
+							data-testid="zoom-out-btn"
+							prefixIcon={<ZoomOut size={14} />}
+						/>
+					</span>
 				</Tooltip>
 			)}
 		</div>

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

@@ -3,7 +3,11 @@ $font-family: 'Inter';
 $item-spacing: 8px;
 
 :root {
-	--border-color: var(--l1-border);
+	--border-color: var(--bg-slate-400);
+}
+
+.lightMode {
+	--border-color: var(--bg-vanilla-400);
 }
 
 // Mixins
@@ -20,7 +24,7 @@ $item-spacing: 8px;
 
 .timezone-picker {
 	width: 532px;
-	color: var(--l2-foreground);
+	color: var(--bg-vanilla-400);
 	font-family: $font-family;
 
 	&__search {
@@ -42,7 +46,7 @@ $item-spacing: 8px;
 		background: transparent;
 		border: none;
 		outline: none;
-		color: var(--l1-foreground);
+		color: var(--bg-vanilla-100);
 		font-size: 14px;
 		line-height: 20px;
 		letter-spacing: -0.07px;
@@ -52,19 +56,19 @@ $item-spacing: 8px;
 		}
 
 		&::placeholder {
-			color: var(--l2-foreground);
+			color: var(--bg-vanilla-400);
 		}
 	}
 
 	&__esc-key {
 		@include text-style-base;
 		font-size: 8px;
-		color: var(--l2-foreground);
+		color: var(--bg-vanilla-400);
 		letter-spacing: -0.04px;
 		border-radius: 2.286px;
-		border: 1.143px solid var(--l1-border);
+		border: 1.143px solid var(--bg-ink-200);
 		border-bottom-width: 2.286px;
-		background: var(--l2-background);
+		background: var(--bg-ink-400);
 		padding: 0 1px;
 	}
 
@@ -82,14 +86,14 @@ $item-spacing: 8px;
 		background: transparent;
 		border: none;
 		width: -webkit-fill-available;
-		color: var(--l2-foreground);
+		color: var(--bg-vanilla-400);
 		font-family: $font-family;
 
 		&:hover,
 		&.selected {
 			border-radius: 2px;
-			background: color-mix(in srgb, var(--bg-robin-200) 4%, transparent);
-			color: var(--l1-foreground);
+			background: rgba(171, 189, 255, 0.04);
+			color: var(--bg-vanilla-100);
 		}
 
 		&.has-divider {
@@ -113,7 +117,7 @@ $item-spacing: 8px;
 	}
 
 	&__offset {
-		color: var(--l1-foreground);
+		color: var(--bg-vanilla-100);
 		font-size: 12px;
 		line-height: 16px;
 		letter-spacing: -0.06px;
@@ -134,14 +138,28 @@ $item-spacing: 8px;
 	.timezone-picker {
 		&__search {
 			.search-icon {
-				stroke: var(--l1-foreground);
+				stroke: var(--bg-ink-400);
 			}
 		}
+		&__input {
+			color: var(--bg-ink-100);
+		}
+		&__esc-key {
+			background-color: var(--bg-vanilla-100);
+			border-color: var(--bg-vanilla-400);
+			color: var(--bg-ink-400);
+		}
+		&__item {
+			color: var(--bg-ink-400);
+		}
+		&__offset {
+			color: var(--bg-ink-100);
+		}
 	}
 	.timezone-name-wrapper {
 		&__selected-icon {
 			.check-icon {
-				stroke: var(--l1-foreground);
+				stroke: var(--bg-ink-100);
 			}
 		}
 	}

frontend/src/components/DetailsDrawer/DetailsDrawer.styles.scss

@@ -1,10 +1,10 @@
 .details-drawer {
 	.ant-drawer-wrapper-body {
-		border-left: 1px solid var(--l1-border);
+		border-left: 1px solid var(--bg-slate-500);
 	}
 	.ant-drawer-header {
-		background: var(--l2-background);
-		border-bottom: 1px solid var(--l1-border);
+		background: var(--bg-ink-400);
+		border-bottom: 1px solid var(--bg-slate-500);
 
 		.ant-drawer-header-title {
 			display: flex;
@@ -14,12 +14,12 @@
 				margin-inline-end: 0px;
 				padding: 0px;
 				padding-right: 16px;
-				border-right: 1px solid var(--l1-border);
+				border-right: 1px solid var(--bg-slate-500);
 			}
 
 			.ant-drawer-title {
 				padding-left: 16px;
-				color: var(--l2-foreground);
+				color: var(--bg-vanilla-400);
 				font-family: Inter;
 				font-size: 14px;
 				font-style: normal;
@@ -31,7 +31,7 @@
 	}
 	.ant-drawer-body {
 		padding: 16px;
-		background: var(--l2-background);
+		background: var(--bg-ink-400);
 
 		&::-webkit-scrollbar {
 			width: 0.1rem;
@@ -50,11 +50,11 @@
 			flex-shrink: 0;
 			padding: 7px 20px;
 			border-radius: 2px 0px 0px 2px;
-			border: 1px solid var(--l1-border);
-			background: var(--l2-background);
+			border: 1px solid var(--bg-slate-400);
+			background: var(--bg-ink-400);
 			box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
 
-			color: var(--l1-foreground);
+			color: #fff;
 			font-family: Inter;
 			font-size: 12px;
 			font-style: normal;
@@ -75,7 +75,7 @@
 		}
 
 		.ant-tabs-tab-active {
-			background: var(--l3-background);
+			background: var(--bg-slate-400);
 		}
 
 		.ant-tabs-tab + .ant-tabs-tab {
@@ -91,3 +91,44 @@
 		}
 	}
 }
+
+.lightMode {
+	.details-drawer {
+		.ant-drawer-wrapper-body {
+			border-left: 1px solid var(--bg-vanilla-300);
+		}
+		.ant-drawer-header {
+			background: var(--bg-vanilla-200);
+			border-bottom: 1px solid var(--bg-vanilla-300);
+
+			.ant-drawer-header-title {
+				.ant-drawer-close {
+					border-right: 1px solid var(--bg-vanilla-300);
+				}
+
+				.ant-drawer-title {
+					color: var(--bg-ink-400);
+				}
+			}
+		}
+		.ant-drawer-body {
+			background: var(--bg-vanilla-200);
+		}
+
+		.details-drawer-tabs {
+			.ant-tabs-tab {
+				border: 1px solid var(--bg-vanilla-300);
+				background: var(--bg-vanilla-300);
+				color: var(--bg-ink-400);
+			}
+
+			.ant-tabs-tab-active {
+				background: var(--bg-vanilla-200);
+			}
+
+			.ant-tabs-tab + .ant-tabs-tab {
+				border-left: none;
+			}
+		}
+	}
+}

frontend/src/components/DownloadOptionsMenu/DownloadOptionsMenu.styles.scss

@@ -1,7 +1,7 @@
 .download-popover {
 	.ant-popover-inner {
 		border-radius: 4px;
-		border: 1px solid var(--l1-border);
+		border: 1px solid var(--l3-border);
 		background: linear-gradient(
 			139deg,
 			var(--l2-background) 0%,
@@ -46,7 +46,7 @@
 
 		.horizontal-line {
 			height: 1px;
-			background: var(--l1-border);
+			background: var(--l3-border);
 		}
 
 		.export-button {
@@ -57,3 +57,30 @@
 		}
 	}
 }
+
+.lightMode {
+	.download-popover {
+		.ant-popover-inner {
+			border: 1px solid var(--l2-border);
+			background: linear-gradient(
+				139deg,
+				var(--background) 0%,
+				var(--l1-background) 98.68%
+			);
+			box-shadow: 4px 10px 16px 2px rgba(255, 255, 255, 0.2);
+		}
+		.export-options-container {
+			.title {
+				color: var(--l2-foreground);
+			}
+
+			:global(.ant-radio-wrapper) {
+				color: var(--foreground);
+			}
+
+			.horizontal-line {
+				background: var(--l2-border);
+			}
+		}
+	}
+}

frontend/src/components/EditMemberDrawer/EditMemberDrawer.styles.scss

@@ -32,7 +32,7 @@
 	&__input {
 		height: 32px;
 		background: var(--l2-background);
-		border-color: var(--l1-border);
+		border-color: var(--border);
 		color: var(--l1-foreground);
 		box-shadow: none;
 
@@ -49,7 +49,7 @@
 		padding: var(--padding-1) var(--padding-2);
 		border-radius: 2px;
 		background: var(--l2-background);
-		border: 1px solid var(--l1-border);
+		border: 1px solid var(--border);
 
 		&--disabled {
 			cursor: not-allowed;
@@ -122,7 +122,7 @@
 		width: 100%;
 		height: 56px;
 		padding: 0 var(--padding-4);
-		border-top: 1px solid var(--l1-border);
+		border-top: 1px solid var(--border);
 		flex-shrink: 0;
 		background: var(--card);
 	}
@@ -142,7 +142,7 @@
 	&__footer-divider {
 		width: 1px;
 		height: 21px;
-		background: var(--l1-border);
+		background: var(--border);
 		flex-shrink: 0;
 	}
 
@@ -175,7 +175,7 @@
 		}
 
 		&--danger {
-			color: var(--accent-cherry);
+			color: var(--destructive);
 		}
 
 		&--warning {
@@ -186,7 +186,7 @@
 
 .delete-dialog {
 	background: var(--l2-background);
-	border: 1px solid var(--l1-border);
+	border: 1px solid var(--l2-border);
 
 	[data-slot='dialog-title'] {
 		color: var(--l1-foreground);
@@ -216,10 +216,10 @@
 
 .reset-link-dialog {
 	background: var(--l2-background);
-	border: 1px solid var(--l1-border);
+	border: 1px solid var(--l2-border);
 
 	[data-slot='dialog-header'] {
-		border-color: var(--l1-border);
+		border-color: var(--l2-border);
 		color: var(--l1-foreground);
 	}
 
@@ -250,7 +250,7 @@
 		height: 32px;
 		overflow: hidden;
 		background: var(--l2-background);
-		border: 1px solid var(--l1-border);
+		border: 1px solid var(--border);
 		border-radius: 2px;
 	}
 
@@ -280,7 +280,7 @@
 		border-top: none;
 		border-right: none;
 		border-bottom: none;
-		border-left: 1px solid var(--l1-border);
+		border-left: 1px solid var(--border);
 		min-width: 64px;
 	}
 }

frontend/src/components/EditMemberDrawer/EditMemberDrawer.tsx

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

frontend/src/components/EditMemberDrawer/ResetLinkDialog.tsx

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

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

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

frontend/src/components/ErrorModal/ErrorModal.styles.scss

@@ -5,7 +5,7 @@
 		align-items: center;
 		gap: 4px;
 		border-radius: 20px;
-		background: color-mix(in srgb, var(--bg-cherry-500) 20%, transparent);
+		background: rgba(229, 72, 77, 0.2);
 		padding-left: 3px;
 		padding-right: 8px;
 		cursor: pointer;
@@ -21,11 +21,11 @@
 	&__wrap {
 		background: linear-gradient(
 			180deg,
-			color-mix(in srgb, var(--background) 12%, transparent) 0.07%,
-			color-mix(in srgb, var(--bg-sakura-950) 24%, transparent) 50.04%,
-			color-mix(in srgb, var(--bg-sakura-800) 36%, transparent) 75.02%,
-			color-mix(in srgb, var(--bg-sakura-600) 48%, transparent) 87.51%,
-			color-mix(in srgb, var(--bg-sakura-500) 60%, transparent) 100%
+			rgba(11, 12, 14, 0.12) 0.07%,
+			rgba(39, 8, 14, 0.24) 50.04%,
+			rgba(106, 29, 44, 0.36) 75.02%,
+			rgba(197, 57, 85, 0.48) 87.51%,
+			rgba(242, 71, 105, 0.6) 100%
 		);
 		-webkit-backdrop-filter: blur(10px);
 		backdrop-filter: blur(10px);
@@ -42,7 +42,7 @@
 	}
 	&__body {
 		padding: 0;
-		background: var(--l2-background);
+		background: var(--bg-ink-400);
 		overflow: hidden;
 		border-top-left-radius: 4px;
 		border-top-right-radius: 4px;
@@ -72,21 +72,21 @@
 				text-transform: uppercase;
 				&,
 				&:hover {
-					color: var(--l1-foreground);
+					color: var(--bg-vanilla-100);
 				}
 			}
 			&__value {
-				color: var(--l2-foreground);
+				color: var(--bg-vanilla-400);
 				pointer-events: none;
 			}
 		}
 		.close-button {
 			padding: 3px 7px;
-			background: var(--l2-background);
+			background: var(--bg-ink-400);
 			display: inline-flex;
 			align-items: center;
 			border-radius: 4px;
-			border: 1px solid var(--l1-border);
+			border: 1px solid var(--bg-slate-500);
 			box-shadow: none;
 		}
 	}
@@ -102,3 +102,17 @@
 		background: none !important;
 	}
 }
+
+.lightMode {
+	.error-modal {
+		&__body,
+		&__header .close-button {
+			background: var(--bg-vanilla-100);
+		}
+		&__header .close-button {
+			svg {
+				fill: var(--bg-vanilla-100);
+			}
+		}
+	}
+}

frontend/src/components/ErrorModal/components/ErrorContent.styles.scss

@@ -5,7 +5,7 @@
 	&__summary-section {
 		display: flex;
 		flex-direction: column;
-		border-bottom: 1px solid var(--l1-border);
+		border-bottom: 1px solid var(--bg-slate-400);
 	}
 
 	&__summary {
@@ -27,7 +27,7 @@
 	}
 
 	&__error-code {
-		color: var(--l1-foreground);
+		color: var(--bg-vanilla-100);
 		margin: 0;
 		font-size: 16px;
 		font-weight: 500;
@@ -37,7 +37,7 @@
 
 	&__error-message {
 		margin: 0;
-		color: var(--l2-foreground);
+		color: var(--bg-vanilla-400);
 		font-size: 14px;
 		font-weight: 400;
 		line-height: 20px; /* 142.857% */
@@ -49,14 +49,14 @@
 		align-items: center;
 		gap: 6px;
 		padding: 9px 12.5px;
-		color: var(--l2-foreground);
+		color: var(--bg-vanilla-400);
 		font-size: 12px;
 		font-weight: 400;
 		line-height: 18px; /* 150% */
 		letter-spacing: 0.12px;
 		border-radius: 2px;
-		border: 1px solid var(--l1-border);
-		background: var(--l3-background);
+		border: 1px solid var(--bg-slate-400);
+		background: var(--bg-ink-300);
 		box-shadow: none;
 	}
 
@@ -68,7 +68,7 @@
 
 		.key-value-label {
 			width: fit-content;
-			border-color: var(--l1-border);
+			border-color: var(--bg-slate-400);
 			border-radius: 20px;
 			overflow: hidden;
 			&__key {
@@ -77,7 +77,7 @@
 			}
 			&__value {
 				padding-right: 10px;
-				color: var(--l2-foreground);
+				color: var(--bg-vanilla-400);
 				font-size: 12px;
 				font-weight: 500;
 				line-height: 18px; /* 150% */
@@ -96,7 +96,7 @@
 				border-radius: 50%;
 			}
 			&-text {
-				color: var(--l1-foreground);
+				color: var(--bg-vanilla-100);
 				font-size: 10px;
 				font-weight: 500;
 				line-height: 18px; /* 180% */
@@ -106,11 +106,7 @@
 		&-line {
 			flex: 1;
 			height: 8px;
-			background-image: radial-gradient(
-				circle,
-				var(--l3-background) 1px,
-				transparent 2px
-			);
+			background-image: radial-gradient(circle, #444c63 1px, transparent 2px);
 			background-size: 8px 11px;
 			background-position: top left;
 			padding: 6px;
@@ -133,11 +129,12 @@
 	&__message-item {
 		position: relative;
 		margin-bottom: 4px;
-		color: var(--l2-foreground);
+		color: var(--bg-vanilla-400);
 		font-family: Geist Mono;
 		font-size: 12px;
 		font-weight: 400;
 		line-height: 18px;
+		color: var(--bg-vanilla-400);
 		padding: 3px 12px;
 		padding-left: 26px;
 	}
@@ -152,7 +149,7 @@
 		width: 2px;
 		height: 4px;
 		border-radius: 50px;
-		background: var(--l1-border);
+		background: var(--bg-slate-400);
 	}
 
 	&__scroll-hint {
@@ -167,7 +164,7 @@
 		justify-content: center;
 		align-items: center;
 		gap: 3px;
-		background: var(--l1-border);
+		background: var(--bg-slate-200);
 		border-radius: 20px;
 		box-shadow: 0px 103px 12px 0px rgba(0, 0, 0, 0.01),
 			0px 66px 18px 0px rgba(0, 0, 0, 0.01), 0px 37px 22px 0px rgba(0, 0, 0, 0.03),
@@ -175,7 +172,7 @@
 	}
 
 	&__scroll-hint-text {
-		color: var(--l1-foreground);
+		color: var(--bg-vanilla-100);
 
 		font-size: 12px;
 		font-weight: 400;
@@ -183,3 +180,29 @@
 		letter-spacing: -0.06px;
 	}
 }
+
+.lightMode {
+	.error-content {
+		&__error-code {
+			color: var(--bg-ink-100);
+		}
+		&__error-message {
+			color: var(--bg-ink-400);
+		}
+		&__message-item {
+			color: var(--bg-ink-400);
+		}
+		&__message-badge {
+			&-label-text {
+				color: var(--bg-ink-400);
+			}
+			.key-value-label__value {
+				color: var(--bg-ink-400);
+			}
+		}
+		&__docs-button {
+			background: var(--bg-vanilla-100);
+			color: var(--bg-ink-100);
+		}
+	}
+}

frontend/src/components/Header/Header.styles.scss

@@ -5,8 +5,9 @@
 	padding: 8px 16px;
 	height: 48px;
 	box-sizing: border-box;
-	background: var(--l1-background);
+	background: rgba(11, 12, 14, 0.9);
 	backdrop-filter: blur(20px);
+	border-bottom: 1px solid var(--Slate-500, #161922);
 }
 
 .header-left {
@@ -18,3 +19,11 @@
 	display: flex;
 	align-items: center;
 }
+
+.lightMode {
+	.header-container {
+		background: var(--bg-vanilla-100);
+		backdrop-filter: blur(20px);
+		border-bottom: 1px solid var(--bg-vanilla-300);
+	}
+}

frontend/src/components/HeaderRightSection/FeedbackModal.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useState } from 'react';
 import { useLocation } from 'react-router-dom';
-import { toast } from '@signozhq/ui';
+import { toast } from '@signozhq/sonner';
 import { Button, Input, Radio, RadioChangeEvent, Typography } from 'antd';
 import logEvent from 'api/common/logEvent';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';

frontend/src/components/HeaderRightSection/HeaderRightSection.styles.scss

@@ -23,7 +23,7 @@
 		justify-content: space-between;
 
 		.absolute-relative-time-toggler-label {
-			color: var(--l1-foreground);
+			color: var(--bg-vanilla-100);
 			font-size: 13px;
 			font-style: normal;
 			font-weight: 500;
@@ -40,7 +40,7 @@
 
 	.absolute-relative-time-error {
 		font-size: 12px;
-		color: var(--accent-amber);
+		color: var(--bg-amber-600);
 	}
 
 	.share-link {
@@ -57,7 +57,7 @@
 
 				.url-share-title,
 				.url-share-sub-title {
-					color: var(--l1-foreground);
+					color: var(--bg-vanilla-100);
 					font-size: 13px;
 					font-style: normal;
 					font-weight: 500;
@@ -67,7 +67,7 @@
 
 				.url-share-sub-title {
 					font-size: 12px;
-					color: var(--l3-foreground);
+					color: var(--bg-vanilla-300);
 					font-weight: 400;
 					line-height: 18px;
 					letter-spacing: -0.06px;
@@ -86,14 +86,14 @@
 			flex: 1;
 			margin: 0px !important;
 
-			border: 1px solid var(--l1-border);
+			border: 1px solid var(--bg-slate-400);
 
 			&:before {
 				display: none;
 			}
 
 			.ant-radio-button-checked {
-				background-color: var(--l3-background);
+				background-color: var(--bg-slate-400);
 			}
 		}
 
@@ -108,15 +108,15 @@
 			}
 
 			.feedback-tab {
-				background-color: var(--danger-background);
+				background-color: var(--bg-sakura-500);
 			}
 
 			.bug-tab {
-				background-color: var(--warning-background);
+				background-color: var(--bg-amber-500);
 			}
 
 			.feature-tab {
-				background-color: var(--primary-background);
+				background-color: var(--bg-robin-500);
 			}
 		}
 
@@ -125,9 +125,9 @@
 				padding: 6px 16px;
 
 				border-radius: 2px;
-				background: var(--l2-background);
+				background: var(--bg-ink-400);
 				box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.1);
-				border: 1px solid var(--l1-border);
+				border: 1px solid var(--bg-slate-400);
 
 				margin: 0 !important;
 
@@ -140,13 +140,13 @@
 				}
 
 				&-active {
-					background: var(--l3-background);
-					color: var(--l1-foreground);
+					background: var(--bg-slate-400);
+					color: var(--bg-vanilla-100);
 
 					border-bottom: none !important;
 
 					.ant-tabs-tab-btn {
-						color: var(--l1-foreground);
+						color: var(--bg-vanilla-100);
 					}
 				}
 			}
@@ -181,7 +181,7 @@
 
 		.feedback-modal-content-footer-info-text {
 			font-size: 12px;
-			color: var(--l2-foreground);
+			color: var(--bg-vanilla-400, #c0c1c3);
 			text-align: center;
 
 			/* button/ small  */
@@ -200,3 +200,54 @@
 		}
 	}
 }
+
+.lightMode {
+	.share-modal-content,
+	.feedback-modal-container {
+		.absolute-relative-time-toggler-container {
+			.absolute-relative-time-toggler-label {
+				color: var(--bg-ink-400);
+			}
+		}
+
+		.share-link {
+			.url-share-container {
+				.url-share-container-header {
+					.url-share-title,
+					.url-share-sub-title {
+						color: var(--bg-ink-400);
+					}
+
+					.url-share-sub-title {
+						color: var(--bg-ink-300);
+					}
+				}
+			}
+		}
+	}
+
+	.feedback-modal-container {
+		.feedback-modal-tabs {
+			.ant-radio-button-wrapper {
+				flex: 1;
+				margin: 0px !important;
+
+				border: 1px solid var(--bg-vanilla-300);
+
+				&:before {
+					display: none;
+				}
+
+				.ant-radio-button-checked {
+					background-color: var(--bg-vanilla-300);
+				}
+			}
+		}
+
+		.feedback-modal-content-footer {
+			.feedback-modal-content-footer-info-text {
+				color: var(--bg-slate-400);
+			}
+		}
+	}
+}

frontend/src/components/HeaderRightSection/__tests__/FeedbackModal.test.tsx

@@ -1,6 +1,6 @@
 // Mock dependencies before imports
 import { useLocation } from 'react-router-dom';
-import { toast } from '@signozhq/ui';
+import { toast } from '@signozhq/sonner';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import logEvent from 'api/common/logEvent';
@@ -19,8 +19,7 @@ jest.mock('react-router-dom', () => ({
 	useLocation: jest.fn(),
 }));
 
-jest.mock('@signozhq/ui', () => ({
-	...jest.requireActual('@signozhq/ui'),
+jest.mock('@signozhq/sonner', () => ({
 	toast: {
 		success: jest.fn(),
 		error: jest.fn(),

frontend/src/components/HostMetricsDetail/Containers/Containers.styles.scss

@@ -28,7 +28,7 @@
 
 	.infra-container-card-text {
 		font-size: var(--font-size-sm);
-		color: var(--l2-foreground);
+		color: var(--text-vanilla-400);
 		line-height: 20px;
 		letter-spacing: -0.07px;
 		width: 400px;
@@ -44,7 +44,7 @@
 		align-items: flex-start;
 		gap: 12px;
 		border-radius: 4px;
-		background: color-mix(in srgb, var(--bg-robin-200) 4%, transparent);
+		background: rgba(171, 189, 255, 0.04);
 
 		.ant-space {
 			align-items: flex-start;
@@ -58,3 +58,9 @@
 		margin: auto;
 	}
 }
+
+.lightMode {
+	.infra-container-card-text {
+		color: var(--text-ink-200);
+	}
+}

frontend/src/components/HostMetricsDetail/Containers/Containers.tsx

@@ -1,15 +1,16 @@
 import { useTranslation } from 'react-i18next';
 import { Space, Typography } from 'antd';
-import WaitlistFragment from 'components/HostMetricsDetail/WaitlistFragment/WaitlistFragment';
 
 import broomUrl from '@/assets/Icons/broom.svg';
 import infraContainersUrl from '@/assets/Icons/infraContainers.svg';
 
-import 'components/HostMetricsDetail/Containers/Containers.styles.scss';
+import WaitlistFragment from '../WaitlistFragment/WaitlistFragment';
+
+import './Containers.styles.scss';
 
 const { Text } = Typography;
 
-function EntityContainers(): JSX.Element {
+function Containers(): JSX.Element {
 	const { t } = useTranslation(['infraMonitoring']);
 
 	return (
@@ -43,4 +44,4 @@ function EntityContainers(): JSX.Element {
 	);
 }
 
-export default EntityContainers;
+export default Containers;

frontend/src/components/HostMetricsDetail/HostMetricDetail.interfaces.ts

@@ -0,0 +1,7 @@
+import { HostData } from 'api/infraMonitoring/getHostLists';
+
+export type HostDetailProps = {
+	host: HostData | null;
+	isModalTimeSelection: boolean;
+	onClose: () => void;
+};

frontend/src/components/HostMetricsDetail/HostMetricTraces/HostMetricTraces.styles.scss

@@ -0,0 +1,193 @@
+.host-metric-traces {
+	margin-top: 1rem;
+
+	.host-metric-traces-header {
+		display: flex;
+		justify-content: space-between;
+		margin-bottom: 1rem;
+
+		gap: 8px;
+		padding: 12px;
+		border-radius: 3px;
+		border: 1px solid var(--bg-slate-500);
+
+		.filter-section {
+			flex: 1;
+
+			.ant-select-selector {
+				border-radius: 2px;
+				border: 1px solid var(--bg-slate-400) !important;
+				background-color: var(--bg-ink-300) !important;
+
+				input {
+					font-size: 12px;
+				}
+
+				.ant-tag .ant-typography {
+					font-size: 12px;
+				}
+			}
+		}
+	}
+
+	.host-metric-traces-table {
+		.ant-table-content {
+			overflow: hidden !important;
+		}
+
+		.ant-table {
+			border-radius: 3px;
+			border: 1px solid var(--bg-slate-500);
+
+			.ant-table-thead > tr > th {
+				padding: 12px;
+				font-weight: 500;
+				font-size: 12px;
+				line-height: 18px;
+
+				background: rgba(171, 189, 255, 0.01);
+				border-bottom: none;
+
+				color: var(--Vanilla-400, #c0c1c3);
+				font-family: Inter;
+				font-size: 11px;
+				font-style: normal;
+				font-weight: 600;
+				line-height: 18px; /* 163.636% */
+				letter-spacing: 0.44px;
+				text-transform: uppercase;
+
+				&::before {
+					background-color: transparent;
+				}
+			}
+
+			.ant-table-thead > tr > th:has(.hostname-column-header) {
+				background: var(--bg-ink-400);
+			}
+
+			.ant-table-cell {
+				padding: 12px;
+				font-size: 13px;
+				line-height: 20px;
+				color: var(--bg-vanilla-100);
+				background: rgba(171, 189, 255, 0.01);
+			}
+
+			.ant-table-cell:has(.hostname-column-value) {
+				background: var(--bg-ink-400);
+			}
+
+			.hostname-column-value {
+				color: var(--bg-vanilla-100);
+				font-family: 'Geist Mono';
+				font-style: normal;
+				font-weight: 600;
+				line-height: 20px; /* 142.857% */
+				letter-spacing: -0.07px;
+			}
+
+			.status-cell {
+				.active-tag {
+					color: var(--bg-forest-500);
+					padding: 4px 8px;
+					border-radius: 4px;
+					font-size: 12px;
+					font-weight: 500;
+				}
+			}
+
+			.progress-container {
+				.ant-progress-bg {
+					height: 8px !important;
+					border-radius: 4px;
+				}
+			}
+
+			.ant-table-tbody > tr:hover > td {
+				background: rgba(255, 255, 255, 0.04);
+			}
+
+			.ant-table-cell:first-child {
+				text-align: justify;
+			}
+
+			.ant-table-cell:nth-child(2) {
+				padding-left: 16px;
+				padding-right: 16px;
+			}
+
+			.ant-table-cell:nth-child(n + 3) {
+				padding-right: 24px;
+			}
+			.column-header-right {
+				text-align: right;
+			}
+			.ant-table-tbody > tr > td {
+				border-bottom: none;
+			}
+
+			.ant-table-thead
+				> tr
+				> th:not(:last-child):not(.ant-table-selection-column):not(.ant-table-row-expand-icon-cell):not([colspan])::before {
+				background-color: transparent;
+			}
+
+			.ant-empty-normal {
+				visibility: hidden;
+			}
+		}
+
+		.ant-table-container::after {
+			content: none;
+		}
+	}
+}
+
+.lightMode {
+	.host-metric-traces-header {
+		.filter-section {
+			border-top: 1px solid var(--bg-vanilla-300);
+			border-bottom: 1px solid var(--bg-vanilla-300);
+
+			.ant-select-selector {
+				border-color: var(--bg-vanilla-300) !important;
+				background-color: var(--bg-vanilla-100) !important;
+				color: var(--bg-ink-200);
+			}
+		}
+	}
+
+	.host-metric-traces-table {
+		.ant-table {
+			border-radius: 3px;
+			border: 1px solid var(--bg-vanilla-300);
+
+			.ant-table-thead > tr > th {
+				background: var(--bg-vanilla-100);
+				color: var(--text-ink-300);
+			}
+
+			.ant-table-thead > tr > th:has(.hostname-column-header) {
+				background: var(--bg-vanilla-100);
+			}
+
+			.ant-table-cell {
+				background: var(--bg-vanilla-100);
+				color: var(--bg-ink-500);
+			}
+
+			.ant-table-cell:has(.hostname-column-value) {
+				background: var(--bg-vanilla-100);
+			}
+
+			.hostname-column-value {
+				color: var(--bg-ink-300);
+			}
+
+			.ant-table-tbody > tr:hover > td {
+				background: rgba(0, 0, 0, 0.04);
+			}
+		}
+	}
+}

frontend/src/components/HostMetricsDetail/HostMetricTraces/HostMetricTraces.tsx

@@ -0,0 +1,222 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useQuery } from 'react-query';
+import logEvent from 'api/common/logEvent';
+import { ResizeTable } from 'components/ResizeTable';
+import { DEFAULT_ENTITY_VERSION } from 'constants/app';
+import { InfraMonitoringEvents } from 'constants/events';
+import { QueryParams } from 'constants/query';
+import EmptyLogsSearch from 'container/EmptyLogsSearch/EmptyLogsSearch';
+import NoLogs from 'container/NoLogs/NoLogs';
+import QueryBuilderSearch from 'container/QueryBuilder/filters/QueryBuilderSearch';
+import { ErrorText } from 'container/TimeSeriesView/styles';
+import DateTimeSelectionV2 from 'container/TopNav/DateTimeSelectionV2';
+import {
+	CustomTimeType,
+	Time,
+} from 'container/TopNav/DateTimeSelectionV2/types';
+import TraceExplorerControls from 'container/TracesExplorer/Controls';
+import { PER_PAGE_OPTIONS } from 'container/TracesExplorer/ListView/configs';
+import { TracesLoading } from 'container/TracesExplorer/TraceLoading/TraceLoading';
+import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+import { Pagination } from 'hooks/queryPagination';
+import useUrlQueryData from 'hooks/useUrlQueryData';
+import { GetMetricQueryRange } from 'lib/dashboard/getQueryResults';
+import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
+import { DataSource } from 'types/common/queryBuilder';
+
+import { VIEWS } from '../constants';
+import { getHostTracesQueryPayload, selectedColumns } from './constants';
+import { getListColumns } from './utils';
+
+import './HostMetricTraces.styles.scss';
+
+interface Props {
+	timeRange: {
+		startTime: number;
+		endTime: number;
+	};
+	isModalTimeSelection: boolean;
+	handleTimeChange: (
+		interval: Time | CustomTimeType,
+		dateTimeRange?: [number, number],
+	) => void;
+	handleChangeTracesFilters: (
+		value: IBuilderQuery['filters'],
+		view: VIEWS,
+	) => void;
+	tracesFilters: IBuilderQuery['filters'];
+	selectedInterval: Time;
+}
+
+function HostMetricTraces({
+	timeRange,
+	isModalTimeSelection,
+	handleTimeChange,
+	handleChangeTracesFilters,
+	tracesFilters,
+	selectedInterval,
+}: Props): JSX.Element {
+	const [traces, setTraces] = useState<any[]>([]);
+	const [offset] = useState<number>(0);
+
+	const { currentQuery } = useQueryBuilder();
+	const updatedCurrentQuery = useMemo(
+		() => ({
+			...currentQuery,
+			builder: {
+				...currentQuery.builder,
+				queryData: [
+					{
+						...currentQuery.builder.queryData[0],
+						dataSource: DataSource.TRACES,
+						aggregateOperator: 'noop',
+						aggregateAttribute: {
+							...currentQuery.builder.queryData[0].aggregateAttribute,
+						},
+						filters: {
+							items:
+								tracesFilters?.items?.filter((item) => item.key?.key !== 'host.name') ||
+								[],
+							op: 'AND',
+						},
+					},
+				],
+			},
+		}),
+		[currentQuery, tracesFilters?.items],
+	);
+
+	const query = updatedCurrentQuery?.builder?.queryData[0] || null;
+
+	const { queryData: paginationQueryData } = useUrlQueryData<Pagination>(
+		QueryParams.pagination,
+	);
+
+	const queryPayload = useMemo(
+		() =>
+			getHostTracesQueryPayload(
+				timeRange.startTime,
+				timeRange.endTime,
+				paginationQueryData?.offset || offset,
+				tracesFilters,
+			),
+		[
+			timeRange.startTime,
+			timeRange.endTime,
+			offset,
+			tracesFilters,
+			paginationQueryData,
+		],
+	);
+
+	const { data, isLoading, isFetching, isError } = useQuery({
+		queryKey: [
+			'hostMetricTraces',
+			timeRange.startTime,
+			timeRange.endTime,
+			offset,
+			tracesFilters,
+			DEFAULT_ENTITY_VERSION,
+			paginationQueryData,
+		],
+		queryFn: () => GetMetricQueryRange(queryPayload, DEFAULT_ENTITY_VERSION),
+		enabled: !!queryPayload,
+	});
+
+	const traceListColumns = getListColumns(selectedColumns);
+
+	useEffect(() => {
+		if (data?.payload?.data?.newResult?.data?.result) {
+			const currentData = data.payload.data.newResult.data.result;
+			if (currentData.length > 0 && currentData[0].list) {
+				if (offset === 0) {
+					setTraces(currentData[0].list ?? []);
+				} else {
+					setTraces((prev) => [...prev, ...(currentData[0].list ?? [])]);
+				}
+			}
+		}
+	}, [data, offset]);
+
+	const isDataEmpty =
+		!isLoading && !isFetching && !isError && traces.length === 0;
+	const hasAdditionalFilters =
+		tracesFilters?.items && tracesFilters?.items?.length > 1;
+
+	const totalCount =
+		data?.payload?.data?.newResult?.data?.result?.[0]?.list?.length || 0;
+
+	const handleRowClick = useCallback(() => {
+		logEvent(InfraMonitoringEvents.ItemClicked, {
+			entity: InfraMonitoringEvents.HostEntity,
+			view: InfraMonitoringEvents.TracesView,
+		});
+	}, []);
+
+	return (
+		<div className="host-metric-traces">
+			<div className="host-metric-traces-header">
+				<div className="filter-section">
+					{query && (
+						<QueryBuilderSearch
+							query={query as IBuilderQuery}
+							onChange={(value): void =>
+								handleChangeTracesFilters(value, VIEWS.TRACES)
+							}
+							disableNavigationShortcuts
+						/>
+					)}
+				</div>
+				<div className="datetime-section">
+					<DateTimeSelectionV2
+						showAutoRefresh
+						showRefreshText={false}
+						hideShareModal
+						isModalTimeSelection={isModalTimeSelection}
+						onTimeChange={handleTimeChange}
+						defaultRelativeTime="5m"
+						modalSelectedInterval={selectedInterval}
+						modalInitialStartTime={timeRange.startTime * 1000}
+						modalInitialEndTime={timeRange.endTime * 1000}
+					/>
+				</div>
+			</div>
+
+			{isError && <ErrorText>{data?.error || 'Something went wrong'}</ErrorText>}
+
+			{isLoading && traces.length === 0 && <TracesLoading />}
+
+			{isDataEmpty && !hasAdditionalFilters && (
+				<NoLogs dataSource={DataSource.TRACES} />
+			)}
+
+			{isDataEmpty && hasAdditionalFilters && (
+				<EmptyLogsSearch dataSource={DataSource.TRACES} panelType="LIST" />
+			)}
+
+			{!isError && traces.length > 0 && (
+				<div className="host-metric-traces-table">
+					<TraceExplorerControls
+						isLoading={isFetching && traces.length === 0}
+						totalCount={totalCount}
+						perPageOptions={PER_PAGE_OPTIONS}
+						showSizeChanger={false}
+					/>
+					<ResizeTable
+						tableLayout="fixed"
+						pagination={false}
+						scroll={{ x: true }}
+						loading={isFetching && traces.length === 0}
+						dataSource={traces}
+						columns={traceListColumns}
+						onRow={(): Record<string, unknown> => ({
+							onClick: (): void => handleRowClick(),
+						})}
+					/>
+				</div>
+			)}
+		</div>
+	);
+}
+
+export default HostMetricTraces;

frontend/src/components/HostMetricsDetail/HostMetricTraces/constants.ts

@@ -0,0 +1,183 @@
+import { PANEL_TYPES } from 'constants/queryBuilder';
+import { GetQueryResultsProps } from 'lib/dashboard/getQueryResults';
+import {
+	BaseAutocompleteData,
+	DataTypes,
+} from 'types/api/queryBuilder/queryAutocompleteResponse';
+import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
+import { EQueryType } from 'types/common/dashboard';
+import { DataSource, ReduceOperators } from 'types/common/queryBuilder';
+import { nanoToMilli } from 'utils/timeUtils';
+
+export const columns = [
+	{
+		dataIndex: 'timestamp',
+		key: 'timestamp',
+		title: 'Timestamp',
+		width: 200,
+		render: (timestamp: string): string => new Date(timestamp).toLocaleString(),
+	},
+	{
+		title: 'Service Name',
+		dataIndex: ['data', 'serviceName'],
+		key: 'serviceName-string-tag',
+		width: 150,
+	},
+	{
+		title: 'Name',
+		dataIndex: ['data', 'name'],
+		key: 'name-string-tag',
+		width: 145,
+	},
+	{
+		title: 'Duration',
+		dataIndex: ['data', 'durationNano'],
+		key: 'durationNano-float64-tag',
+		width: 145,
+		render: (duration: number): string => `${nanoToMilli(duration)}ms`,
+	},
+	{
+		title: 'HTTP Method',
+		dataIndex: ['data', 'httpMethod'],
+		key: 'httpMethod-string-tag',
+		width: 145,
+	},
+	{
+		title: 'Status Code',
+		dataIndex: ['data', 'responseStatusCode'],
+		key: 'responseStatusCode-string-tag',
+		width: 145,
+	},
+];
+
+export const selectedColumns: BaseAutocompleteData[] = [
+	{
+		key: 'timestamp',
+		dataType: DataTypes.String,
+		type: 'tag',
+	},
+	{
+		key: 'serviceName',
+		dataType: DataTypes.String,
+		type: 'tag',
+	},
+	{
+		key: 'name',
+		dataType: DataTypes.String,
+		type: 'tag',
+	},
+	{
+		key: 'durationNano',
+		dataType: DataTypes.Float64,
+		type: 'tag',
+	},
+	{
+		key: 'httpMethod',
+		dataType: DataTypes.String,
+		type: 'tag',
+	},
+	{
+		key: 'responseStatusCode',
+		dataType: DataTypes.String,
+		type: 'tag',
+	},
+];
+
+export const getHostTracesQueryPayload = (
+	start: number,
+	end: number,
+	offset = 0,
+	filters: IBuilderQuery['filters'],
+): GetQueryResultsProps => ({
+	query: {
+		promql: [],
+		clickhouse_sql: [],
+		builder: {
+			queryData: [
+				{
+					dataSource: DataSource.TRACES,
+					queryName: 'A',
+					aggregateOperator: 'noop',
+					aggregateAttribute: {
+						id: '------false',
+						dataType: DataTypes.EMPTY,
+						key: '',
+						type: '',
+					},
+					timeAggregation: 'rate',
+					spaceAggregation: 'sum',
+					functions: [],
+					filters,
+					expression: 'A',
+					disabled: false,
+					stepInterval: 60,
+					having: [],
+					limit: null,
+					orderBy: [
+						{
+							columnName: 'timestamp',
+							order: 'desc',
+						},
+					],
+					groupBy: [],
+					legend: '',
+					reduceTo: ReduceOperators.AVG,
+				},
+			],
+			queryFormulas: [],
+			queryTraceOperator: [],
+		},
+		id: '572f1d91-6ac0-46c0-b726-c21488b34434',
+		queryType: EQueryType.QUERY_BUILDER,
+	},
+	graphType: PANEL_TYPES.LIST,
+	selectedTime: 'GLOBAL_TIME',
+	start,
+	end,
+	params: {
+		dataSource: DataSource.TRACES,
+	},
+	tableParams: {
+		pagination: {
+			limit: 10,
+			offset,
+		},
+		selectColumns: [
+			{
+				key: 'serviceName',
+				dataType: 'string',
+				type: 'tag',
+				id: 'serviceName--string--tag--true',
+				isIndexed: false,
+			},
+			{
+				key: 'name',
+				dataType: 'string',
+				type: 'tag',
+				id: 'name--string--tag--true',
+				isIndexed: false,
+			},
+			{
+				key: 'durationNano',
+				dataType: 'float64',
+				type: 'tag',
+				id: 'durationNano--float64--tag--true',
+				isIndexed: false,
+			},
+			{
+				key: 'httpMethod',
+				dataType: 'string',
+				type: 'tag',
+				id: 'httpMethod--string--tag--true',
+				isIndexed: false,
+			},
+			{
+				key: 'responseStatusCode',
+				dataType: 'string',
+				type: 'tag',
+				id: 'responseStatusCode--string--tag--true',
+				isIndexed: false,
+			},
+		],
+	},
+});

frontend/src/components/HostMetricsDetail/HostMetricTraces/utils.tsx

@@ -18,7 +18,7 @@ const keyToLabelMap: Record<string, string> = {
 	responseStatusCode: 'Status Code',
 };
 
-export const getTraceListColumns = (
+export const getListColumns = (
 	selectedColumns: BaseAutocompleteData[],
 ): ColumnsType<RowData> => {
 	const columns: ColumnsType<RowData> =

frontend/src/components/HostMetricsDetail/HostMetricsDetail.styles.scss

@@ -0,0 +1,233 @@
+.host-detail-drawer {
+	border-left: 1px solid var(--bg-slate-500);
+	background: var(--bg-ink-400);
+	box-shadow: -4px 10px 16px 2px rgba(0, 0, 0, 0.2);
+
+	.ant-drawer-header {
+		padding: 8px 16px;
+		border-bottom: none;
+
+		align-items: stretch;
+
+		border-bottom: 1px solid var(--bg-slate-500);
+		background: var(--bg-ink-400);
+	}
+
+	.ant-drawer-close {
+		margin-inline-end: 0px;
+	}
+
+	.ant-drawer-body {
+		display: flex;
+		flex-direction: column;
+		padding: 16px;
+	}
+
+	.title {
+		color: var(--text-vanilla-400);
+		font-family: 'Geist Mono';
+		font-size: 14px;
+		font-style: normal;
+		font-weight: 500;
+		line-height: 20px; /* 142.857% */
+		letter-spacing: -0.07px;
+	}
+
+	.radio-button {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding-top: var(--padding-1);
+		border: 1px solid var(--bg-slate-400);
+		background: var(--bg-ink-300);
+		box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
+	}
+
+	.host-detail-drawer__host {
+		.host-details-grid {
+			.labels-row,
+			.values-row {
+				display: grid;
+				grid-template-columns: 1fr 1.5fr 1.5fr 1.5fr;
+				gap: 30px;
+				align-items: center;
+			}
+
+			.labels-row {
+				margin-bottom: 8px;
+			}
+
+			.host-details-metadata-label {
+				color: var(--text-vanilla-400);
+				font-family: Inter;
+				font-size: 11px;
+				font-style: normal;
+				font-weight: 500;
+				line-height: 18px; /* 163.636% */
+				letter-spacing: 0.44px;
+				text-transform: uppercase;
+			}
+
+			.status-tag {
+				margin: 0;
+
+				&.active {
+					color: var(--success-500);
+					background: var(--success-100);
+					border-color: var(--success-500);
+				}
+
+				&.inactive {
+					color: var(--error-500);
+					background: var(--error-100);
+					border-color: var(--error-500);
+				}
+			}
+
+			.progress-container {
+				width: 158px;
+				.ant-progress {
+					margin: 0;
+
+					.ant-progress-text {
+						font-weight: 600;
+					}
+				}
+			}
+
+			.ant-card {
+				&.ant-card-bordered {
+					border: 1px solid var(--bg-slate-500) !important;
+				}
+			}
+		}
+	}
+
+	.tabs-and-search {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		margin: 16px 0;
+
+		.action-btn {
+			border-radius: 2px;
+			border: 1px solid var(--bg-slate-400);
+			background: var(--bg-ink-300);
+			box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
+			display: flex;
+			align-items: center;
+			justify-content: center;
+		}
+	}
+
+	.views-tabs-container {
+		margin-top: 1.5rem;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+
+		.views-tabs {
+			color: var(--text-vanilla-400);
+
+			.view-title {
+				display: flex;
+				gap: var(--margin-2);
+				align-items: center;
+				justify-content: center;
+				font-size: var(--font-size-xs);
+				font-style: normal;
+				font-weight: var(--font-weight-normal);
+			}
+
+			.tab {
+				border: 1px solid var(--bg-slate-400);
+				width: 114px;
+			}
+
+			.tab::before {
+				background: var(--bg-slate-400);
+			}
+
+			.selected_view {
+				background: var(--bg-slate-300);
+				color: var(--text-vanilla-100);
+				border: 1px solid var(--bg-slate-400);
+			}
+
+			.selected_view::before {
+				background: var(--bg-slate-400);
+			}
+		}
+
+		.compass-button {
+			width: 30px;
+			height: 30px;
+
+			border-radius: 2px;
+			border: 1px solid var(--bg-slate-400);
+			background: var(--bg-ink-300);
+			box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
+		}
+	}
+
+	.ant-drawer-close {
+		padding: 0px;
+	}
+}
+
+.lightMode {
+	.ant-drawer-header {
+		border-bottom: 1px solid var(--bg-vanilla-400);
+		background: var(--bg-vanilla-100);
+	}
+
+	.host-detail-drawer {
+		.title {
+			color: var(--text-ink-300);
+		}
+
+		.host-detail-drawer__host {
+			.ant-typography {
+				color: var(--text-ink-300);
+				background: transparent;
+			}
+		}
+
+		.radio-button {
+			border: 1px solid var(--bg-vanilla-400);
+			background: var(--bg-vanilla-100);
+			color: var(--text-ink-300);
+		}
+
+		.views-tabs {
+			.tab {
+				background: var(--bg-vanilla-100);
+			}
+
+			.selected_view {
+				background: var(--bg-vanilla-300);
+				border: 1px solid var(--bg-slate-300);
+				color: var(--text-ink-400);
+			}
+
+			.selected_view::before {
+				background: var(--bg-vanilla-300);
+				border-left: 1px solid var(--bg-slate-300);
+			}
+		}
+
+		.compass-button {
+			border: 1px solid var(--bg-vanilla-300);
+			background: var(--bg-vanilla-100);
+			box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
+		}
+
+		.tabs-and-search {
+			.action-btn {
+				border: 1px solid var(--bg-vanilla-400);
+				background: var(--bg-vanilla-100);
+				color: var(--text-ink-300);
+			}
+		}
+	}
+}

frontend/src/components/HostMetricsDetail/HostMetricsDetails.tsx

@@ -0,0 +1,590 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+// eslint-disable-next-line no-restricted-imports
+import { useSelector } from 'react-redux';
+import { useSearchParams } from 'react-router-dom-v5-compat';
+import { Color, Spacing } from '@signozhq/design-tokens';
+import {
+	Button,
+	Divider,
+	Drawer,
+	Progress,
+	Radio,
+	Tag,
+	Typography,
+} from 'antd';
+import type { RadioChangeEvent } from 'antd/lib';
+import logEvent from 'api/common/logEvent';
+import { InfraMonitoringEvents } from 'constants/events';
+import { QueryParams } from 'constants/query';
+import {
+	initialQueryBuilderFormValuesMap,
+	initialQueryState,
+} from 'constants/queryBuilder';
+import ROUTES from 'constants/routes';
+import { getFiltersFromParams } from 'container/InfraMonitoringK8s/commonUtils';
+import { INFRA_MONITORING_K8S_PARAMS_KEYS } from 'container/InfraMonitoringK8s/constants';
+import {
+	CustomTimeType,
+	Time,
+} from 'container/TopNav/DateTimeSelectionV2/types';
+import { useIsDarkMode } from 'hooks/useDarkMode';
+import useUrlQuery from 'hooks/useUrlQuery';
+import GetMinMax from 'lib/getMinMax';
+import {
+	BarChart2,
+	ChevronsLeftRight,
+	Compass,
+	DraftingCompass,
+	Package2,
+	ScrollText,
+	X,
+} from 'lucide-react';
+import { AppState } from 'store/reducers';
+import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
+import {
+	IBuilderQuery,
+	TagFilterItem,
+} from 'types/api/queryBuilder/queryBuilderData';
+import {
+	LogsAggregatorOperator,
+	TracesAggregatorOperator,
+} from 'types/common/queryBuilder';
+import { GlobalReducer } from 'types/reducer/globalTime';
+import { openInNewTab } from 'utils/navigation';
+import { v4 as uuidv4 } from 'uuid';
+
+import { VIEW_TYPES, VIEWS } from './constants';
+import Containers from './Containers/Containers';
+import { HostDetailProps } from './HostMetricDetail.interfaces';
+import HostMetricLogsDetailedView from './HostMetricsLogs/HostMetricLogsDetailedView';
+import HostMetricTraces from './HostMetricTraces/HostMetricTraces';
+import Metrics from './Metrics/Metrics';
+import Processes from './Processes/Processes';
+
+import './HostMetricsDetail.styles.scss';
+// eslint-disable-next-line sonarjs/cognitive-complexity
+function HostMetricsDetails({
+	host,
+	onClose,
+	isModalTimeSelection,
+}: HostDetailProps): JSX.Element {
+	const { maxTime, minTime, selectedTime } = useSelector<
+		AppState,
+		GlobalReducer
+	>((state) => state.globalTime);
+	const [searchParams, setSearchParams] = useSearchParams();
+
+	const startMs = useMemo(() => Math.floor(Number(minTime) / 1000000000), [
+		minTime,
+	]);
+	const endMs = useMemo(() => Math.floor(Number(maxTime) / 1000000000), [
+		maxTime,
+	]);
+
+	const urlQuery = useUrlQuery();
+
+	const [modalTimeRange, setModalTimeRange] = useState(() => ({
+		startTime: startMs,
+		endTime: endMs,
+	}));
+
+	const lastSelectedInterval = useRef<Time | null>(null);
+
+	const [selectedInterval, setSelectedInterval] = useState<Time>(
+		lastSelectedInterval.current
+			? lastSelectedInterval.current
+			: (selectedTime as Time),
+	);
+
+	const [selectedView, setSelectedView] = useState<VIEWS>(
+		(searchParams.get('view') as VIEWS) || VIEWS.METRICS,
+	);
+	const isDarkMode = useIsDarkMode();
+
+	const initialFilters = useMemo(() => {
+		const urlView = searchParams.get(INFRA_MONITORING_K8S_PARAMS_KEYS.VIEW);
+		const queryKey =
+			urlView === VIEW_TYPES.LOGS
+				? INFRA_MONITORING_K8S_PARAMS_KEYS.LOG_FILTERS
+				: INFRA_MONITORING_K8S_PARAMS_KEYS.TRACES_FILTERS;
+		const filters = getFiltersFromParams(searchParams, queryKey);
+		if (filters) {
+			return filters;
+		}
+
+		return {
+			op: 'AND',
+			items: [
+				{
+					id: uuidv4(),
+					key: {
+						key: 'host.name',
+						dataType: DataTypes.String,
+						type: 'resource',
+						id: 'host.name--string--resource--false',
+					},
+					op: '=',
+					value: host?.hostName || '',
+				},
+			],
+		};
+	}, [host?.hostName, searchParams]);
+
+	const [logFilters, setLogFilters] = useState<IBuilderQuery['filters']>(
+		initialFilters,
+	);
+
+	const [tracesFilters, setTracesFilters] = useState<IBuilderQuery['filters']>(
+		initialFilters,
+	);
+
+	useEffect(() => {
+		if (host) {
+			logEvent(InfraMonitoringEvents.PageVisited, {
+				entity: InfraMonitoringEvents.HostEntity,
+				page: InfraMonitoringEvents.DetailedPage,
+			});
+		}
+	}, [host]);
+
+	useEffect(() => {
+		setLogFilters(initialFilters);
+		setTracesFilters(initialFilters);
+	}, [initialFilters]);
+
+	useEffect(() => {
+		const currentSelectedInterval = lastSelectedInterval.current || selectedTime;
+		setSelectedInterval(currentSelectedInterval as Time);
+
+		if (currentSelectedInterval !== 'custom') {
+			const { maxTime, minTime } = GetMinMax(currentSelectedInterval);
+
+			setModalTimeRange({
+				startTime: Math.floor(minTime / 1000000000),
+				endTime: Math.floor(maxTime / 1000000000),
+			});
+		}
+	}, [selectedTime, minTime, maxTime]);
+
+	const handleTabChange = (e: RadioChangeEvent): void => {
+		setSelectedView(e.target.value);
+		if (host?.hostName) {
+			setSelectedView(e.target.value);
+			setSearchParams({
+				...Object.fromEntries(searchParams.entries()),
+				[INFRA_MONITORING_K8S_PARAMS_KEYS.VIEW]: e.target.value,
+				[INFRA_MONITORING_K8S_PARAMS_KEYS.LOG_FILTERS]: JSON.stringify(null),
+				[INFRA_MONITORING_K8S_PARAMS_KEYS.TRACES_FILTERS]: JSON.stringify(null),
+			});
+		}
+		logEvent(InfraMonitoringEvents.TabChanged, {
+			entity: InfraMonitoringEvents.HostEntity,
+			view: e.target.value,
+		});
+	};
+
+	const handleTimeChange = useCallback(
+		(interval: Time | CustomTimeType, dateTimeRange?: [number, number]): void => {
+			lastSelectedInterval.current = interval as Time;
+			setSelectedInterval(interval as Time);
+
+			if (interval === 'custom' && dateTimeRange) {
+				setModalTimeRange({
+					startTime: Math.floor(dateTimeRange[0] / 1000),
+					endTime: Math.floor(dateTimeRange[1] / 1000),
+				});
+			} else {
+				const { maxTime, minTime } = GetMinMax(interval);
+
+				setModalTimeRange({
+					startTime: Math.floor(minTime / 1000000000),
+					endTime: Math.floor(maxTime / 1000000000),
+				});
+			}
+
+			logEvent(InfraMonitoringEvents.TimeUpdated, {
+				entity: InfraMonitoringEvents.HostEntity,
+				interval,
+				page: InfraMonitoringEvents.DetailedPage,
+			});
+		},
+		[],
+	);
+
+	const handleChangeLogFilters = useCallback(
+		(value: IBuilderQuery['filters'], view: VIEWS) => {
+			setLogFilters((prevFilters) => {
+				const hostNameFilter = prevFilters?.items?.find(
+					(item) => item.key?.key === 'host.name',
+				);
+				const paginationFilter = value?.items?.find(
+					(item) => item.key?.key === 'id',
+				);
+				const newFilters = value?.items?.filter(
+					(item) => item.key?.key !== 'id' && item.key?.key !== 'host.name',
+				);
+
+				if (newFilters && newFilters?.length > 0) {
+					logEvent(InfraMonitoringEvents.FilterApplied, {
+						entity: InfraMonitoringEvents.HostEntity,
+						view: InfraMonitoringEvents.LogsView,
+						page: InfraMonitoringEvents.DetailedPage,
+					});
+				}
+
+				const updatedFilters = {
+					op: 'AND',
+					items: [
+						hostNameFilter,
+						...(newFilters || []),
+						...(paginationFilter ? [paginationFilter] : []),
+					].filter((item): item is TagFilterItem => item !== undefined),
+				};
+
+				setSearchParams({
+					...Object.fromEntries(searchParams.entries()),
+					[INFRA_MONITORING_K8S_PARAMS_KEYS.LOG_FILTERS]: JSON.stringify(
+						updatedFilters,
+					),
+					[INFRA_MONITORING_K8S_PARAMS_KEYS.VIEW]: view,
+				});
+				return updatedFilters;
+			});
+		},
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+		[],
+	);
+
+	const handleChangeTracesFilters = useCallback(
+		(value: IBuilderQuery['filters'], view: VIEWS) => {
+			setTracesFilters((prevFilters) => {
+				const hostNameFilter = prevFilters?.items?.find(
+					(item) => item.key?.key === 'host.name',
+				);
+
+				if (value?.items && value?.items?.length > 0) {
+					logEvent(InfraMonitoringEvents.FilterApplied, {
+						entity: InfraMonitoringEvents.HostEntity,
+						view: InfraMonitoringEvents.TracesView,
+						page: InfraMonitoringEvents.DetailedPage,
+					});
+				}
+
+				const updatedFilters = {
+					op: 'AND',
+					items: [
+						hostNameFilter,
+						...(value?.items?.filter((item) => item.key?.key !== 'host.name') || []),
+					].filter((item): item is TagFilterItem => item !== undefined),
+				};
+
+				setSearchParams({
+					...Object.fromEntries(searchParams.entries()),
+					[INFRA_MONITORING_K8S_PARAMS_KEYS.TRACES_FILTERS]: JSON.stringify(
+						updatedFilters,
+					),
+					[INFRA_MONITORING_K8S_PARAMS_KEYS.VIEW]: view,
+				});
+
+				return updatedFilters;
+			});
+		},
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+		[],
+	);
+
+	const handleExplorePagesRedirect = (): void => {
+		if (selectedInterval !== 'custom') {
+			urlQuery.set(QueryParams.relativeTime, selectedInterval);
+		} else {
+			urlQuery.delete(QueryParams.relativeTime);
+			urlQuery.set(QueryParams.startTime, modalTimeRange.startTime.toString());
+			urlQuery.set(QueryParams.endTime, modalTimeRange.endTime.toString());
+		}
+
+		logEvent(InfraMonitoringEvents.ExploreClicked, {
+			view: selectedView,
+			entity: InfraMonitoringEvents.HostEntity,
+			page: InfraMonitoringEvents.DetailedPage,
+		});
+
+		if (selectedView === VIEW_TYPES.LOGS) {
+			const filtersWithoutPagination = {
+				...logFilters,
+				items: logFilters?.items?.filter((item) => item.key?.key !== 'id') || [],
+			};
+
+			const compositeQuery = {
+				...initialQueryState,
+				queryType: 'builder',
+				builder: {
+					...initialQueryState.builder,
+					queryData: [
+						{
+							...initialQueryBuilderFormValuesMap.logs,
+							aggregateOperator: LogsAggregatorOperator.NOOP,
+							filters: filtersWithoutPagination,
+						},
+					],
+				},
+			};
+
+			urlQuery.set('compositeQuery', JSON.stringify(compositeQuery));
+
+			openInNewTab(`${ROUTES.LOGS_EXPLORER}?${urlQuery.toString()}`);
+		} else if (selectedView === VIEW_TYPES.TRACES) {
+			const compositeQuery = {
+				...initialQueryState,
+				queryType: 'builder',
+				builder: {
+					...initialQueryState.builder,
+					queryData: [
+						{
+							...initialQueryBuilderFormValuesMap.traces,
+							aggregateOperator: TracesAggregatorOperator.NOOP,
+							filters: tracesFilters,
+						},
+					],
+				},
+			};
+
+			urlQuery.set('compositeQuery', JSON.stringify(compositeQuery));
+
+			openInNewTab(`${ROUTES.TRACES_EXPLORER}?${urlQuery.toString()}`);
+		}
+	};
+
+	const handleClose = (): void => {
+		setSelectedInterval(selectedTime as Time);
+		lastSelectedInterval.current = null;
+		setSearchParams({});
+
+		if (selectedTime !== 'custom') {
+			const { maxTime, minTime } = GetMinMax(selectedTime);
+
+			setModalTimeRange({
+				startTime: Math.floor(minTime / 1000000000),
+				endTime: Math.floor(maxTime / 1000000000),
+			});
+		}
+		setSelectedView(VIEW_TYPES.METRICS);
+		onClose();
+	};
+
+	return (
+		<Drawer
+			width="70%"
+			title={
+				<>
+					<Divider type="vertical" />
+					<Typography.Text className="title">{host?.hostName}</Typography.Text>
+				</>
+			}
+			placement="right"
+			onClose={handleClose}
+			open={!!host}
+			style={{
+				overscrollBehavior: 'contain',
+				background: isDarkMode ? Color.BG_INK_400 : Color.BG_VANILLA_100,
+			}}
+			className="host-detail-drawer"
+			destroyOnClose
+			closeIcon={<X size={16} style={{ marginTop: Spacing.MARGIN_1 }} />}
+		>
+			{host && (
+				<>
+					<div className="host-detail-drawer__host">
+						<div className="host-details-grid">
+							<div className="labels-row">
+								<Typography.Text
+									type="secondary"
+									className="host-details-metadata-label"
+								>
+									STATUS
+								</Typography.Text>
+								<Typography.Text
+									type="secondary"
+									className="host-details-metadata-label"
+								>
+									OPERATING SYSTEM
+								</Typography.Text>
+								<Typography.Text
+									type="secondary"
+									className="host-details-metadata-label"
+								>
+									CPU USAGE
+								</Typography.Text>
+								<Typography.Text
+									type="secondary"
+									className="host-details-metadata-label"
+								>
+									MEMORY USAGE
+								</Typography.Text>
+							</div>
+
+							<div className="values-row">
+								<Tag
+									bordered
+									className={`infra-monitoring-tags ${
+										host.active ? 'active' : 'inactive'
+									}`}
+								>
+									{host.active ? 'ACTIVE' : 'INACTIVE'}
+								</Tag>
+								{host.os ? (
+									<Tag className="infra-monitoring-tags" bordered>
+										{host.os}
+									</Tag>
+								) : (
+									<Typography.Text>-</Typography.Text>
+								)}
+								<div className="progress-container">
+									<Progress
+										percent={Number((host.cpu * 100).toFixed(1))}
+										size="small"
+										strokeColor={((): string => {
+											const cpuPercent = Number((host.cpu * 100).toFixed(1));
+											if (cpuPercent >= 90) {
+												return Color.BG_SAKURA_500;
+											}
+											if (cpuPercent >= 60) {
+												return Color.BG_AMBER_500;
+											}
+											return Color.BG_FOREST_500;
+										})()}
+										className="progress-bar"
+									/>
+								</div>
+								<div className="progress-container">
+									<Progress
+										percent={Number((host.memory * 100).toFixed(1))}
+										size="small"
+										strokeColor={((): string => {
+											const memoryPercent = Number((host.memory * 100).toFixed(1));
+											if (memoryPercent >= 90) {
+												return Color.BG_CHERRY_500;
+											}
+											if (memoryPercent >= 60) {
+												return Color.BG_AMBER_500;
+											}
+											return Color.BG_FOREST_500;
+										})()}
+										className="progress-bar"
+									/>
+								</div>
+							</div>
+						</div>
+					</div>
+
+					<div className="views-tabs-container">
+						<Radio.Group
+							className="views-tabs"
+							onChange={handleTabChange}
+							value={selectedView}
+						>
+							<Radio.Button
+								className={
+									selectedView === VIEW_TYPES.METRICS ? 'selected_view tab' : 'tab'
+								}
+								value={VIEW_TYPES.METRICS}
+							>
+								<div className="view-title">
+									<BarChart2 size={14} />
+									Metrics
+								</div>
+							</Radio.Button>
+							<Radio.Button
+								className={
+									selectedView === VIEW_TYPES.LOGS ? 'selected_view tab' : 'tab'
+								}
+								value={VIEW_TYPES.LOGS}
+							>
+								<div className="view-title">
+									<ScrollText size={14} />
+									Logs
+								</div>
+							</Radio.Button>
+							<Radio.Button
+								className={
+									selectedView === VIEW_TYPES.TRACES ? 'selected_view tab' : 'tab'
+								}
+								value={VIEW_TYPES.TRACES}
+							>
+								<div className="view-title">
+									<DraftingCompass size={14} />
+									Traces
+								</div>
+							</Radio.Button>
+							<Radio.Button
+								className={
+									selectedView === VIEW_TYPES.CONTAINERS ? 'selected_view tab' : 'tab'
+								}
+								value={VIEW_TYPES.CONTAINERS}
+							>
+								<div className="view-title">
+									<Package2 size={14} />
+									Containers
+								</div>
+							</Radio.Button>
+							<Radio.Button
+								className={
+									selectedView === VIEW_TYPES.PROCESSES ? 'selected_view tab' : 'tab'
+								}
+								value={VIEW_TYPES.PROCESSES}
+							>
+								<div className="view-title">
+									<ChevronsLeftRight size={14} />
+									Processes
+								</div>
+							</Radio.Button>
+						</Radio.Group>
+
+						{(selectedView === VIEW_TYPES.LOGS ||
+							selectedView === VIEW_TYPES.TRACES) && (
+							<Button
+								icon={<Compass size={18} />}
+								className="compass-button"
+								onClick={handleExplorePagesRedirect}
+							/>
+						)}
+					</div>
+
+					{selectedView === VIEW_TYPES.METRICS && (
+						<Metrics
+							selectedInterval={selectedInterval}
+							hostName={host.hostName}
+							timeRange={modalTimeRange}
+							handleTimeChange={handleTimeChange}
+							isModalTimeSelection={isModalTimeSelection}
+						/>
+					)}
+					{selectedView === VIEW_TYPES.LOGS && (
+						<HostMetricLogsDetailedView
+							timeRange={modalTimeRange}
+							isModalTimeSelection={isModalTimeSelection}
+							handleTimeChange={handleTimeChange}
+							handleChangeLogFilters={handleChangeLogFilters}
+							logFilters={logFilters}
+							selectedInterval={selectedInterval}
+						/>
+					)}
+					{selectedView === VIEW_TYPES.TRACES && (
+						<HostMetricTraces
+							timeRange={modalTimeRange}
+							isModalTimeSelection={isModalTimeSelection}
+							handleTimeChange={handleTimeChange}
+							handleChangeTracesFilters={handleChangeTracesFilters}
+							tracesFilters={tracesFilters}
+							selectedInterval={selectedInterval}
+						/>
+					)}
+
+					{selectedView === VIEW_TYPES.CONTAINERS && <Containers />}
+					{selectedView === VIEW_TYPES.PROCESSES && <Processes />}
+				</>
+			)}
+		</Drawer>
+	);
+}
+
+export default HostMetricsDetails;

frontend/src/components/HostMetricsDetail/HostMetricsLogs/HostMetricLogs.styles.scss

@@ -0,0 +1,133 @@
+.host-metrics-logs-container {
+	margin-top: 1rem;
+
+	.filter-section {
+		flex: 1;
+
+		.ant-select-selector {
+			border-radius: 2px;
+			border: 1px solid var(--bg-slate-400) !important;
+			background-color: var(--bg-ink-300) !important;
+
+			input {
+				font-size: 12px;
+			}
+
+			.ant-tag .ant-typography {
+				font-size: 12px;
+			}
+		}
+	}
+
+	.host-metrics-logs-header {
+		display: flex;
+		justify-content: space-between;
+		gap: 8px;
+
+		padding: 12px;
+		border-radius: 3px;
+		border: 1px solid var(--bg-slate-500);
+	}
+
+	.host-metrics-logs {
+		margin-top: 1rem;
+
+		.virtuoso-list {
+			overflow-y: hidden !important;
+
+			&::-webkit-scrollbar {
+				width: 0.3rem;
+				height: 0.3rem;
+			}
+
+			&::-webkit-scrollbar-track {
+				background: transparent;
+			}
+
+			&::-webkit-scrollbar-thumb {
+				background: var(--bg-slate-300);
+			}
+
+			&::-webkit-scrollbar-thumb:hover {
+				background: var(--bg-slate-200);
+			}
+
+			.ant-row {
+				width: fit-content;
+			}
+		}
+
+		.skeleton-container {
+			height: 100%;
+			padding: 16px;
+		}
+	}
+}
+
+.host-metrics-logs-list-container {
+	flex: 1;
+	height: calc(100vh - 272px) !important;
+	display: flex;
+	height: 100%;
+
+	.raw-log-content {
+		width: 100%;
+		text-wrap: inherit;
+		word-wrap: break-word;
+	}
+}
+
+.host-metrics-logs-list-card {
+	width: 100%;
+	margin-top: 12px;
+
+	.ant-card-body {
+		padding: 0;
+
+		height: 100%;
+		width: 100%;
+	}
+}
+
+.logs-loading-skeleton {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	gap: 8px;
+	padding: 8px 0;
+
+	.ant-skeleton-input-sm {
+		height: 18px;
+	}
+}
+
+.no-logs-found {
+	height: 50vh;
+	width: 100%;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+
+	padding: 24px;
+	box-sizing: border-box;
+
+	.ant-typography {
+		display: flex;
+		align-items: center;
+		gap: 16px;
+	}
+}
+
+.lightMode {
+	.filter-section {
+		border-top: 1px solid var(--bg-vanilla-300);
+		border-bottom: 1px solid var(--bg-vanilla-300);
+
+		.ant-select-selector {
+			border-color: var(--bg-vanilla-300) !important;
+			background-color: var(--bg-vanilla-100) !important;
+			color: var(--bg-ink-200);
+		}
+	}
+}

frontend/src/components/HostMetricsDetail/HostMetricsLogs/HostMetricLogsDetailedView.tsx

@@ -0,0 +1,100 @@
+import { useMemo } from 'react';
+import QueryBuilderSearch from 'container/QueryBuilder/filters/QueryBuilderSearch';
+import DateTimeSelectionV2 from 'container/TopNav/DateTimeSelectionV2';
+import {
+	CustomTimeType,
+	Time,
+} from 'container/TopNav/DateTimeSelectionV2/types';
+import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
+import { DataSource } from 'types/common/queryBuilder';
+
+import { VIEWS } from '../constants';
+import HostMetricsLogs from './HostMetricsLogs';
+
+import './HostMetricLogs.styles.scss';
+
+interface Props {
+	timeRange: {
+		startTime: number;
+		endTime: number;
+	};
+	isModalTimeSelection: boolean;
+	handleTimeChange: (
+		interval: Time | CustomTimeType,
+		dateTimeRange?: [number, number],
+	) => void;
+	handleChangeLogFilters: (value: IBuilderQuery['filters'], view: VIEWS) => void;
+	logFilters: IBuilderQuery['filters'];
+	selectedInterval: Time;
+}
+
+function HostMetricLogsDetailedView({
+	timeRange,
+	isModalTimeSelection,
+	handleTimeChange,
+	handleChangeLogFilters,
+	logFilters,
+	selectedInterval,
+}: Props): JSX.Element {
+	const { currentQuery } = useQueryBuilder();
+	const updatedCurrentQuery = useMemo(
+		() => ({
+			...currentQuery,
+			builder: {
+				...currentQuery.builder,
+				queryData: [
+					{
+						...currentQuery.builder.queryData[0],
+						dataSource: DataSource.LOGS,
+						aggregateOperator: 'noop',
+						aggregateAttribute: {
+							...currentQuery.builder.queryData[0].aggregateAttribute,
+						},
+						filters: {
+							items:
+								logFilters?.items?.filter((item) => item.key?.key !== 'host.name') ||
+								[],
+							op: 'AND',
+						},
+					},
+				],
+			},
+		}),
+		[currentQuery, logFilters?.items],
+	);
+
+	const query = updatedCurrentQuery?.builder?.queryData[0] || null;
+
+	return (
+		<div className="host-metrics-logs-container">
+			<div className="host-metrics-logs-header">
+				<div className="filter-section">
+					{query && (
+						<QueryBuilderSearch
+							query={query as IBuilderQuery}
+							onChange={(value): void => handleChangeLogFilters(value, VIEWS.LOGS)}
+							disableNavigationShortcuts
+						/>
+					)}
+				</div>
+				<div className="datetime-section">
+					<DateTimeSelectionV2
+						showAutoRefresh
+						showRefreshText={false}
+						hideShareModal
+						isModalTimeSelection={isModalTimeSelection}
+						onTimeChange={handleTimeChange}
+						defaultRelativeTime="5m"
+						modalSelectedInterval={selectedInterval}
+						modalInitialStartTime={timeRange.startTime * 1000}
+						modalInitialEndTime={timeRange.endTime * 1000}
+					/>
+				</div>
+			</div>
+			<HostMetricsLogs timeRange={timeRange} filters={logFilters} />
+		</div>
+	);
+}
+
+export default HostMetricLogsDetailedView;

frontend/src/components/HostMetricsDetail/HostMetricsLogs/HostMetricsLogs.tsx

@@ -0,0 +1,187 @@
+import { useCallback, useEffect, useMemo, useRef } from 'react';
+import { useQuery } from 'react-query';
+import { Virtuoso, VirtuosoHandle } from 'react-virtuoso';
+import { Card } from 'antd';
+import LogDetail from 'components/LogDetail';
+import RawLogView from 'components/Logs/RawLogView';
+import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
+import { DEFAULT_ENTITY_VERSION } from 'constants/app';
+import LogsError from 'container/LogsError/LogsError';
+import { LogsLoading } from 'container/LogsLoading/LogsLoading';
+import { FontSize } from 'container/OptionsMenu/types';
+import { useHandleLogsPagination } from 'hooks/infraMonitoring/useHandleLogsPagination';
+import useLogDetailHandlers from 'hooks/logs/useLogDetailHandlers';
+import useScrollToLog from 'hooks/logs/useScrollToLog';
+import { GetMetricQueryRange } from 'lib/dashboard/getQueryResults';
+import { ILog } from 'types/api/logs/log';
+import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
+
+import { getHostLogsQueryPayload } from './constants';
+import NoLogsContainer from './NoLogsContainer';
+
+import './HostMetricLogs.styles.scss';
+
+interface Props {
+	timeRange: {
+		startTime: number;
+		endTime: number;
+	};
+	filters: IBuilderQuery['filters'];
+}
+
+function HostMetricsLogs({ timeRange, filters }: Props): JSX.Element {
+	const virtuosoRef = useRef<VirtuosoHandle>(null);
+	const {
+		activeLog,
+		onAddToQuery,
+		selectedTab,
+		handleSetActiveLog,
+		handleCloseLogDetail,
+	} = useLogDetailHandlers();
+
+	const basePayload = getHostLogsQueryPayload(
+		timeRange.startTime,
+		timeRange.endTime,
+		filters,
+	);
+	const {
+		logs,
+		hasReachedEndOfLogs,
+		isPaginating,
+		currentPage,
+		setIsPaginating,
+		handleNewData,
+		loadMoreLogs,
+		queryPayload,
+	} = useHandleLogsPagination({
+		timeRange,
+		filters,
+		excludeFilterKeys: ['host.name'],
+		basePayload,
+	});
+
+	const { data, isLoading, isFetching, isError } = useQuery({
+		queryKey: [
+			'hostMetricsLogs',
+			timeRange.startTime,
+			timeRange.endTime,
+			filters,
+			currentPage,
+		],
+		queryFn: () => GetMetricQueryRange(queryPayload, DEFAULT_ENTITY_VERSION),
+		enabled: !!queryPayload,
+		keepPreviousData: isPaginating,
+	});
+
+	useEffect(() => {
+		if (data?.payload?.data?.newResult?.data?.result) {
+			handleNewData(data.payload.data.newResult.data.result);
+		}
+	}, [data, handleNewData]);
+
+	useEffect(() => {
+		setIsPaginating(false);
+	}, [data, setIsPaginating]);
+
+	const handleScrollToLog = useScrollToLog({
+		logs,
+		virtuosoRef,
+	});
+
+	const getItemContent = useCallback(
+		(_: number, logToRender: ILog): JSX.Element => {
+			return (
+				<div key={logToRender.id}>
+					<RawLogView
+						isTextOverflowEllipsisDisabled
+						data={logToRender}
+						linesPerRow={5}
+						fontSize={FontSize.MEDIUM}
+						selectedFields={[
+							{
+								dataType: 'string',
+								type: '',
+								name: 'body',
+							},
+							{
+								dataType: 'string',
+								type: '',
+								name: 'timestamp',
+							},
+						]}
+						onSetActiveLog={handleSetActiveLog}
+						onClearActiveLog={handleCloseLogDetail}
+						isActiveLog={activeLog?.id === logToRender.id}
+					/>
+				</div>
+			);
+		},
+		[activeLog, handleSetActiveLog, handleCloseLogDetail],
+	);
+
+	const renderFooter = useCallback(
+		(): JSX.Element | null => (
+			<>
+				{isFetching ? (
+					<div className="logs-loading-skeleton"> Loading more logs ... </div>
+				) : hasReachedEndOfLogs ? (
+					<div className="logs-loading-skeleton"> *** End *** </div>
+				) : null}
+			</>
+		),
+		[isFetching, hasReachedEndOfLogs],
+	);
+
+	const renderContent = useMemo(
+		() => (
+			<Card bordered={false} className="host-metrics-logs-list-card">
+				<OverlayScrollbar isVirtuoso>
+					<Virtuoso
+						className="host-metrics-logs-virtuoso"
+						key="host-metrics-logs-virtuoso"
+						ref={virtuosoRef}
+						data={logs}
+						endReached={loadMoreLogs}
+						totalCount={logs.length}
+						itemContent={getItemContent}
+						overscan={200}
+						components={{
+							Footer: renderFooter,
+						}}
+					/>
+				</OverlayScrollbar>
+			</Card>
+		),
+		[logs, loadMoreLogs, getItemContent, renderFooter],
+	);
+
+	return (
+		<div className="host-metrics-logs">
+			{isLoading && <LogsLoading />}
+			{!isLoading && !isError && logs.length === 0 && <NoLogsContainer />}
+			{isError && !isLoading && <LogsError />}
+			{!isLoading && !isError && logs.length > 0 && (
+				<div
+					className="host-metrics-logs-list-container"
+					data-log-detail-ignore="true"
+				>
+					{renderContent}
+				</div>
+			)}
+			{selectedTab && activeLog && (
+				<LogDetail
+					log={activeLog}
+					onClose={handleCloseLogDetail}
+					logs={logs}
+					onNavigateLog={handleSetActiveLog}
+					selectedTab={selectedTab}
+					onAddToQuery={onAddToQuery}
+					onClickActionItem={onAddToQuery}
+					onScrollToLog={handleScrollToLog}
+				/>
+			)}
+		</div>
+	);
+}
+
+export default HostMetricsLogs;

frontend/src/components/HostMetricsDetail/HostMetricsLogs/NoLogsContainer.tsx

@@ -0,0 +1,16 @@
+import { Color } from '@signozhq/design-tokens';
+import { Typography } from 'antd';
+import { Ghost } from 'lucide-react';
+
+const { Text } = Typography;
+
+export default function NoLogsContainer(): React.ReactElement {
+	return (
+		<div className="no-logs-found">
+			<Text type="secondary">
+				<Ghost size={24} color={Color.BG_AMBER_500} /> No logs found for this host
+				in the selected time range.
+			</Text>
+		</div>
+	);
+}

frontend/src/components/HostMetricsDetail/HostMetricsLogs/constants.ts

@@ -0,0 +1,61 @@
+import { PANEL_TYPES } from 'constants/queryBuilder';
+import { GetQueryResultsProps } from 'lib/dashboard/getQueryResults';
+import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
+import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
+import { EQueryType } from 'types/common/dashboard';
+import { DataSource, ReduceOperators } from 'types/common/queryBuilder';
+import { v4 as uuidv4 } from 'uuid';
+
+export const getHostLogsQueryPayload = (
+	start: number,
+	end: number,
+	filters: IBuilderQuery['filters'],
+): GetQueryResultsProps => ({
+	graphType: PANEL_TYPES.LIST,
+	selectedTime: 'GLOBAL_TIME',
+	query: {
+		clickhouse_sql: [],
+		promql: [],
+		builder: {
+			queryData: [
+				{
+					dataSource: DataSource.LOGS,
+					queryName: 'A',
+					aggregateOperator: 'noop',
+					aggregateAttribute: {
+						id: '------false',
+						dataType: DataTypes.String,
+						key: '',
+						type: '',
+					},
+					timeAggregation: 'rate',
+					spaceAggregation: 'sum',
+					functions: [],
+					filters,
+					expression: 'A',
+					disabled: false,
+					stepInterval: 60,
+					having: [],
+					limit: null,
+					orderBy: [
+						{
+							columnName: 'timestamp',
+							order: 'desc',
+						},
+					],
+					groupBy: [],
+					legend: '',
+					reduceTo: ReduceOperators.AVG,
+					offset: 0,
+					pageSize: 100,
+				},
+			],
+			queryFormulas: [],
+			queryTraceOperator: [],
+		},
+		id: uuidv4(),
+		queryType: EQueryType.QUERY_BUILDER,
+	},
+	start,
+	end,
+});

frontend/src/components/HostMetricsDetail/Metrics/Metrics.styles.scss

@@ -0,0 +1,45 @@
+.empty-container {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	height: 100%;
+}
+
+.host-metrics-container {
+	margin-top: 1rem;
+}
+
+.metrics-header {
+	display: flex;
+	justify-content: flex-end;
+	margin-top: 1rem;
+
+	gap: 8px;
+	padding: 12px;
+	border-radius: 3px;
+	border: 1px solid var(--bg-slate-500);
+}
+
+.host-metrics-card {
+	margin: 8px 0 1rem 0;
+	height: 300px;
+	padding: 10px;
+
+	border: 1px solid var(--bg-slate-500);
+
+	.ant-card-body {
+		padding: 0;
+	}
+
+	.chart-container {
+		width: 100%;
+		height: 100%;
+	}
+
+	.no-data-container {
+		position: absolute;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+	}
+}

frontend/src/components/HostMetricsDetail/Metrics/Metrics.tsx

@@ -0,0 +1,233 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { QueryFunctionContext, useQueries, UseQueryResult } from 'react-query';
+import { Card, Col, Row, Skeleton, Typography } from 'antd';
+import cx from 'classnames';
+import Uplot from 'components/Uplot';
+import { ENTITY_VERSION_V4 } from 'constants/app';
+import {
+	getHostQueryPayload,
+	hostWidgetInfo,
+} from 'container/LogDetailedView/InfraMetrics/constants';
+import DateTimeSelectionV2 from 'container/TopNav/DateTimeSelectionV2';
+import {
+	CustomTimeType,
+	Time,
+} from 'container/TopNav/DateTimeSelectionV2/types';
+import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+import { useIsDarkMode } from 'hooks/useDarkMode';
+import { useResizeObserver } from 'hooks/useDimensions';
+import { useMultiIntersectionObserver } from 'hooks/useMultiIntersectionObserver';
+import { GetMetricQueryRange } from 'lib/dashboard/getQueryResults';
+import { getUPlotChartOptions } from 'lib/uPlotLib/getUplotChartOptions';
+import { getUPlotChartData } from 'lib/uPlotLib/utils/getUplotChartData';
+import { SuccessResponse } from 'types/api';
+import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
+
+import { FeatureKeys } from '../../../constants/features';
+import { useAppContext } from '../../../providers/App/App';
+
+import './Metrics.styles.scss';
+
+interface MetricsTabProps {
+	timeRange: {
+		startTime: number;
+		endTime: number;
+	};
+	isModalTimeSelection: boolean;
+	handleTimeChange: (
+		interval: Time | CustomTimeType,
+		dateTimeRange?: [number, number],
+	) => void;
+	selectedInterval: Time;
+
+	hostName: string;
+}
+
+function Metrics({
+	selectedInterval,
+	hostName,
+	timeRange,
+	handleTimeChange,
+	isModalTimeSelection,
+}: MetricsTabProps): JSX.Element {
+	const { featureFlags } = useAppContext();
+	const dotMetricsEnabled =
+		featureFlags?.find((flag) => flag.name === FeatureKeys.DOT_METRICS_ENABLED)
+			?.active || false;
+
+	const {
+		visibilities,
+		setElement,
+	} = useMultiIntersectionObserver(hostWidgetInfo.length, { threshold: 0.1 });
+
+	const legendScrollPositionRef = useRef<{
+		scrollTop: number;
+		scrollLeft: number;
+	}>({
+		scrollTop: 0,
+		scrollLeft: 0,
+	});
+
+	const queryPayloads = useMemo(
+		() =>
+			getHostQueryPayload(
+				hostName,
+				timeRange.startTime,
+				timeRange.endTime,
+				dotMetricsEnabled,
+			),
+		[hostName, timeRange.startTime, timeRange.endTime, dotMetricsEnabled],
+	);
+
+	const queries = useQueries(
+		queryPayloads.map((payload, index) => ({
+			queryKey: ['host-metrics', payload, ENTITY_VERSION_V4, 'HOST'],
+			queryFn: ({
+				signal,
+			}: QueryFunctionContext): Promise<
+				SuccessResponse<MetricRangePayloadProps>
+			> => GetMetricQueryRange(payload, ENTITY_VERSION_V4, undefined, signal),
+			enabled: !!payload && visibilities[index],
+			keepPreviousData: true,
+		})),
+	);
+
+	const isDarkMode = useIsDarkMode();
+	const graphRef = useRef<HTMLDivElement>(null);
+	const dimensions = useResizeObserver(graphRef);
+	const { currentQuery } = useQueryBuilder();
+
+	const chartData = useMemo(
+		() => queries.map(({ data }) => getUPlotChartData(data?.payload)),
+		[queries],
+	);
+
+	const [graphTimeIntervals, setGraphTimeIntervals] = useState<
+		{
+			start: number;
+			end: number;
+		}[]
+	>(
+		new Array(queries.length).fill({
+			start: timeRange.startTime,
+			end: timeRange.endTime,
+		}),
+	);
+
+	useEffect(() => {
+		setGraphTimeIntervals(
+			new Array(queries.length).fill({
+				start: timeRange.startTime,
+				end: timeRange.endTime,
+			}),
+		);
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [timeRange]);
+
+	const onDragSelect = useCallback(
+		(start: number, end: number, graphIndex: number) => {
+			const startTimestamp = Math.trunc(start);
+			const endTimestamp = Math.trunc(end);
+
+			setGraphTimeIntervals((prev) => {
+				const newIntervals = [...prev];
+				newIntervals[graphIndex] = {
+					start: Math.floor(startTimestamp / 1000),
+					end: Math.floor(endTimestamp / 1000),
+				};
+				return newIntervals;
+			});
+		},
+		[],
+	);
+
+	const options = useMemo(
+		() =>
+			queries.map(({ data }, idx) =>
+				getUPlotChartOptions({
+					apiResponse: data?.payload,
+					isDarkMode,
+					dimensions,
+					yAxisUnit: hostWidgetInfo[idx].yAxisUnit,
+					softMax: null,
+					softMin: null,
+					minTimeScale: graphTimeIntervals[idx].start,
+					maxTimeScale: graphTimeIntervals[idx].end,
+					onDragSelect: (start, end) => onDragSelect(start, end, idx),
+					query: currentQuery,
+					legendScrollPosition: legendScrollPositionRef.current,
+					setLegendScrollPosition: (position: {
+						scrollTop: number;
+						scrollLeft: number;
+					}) => {
+						legendScrollPositionRef.current = position;
+					},
+				}),
+			),
+		[
+			queries,
+			isDarkMode,
+			dimensions,
+			graphTimeIntervals,
+			onDragSelect,
+			currentQuery,
+		],
+	);
+
+	const renderCardContent = (
+		query: UseQueryResult<SuccessResponse<MetricRangePayloadProps>, unknown>,
+		idx: number,
+	): JSX.Element => {
+		if ((!query.data && query.isLoading) || !visibilities[idx]) {
+			return <Skeleton />;
+		}
+
+		if (query.error) {
+			const errorMessage =
+				(query.error as Error)?.message || 'Something went wrong';
+			return <div>{errorMessage}</div>;
+		}
+		return (
+			<div
+				className={cx('chart-container', {
+					'no-data-container':
+						!query.isLoading && !query?.data?.payload?.data?.result?.length,
+				})}
+			>
+				<Uplot options={options[idx]} data={chartData[idx]} />
+			</div>
+		);
+	};
+
+	return (
+		<>
+			<div className="metrics-header">
+				<div className="metrics-datetime-section">
+					<DateTimeSelectionV2
+						showAutoRefresh
+						showRefreshText={false}
+						hideShareModal
+						onTimeChange={handleTimeChange}
+						defaultRelativeTime="5m"
+						isModalTimeSelection={isModalTimeSelection}
+						modalSelectedInterval={selectedInterval}
+						modalInitialStartTime={timeRange.startTime * 1000}
+						modalInitialEndTime={timeRange.endTime * 1000}
+					/>
+				</div>
+			</div>
+			<Row gutter={24} className="host-metrics-container">
+				{queries.map((query, idx) => (
+					<Col ref={setElement(idx)} span={12} key={hostWidgetInfo[idx].title}>
+						<Typography.Text>{hostWidgetInfo[idx].title}</Typography.Text>
+						<Card bordered className="host-metrics-card" ref={graphRef}>
+							{renderCardContent(query, idx)}
+						</Card>
+					</Col>
+				))}
+			</Row>
+		</>
+	);
+}
+
+export default Metrics;

frontend/src/components/HostMetricsDetail/Processes/Processes.styles.scss

@@ -28,7 +28,7 @@
 
 	.infra-container-card-text {
 		font-size: var(--font-size-sm);
-		color: var(--l2-foreground);
+		color: var(--text-vanilla-400);
 		line-height: 20px;
 		letter-spacing: -0.07px;
 		width: 400px;
@@ -44,7 +44,7 @@
 		align-items: flex-start;
 		gap: 12px;
 		border-radius: 4px;
-		background: color-mix(in srgb, var(--bg-robin-200) 4%, transparent);
+		background: rgba(171, 189, 255, 0.04);
 
 		.ant-space {
 			align-items: flex-start;
@@ -58,3 +58,9 @@
 		margin: auto;
 	}
 }
+
+.lightMode {
+	.infra-container-card-text {
+		color: var(--text-ink-200);
+	}
+}

frontend/src/components/HostMetricsDetail/Processes/Processes.tsx

@@ -1,15 +1,16 @@
 import { useTranslation } from 'react-i18next';
 import { Space, Typography } from 'antd';
-import WaitlistFragment from 'components/HostMetricsDetail/WaitlistFragment/WaitlistFragment';
 
 import broomUrl from '@/assets/Icons/broom.svg';
 import infraContainersUrl from '@/assets/Icons/infraContainers.svg';
 
-import 'components/HostMetricsDetail/Processes/Processes.styles.scss';
+import WaitlistFragment from '../WaitlistFragment/WaitlistFragment';
+
+import './Processes.styles.scss';
 
 const { Text } = Typography;
 
-function EntityProcesses(): JSX.Element {
+function Processes(): JSX.Element {
 	const { t } = useTranslation(['infraMonitoring']);
 
 	return (
@@ -42,4 +43,4 @@ function EntityProcesses(): JSX.Element {
 	);
 }
 
-export default EntityProcesses;
+export default Processes;

frontend/src/components/HostMetricsDetail/constants.ts

@@ -0,0 +1,17 @@
+export enum VIEWS {
+	METRICS = 'metrics',
+	LOGS = 'logs',
+	TRACES = 'traces',
+	CONTAINERS = 'containers',
+	PROCESSES = 'processes',
+	EVENTS = 'events',
+}
+
+export const VIEW_TYPES = {
+	METRICS: VIEWS.METRICS,
+	LOGS: VIEWS.LOGS,
+	TRACES: VIEWS.TRACES,
+	CONTAINERS: VIEWS.CONTAINERS,
+	PROCESSES: VIEWS.PROCESSES,
+	EVENTS: VIEWS.EVENTS,
+};

frontend/src/components/HostMetricsDetail/index.tsx

@@ -0,0 +1,3 @@
+import HostMetricsDetails from './HostMetricsDetails';
+
+export default HostMetricsDetails;

frontend/src/components/HttpStatusBadge/HttpStatusBadge.tsx

@@ -1,4 +1,4 @@
-import { Badge } from '@signozhq/ui';
+import { Badge } from '@signozhq/badge';
 
 type BadgeColor =
 	| 'vanilla'

frontend/src/components/InputWithLabel/InputWithLabel.styles.scss

@@ -5,7 +5,7 @@
 	border-radius: 2px 0px 0px 2px;
 
 	.label {
-		color: var(--l2-foreground);
+		color: var(--bg-vanilla-400);
 		font-size: 12px;
 		font-style: normal;
 		font-weight: 500;
@@ -21,8 +21,8 @@
 		padding: 0px 8px;
 
 		border-radius: 2px 0px 0px 2px;
-		border: 1px solid var(--l1-border);
-		background: var(--l3-background);
+		border: 1px solid var(--bg-slate-400);
+		background: var(--bg-ink-300);
 
 		display: flex;
 		justify-content: flex-start;
@@ -36,7 +36,7 @@
 		font-family: 'Space Mono', monospace !important;
 
 		border-radius: 2px 0px 0px 2px;
-		border: 1px solid var(--l1-border);
+		border: 1px solid var(--bg-slate-400);
 
 		border-right: none;
 		border-left: none;
@@ -47,7 +47,7 @@
 		font-size: 12px !important;
 		line-height: 27px;
 		&::placeholder {
-			color: var(--l2-foreground) !important;
+			color: var(--bg-vanilla-400) !important;
 			font-size: 12px !important;
 		}
 		&[type='number']::-webkit-inner-spin-button,
@@ -61,8 +61,8 @@
 
 	.close-btn {
 		border-radius: 0px 2px 2px 0px;
-		border: 1px solid var(--l1-border);
-		background: var(--l3-background);
+		border: 1px solid var(--bg-slate-400);
+		background: var(--bg-ink-300);
 		height: 38px;
 		width: 38px;
 	}
@@ -70,8 +70,8 @@
 	&.labelAfter {
 		.input {
 			border-radius: 0px 2px 2px 0px;
-			border: 1px solid var(--l1-border);
-			background: var(--l3-background);
+			border: 1px solid var(--bg-slate-400);
+			background: var(--bg-ink-300);
 			border-top-right-radius: 0px;
 			border-bottom-right-radius: 0px;
 		}
@@ -83,3 +83,31 @@
 		}
 	}
 }
+
+.lightMode {
+	.input-with-label {
+		.label {
+			color: var(--bg-ink-500) !important;
+
+			border: 1px solid var(--bg-vanilla-300) !important;
+			background: var(--bg-vanilla-100) !important;
+		}
+
+		.input {
+			border: 1px solid var(--bg-vanilla-300) !important;
+			background: var(--bg-vanilla-100) !important;
+		}
+
+		.close-btn {
+			border: 1px solid var(--bg-vanilla-300) !important;
+			background: var(--bg-vanilla-100) !important;
+		}
+
+		&.labelAfter {
+			.input {
+				border: 1px solid var(--bg-vanilla-300) !important;
+				background: var(--bg-vanilla-100) !important;
+			}
+		}
+	}
+}

frontend/src/components/InviteMembersModal/InviteMembersModal.styles.scss

@@ -19,7 +19,7 @@
 		font-weight: var(--label-base-400-font-weight);
 		line-height: var(--label-base-400-line-height);
 		letter-spacing: -0.065px;
-		color: var(--l1-foreground);
+		color: var(--bg-base-white);
 		margin: 0;
 	}
 
@@ -116,7 +116,7 @@
 	height: 32px;
 	color: var(--l1-foreground);
 	background-color: var(--l2-background);
-	border-color: var(--l1-border);
+	border-color: var(--border);
 	font-size: var(--paragraph-base-400-font-size);
 
 	&::placeholder {
@@ -149,7 +149,7 @@
 		.ant-select-selection-item {
 			font-size: var(--paragraph-base-400-font-size);
 			letter-spacing: -0.07px;
-			color: var(--l1-foreground);
+			color: var(--bg-base-white);
 			line-height: 32px;
 		}
 	}
@@ -181,7 +181,7 @@
 	box-shadow: none;
 
 	&:hover {
-		background: color-mix(in srgb, var(--bg-cherry-500) 10%, transparent);
+		background: rgba(229, 72, 77, 0.1);
 		opacity: 0.9;
 	}
 }
@@ -196,8 +196,8 @@
 }
 
 .invite-team-members-error-callout {
-	background: color-mix(in srgb, var(--bg-cherry-500) 10%, transparent);
-	border: 1px solid color-mix(in srgb, var(--bg-cherry-500) 20%, transparent);
+	background: rgba(229, 72, 77, 0.1);
+	border: 1px solid rgba(229, 72, 77, 0.2);
 	border-radius: 4px;
 	animation: horizontal-shaking 300ms ease-out;
 }
@@ -246,3 +246,19 @@
 		color: var(--l1-foreground);
 	}
 }
+
+.lightMode {
+	.invite-members-modal {
+		[data-slot='dialog-title'] {
+			color: var(--bg-base-black);
+		}
+	}
+
+	.team-member-role-select {
+		.ant-select-selector {
+			.ant-select-selection-item {
+				color: var(--bg-base-black);
+			}
+		}
+	}
+}

frontend/src/components/InviteMembersModal/InviteMembersModal.tsx

@@ -5,7 +5,7 @@ import { Style } from '@signozhq/design-tokens';
 import { DialogFooter, DialogWrapper } from '@signozhq/dialog';
 import { ChevronDown, CircleAlert, Plus, Trash2, X } from '@signozhq/icons';
 import { Input } from '@signozhq/input';
-import { toast } from '@signozhq/ui';
+import { toast } from '@signozhq/sonner';
 import { Select } from 'antd';
 import inviteUsers from 'api/v1/invite/bulk/create';
 import sendInvite from 'api/v1/invite/create';

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

@@ -14,8 +14,7 @@ const makeApiError = (message: string, code = StatusCodes.CONFLICT): APIError =>
 
 jest.mock('api/v1/invite/create');
 jest.mock('api/v1/invite/bulk/create');
-jest.mock('@signozhq/ui', () => ({
-	...jest.requireActual('@signozhq/ui'),
+jest.mock('@signozhq/sonner', () => ({
 	toast: {
 		success: jest.fn(),
 		error: jest.fn(),

frontend/src/components/LaunchChatSupport/LaunchChatSupport.styles.scss

@@ -8,6 +8,18 @@
 	}
 }
 
+.lightMode {
+	.facing-issue-button {
+		color: var(--bg-vanilla-500);
+		border-color: var(--bg-vanilla-300);
+
+		> .ant-btn:hover {
+			color: var(--bg-vanilla-500) !important;
+			border-color: var(--bg-vanilla-300) !important;
+		}
+	}
+}
+
 .tooltip-overlay {
 	text-wrap: nowrap;
 	.ant-tooltip-inner {

frontend/src/components/LearnMore/LearnMore.tsx

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

frontend/src/components/LogDetail/LogDetails.styles.scss

@@ -1,6 +1,6 @@
 .log-detail-drawer {
-	border-left: 1px solid var(--l1-border);
-	background: var(--l2-background);
+	border-left: 1px solid var(--bg-slate-500);
+	background: var(--bg-ink-400);
 	box-shadow: -4px 10px 16px 2px rgba(0, 0, 0, 0.2);
 
 	.log-detail-drawer__title {
@@ -30,8 +30,8 @@
 
 		align-items: stretch;
 
-		border-bottom: 1px solid var(--l1-border);
-		background: var(--l2-background);
+		border-bottom: 1px solid var(--bg-slate-500);
+		background: var(--bg-ink-400);
 	}
 
 	.ant-drawer-close {
@@ -46,7 +46,7 @@
 	}
 
 	.title {
-		color: var(--l2-foreground);
+		color: var(--text-vanilla-400);
 		font-family: Inter;
 		font-size: var(--font-size-sm);
 		font-style: normal;
@@ -60,8 +60,8 @@
 		align-items: center;
 		justify-content: center;
 		padding-top: var(--padding-1);
-		border: 1px solid var(--l1-border);
-		background: var(--l3-background);
+		border: 1px solid var(--bg-slate-400);
+		background: var(--bg-ink-300);
 		box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
 	}
 
@@ -91,31 +91,31 @@
 			white-space: nowrap;
 			text-overflow: ellipsis;
 			overflow: hidden;
-			color: var(--l2-foreground);
+			color: var(--text-vanilla-400);
 			opacity: 0.6;
 		}
 
 		.log-type-indicator {
 			height: 24px;
-			border: 2px solid var(--l1-border);
+			border: 2px solid var(--bg-slate-400);
 			border-radius: 5px;
 			margin-left: 0;
 
 			&.INFO {
-				border-color: var(--l1-border);
+				border-color: #1d212d;
 			}
 
 			&.WARNING {
-				border-color: var(--bg-amber-400);
+				border-color: #ffcd56;
 			}
 
 			&.ERROR {
-				border-color: var(--bg-cherry-500);
+				border-color: #e5484d;
 			}
 		}
 
 		.log-overflow-shadow {
-			background: linear-gradient(270deg, var(--card) 10.4%, transparent 100%);
+			background: linear-gradient(270deg, #121317 10.4%, rgba(18, 19, 23, 0) 100%);
 
 			width: 196px;
 			position: absolute;
@@ -131,8 +131,8 @@
 
 		.action-btn {
 			border-radius: 2px;
-			border: 1px solid var(--l1-border);
-			background: var(--l3-background);
+			border: 1px solid var(--bg-slate-400);
+			background: var(--bg-ink-300);
 			box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
 			display: flex;
 			align-items: center;
@@ -146,7 +146,7 @@
 	}
 
 	.views-tabs {
-		color: var(--l2-foreground);
+		color: var(--text-vanilla-400);
 
 		.view-title {
 			display: flex;
@@ -159,28 +159,28 @@
 		}
 
 		.tab {
-			border: 1px solid var(--l1-border);
+			border: 1px solid var(--bg-slate-400);
 			width: 114px;
 		}
 
 		.tab::before {
-			background: var(--l1-border);
+			background: var(--bg-slate-400);
 		}
 
 		.selected_view {
-			background: var(--l3-background);
-			color: var(--l1-foreground);
-			border: 1px solid var(--l1-border);
+			background: var(--bg-slate-300);
+			color: var(--text-vanilla-100);
+			border: 1px solid var(--bg-slate-400);
 		}
 
 		.selected_view::before {
-			background: var(--l1-border);
+			background: var(--bg-slate-400);
 		}
 	}
 
 	.search-input {
 		margin-top: var(--margin-2);
-		border: 1px solid var(--l1-border);
+		border: 1px solid var(--bg-slate-400);
 		height: 46px;
 		padding: var(--padding-1) var(--padding-2);
 		box-shadow: none;
@@ -197,8 +197,8 @@
 		right: 0;
 		padding: 8px 16px;
 		text-align: left;
-		color: var(--l3-foreground);
-		background: var(--l2-background);
+		color: var(--text-vanilla-200);
+		background: var(--bg-ink-400);
 		z-index: 10;
 
 		.log-detail-drawer__footer-hint-content {
@@ -210,7 +210,7 @@
 		.log-detail-drawer__footer-hint-icon {
 			display: inline;
 			vertical-align: middle;
-			color: var(--l3-foreground);
+			color: var(--text-vanilla-200);
 		}
 
 		.log-detail-drawer__footer-hint-text {
@@ -232,9 +232,9 @@
 		min-width: 28px;
 		height: 28px;
 		border-radius: 4px;
-		background: var(--l2-background);
-		color: var(--l2-foreground);
-		border: 1px solid var(--l1-border);
+		background: var(--bg-ink-400);
+		color: var(--text-vanilla-400);
+		border: 1px solid var(--bg-ink-300);
 		box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.08);
 		display: flex;
 		align-items: center;
@@ -244,24 +244,154 @@
 
 	.log-arrow-btn-up,
 	.log-arrow-btn-down {
-		background: var(--l2-background);
+		background: var(--bg-ink-400);
 	}
 
 	.log-arrow-btn:active,
 	.log-arrow-btn:focus {
-		background: var(--l3-background);
-		color: var(--l1-foreground);
+		background: var(--bg-ink-300);
+		color: var(--text-vanilla-100);
 	}
 
 	.log-arrow-btn[disabled] {
 		opacity: 0.5;
 		cursor: not-allowed;
-		background: var(--l1-background);
-		color: var(--l3-foreground);
+		background: var(--bg-ink-500);
+		color: var(--text-vanilla-200);
 
 		.log-arrow-btn:hover:not([disabled]) {
-			background: var(--l3-background);
-			color: var(--l1-foreground);
+			background: var(--bg-ink-300);
+			color: var(--text-vanilla-100);
+		}
+	}
+}
+
+.lightMode {
+	.log-arrows {
+		background: var(--bg-vanilla-100);
+		box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.04);
+	}
+
+	.log-arrow-btn {
+		background: var(--bg-vanilla-100);
+		color: var(--text-ink-400);
+		border: 1px solid var(--bg-vanilla-300);
+		box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.04);
+	}
+
+	.log-arrow-btn-up,
+	.log-arrow-btn-down {
+		background: var(--bg-vanilla-100);
+	}
+
+	.log-arrow-btn:active,
+	.log-arrow-btn:focus {
+		background: var(--bg-vanilla-200);
+		color: var(--text-ink-500);
+	}
+
+	.log-arrow-btn:hover:not([disabled]) {
+		background: var(--bg-vanilla-200);
+		color: var(--text-ink-500);
+	}
+
+	.log-arrow-btn[disabled] {
+		background: var(--bg-vanilla-100);
+		color: var(--text-ink-200);
+	}
+	.ant-drawer-header {
+		border-bottom: 1px solid var(--bg-vanilla-400);
+		background: var(--bg-vanilla-100);
+	}
+
+	.log-detail-drawer {
+		.title {
+			color: var(--text-ink-300);
+		}
+
+		.log-detail-drawer__log {
+			.log-overflow-shadow {
+				background: linear-gradient(
+					270deg,
+					var(--bg-vanilla-100) 10.4%,
+					rgba(255, 255, 255, 0) 100%
+				);
+			}
+
+			.log-type-indicator {
+				border: 2px solid var(--bg-vanilla-400);
+			}
+
+			.ant-typography {
+				color: var(--text-ink-300);
+				background: transparent;
+			}
+		}
+
+		.radio-button {
+			border: 1px solid var(--bg-vanilla-400);
+			background: var(--bg-vanilla-100);
+			color: var(--text-ink-300);
+		}
+
+		.views-tabs {
+			.tab {
+				background: var(--bg-vanilla-100);
+			}
+
+			.selected_view {
+				background: var(--bg-vanilla-300);
+				border: 1px solid var(--bg-slate-300);
+				color: var(--text-ink-400);
+			}
+
+			.selected_view::before {
+				background: var(--bg-vanilla-300);
+				border-left: 1px solid var(--bg-slate-300);
+			}
+		}
+
+		.tabs-and-search {
+			.action-btn {
+				border: 1px solid var(--bg-vanilla-400);
+				background: var(--bg-vanilla-100);
+				color: var(--text-ink-300);
+			}
+		}
+
+		.search-input {
+			border: 1px solid var(--bg-vanilla-200);
+			background: var(--bg-vanilla-100);
+			color: var(--text-ink-300);
+		}
+	}
+
+	.log-detail-drawer__footer-hint {
+		position: sticky;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		padding: 8px 16px;
+		text-align: left;
+		color: var(--text-vanilla-700);
+		background: var(--bg-vanilla-100);
+		z-index: 10;
+
+		.log-detail-drawer__footer-hint-content {
+			display: flex;
+			align-items: center;
+			gap: 4px;
+		}
+
+		.log-detail-drawer__footer-hint-icon {
+			display: inline;
+			vertical-align: middle;
+			color: var(--text-vanilla-700);
+		}
+
+		.log-detail-drawer__footer-hint-text {
+			font-size: 13px;
+			margin: 0;
 		}
 	}
 }

frontend/src/components/LogDetail/QueryBuilderSearchWrapper.styles.scss

@@ -1,6 +1,6 @@
 .query-builder-search-wrapper {
 	margin-top: 10px;
-	border: 1px solid var(--l1-border);
+	border: 1px solid var(--bg-slate-400);
 	border-bottom: none;
 
 	.ant-select-selector {

frontend/src/components/Logs/ListLogView/ListLogView.styles.scss

@@ -6,7 +6,7 @@
 }
 .log-field-key,
 .log-field-key-colon {
-	color: var(--l2-foreground);
+	color: var(--text-vanilla-400, #c0c1c3);
 	font-size: 14px;
 	font-style: normal;
 	font-weight: 400;
@@ -41,7 +41,7 @@
 	flex-shrink: 0;
 }
 .log-value {
-	color: var(--l2-foreground);
+	color: var(--text-vanilla-400, #c0c1c3);
 	font-size: 14px;
 	font-style: normal;
 	font-weight: 400;
@@ -104,7 +104,7 @@
 	.selected-log-value {
 		color: var(--bg-sienna-500);
 		border-radius: 2px;
-		background: color-mix(in srgb, var(--bg-sienna-500) 8%, transparent);
+		background: rgba(173, 127, 88, 0.08);
 		padding: 0px 2px;
 		margin-left: 7px;
 		font-weight: 400;
@@ -154,8 +154,8 @@
 	height: 32px;
 	width: 68px;
 	border-radius: 2px;
-	border: 1px solid var(--l1-border);
-	background: var(--l2-background);
+	border: 1px solid var(--bg-slate-400, #1d212d);
+	background: var(--bg-ink-400, #121317);
 	box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
 
 	.context-btn {
@@ -163,7 +163,7 @@
 	}
 	.copy-link-btn {
 		width: 50% !important;
-		border-left: 1px solid var(--l1-border) !important;
+		border-left: 1px solid var(--bg-slate-400, #1d212d) !important;
 	}
 
 	.ant-btn-default {
@@ -172,6 +172,16 @@
 	}
 }
 
+.lightMode {
+	.log-field-key,
+	.log-field-key-colon {
+		color: var(--text-slate-400);
+	}
+	.log-value {
+		color: var(--text-slate-400);
+	}
+}
+
 .dark {
 	.log-field-key,
 	.log-field-key-colon {

frontend/src/components/Logs/LogLinesActionButtons/LogLinesActionButtons.styles.scss

@@ -6,8 +6,8 @@
 	right: 0;
 	cursor: pointer;
 	border-radius: 2px;
-	border: 1px solid var(--l1-border);
-	background: var(--l2-background);
+	border: 1px solid var(--bg-slate-400);
+	background: var(--bg-ink-400);
 
 	.ant-btn-default {
 		border: none;
@@ -18,13 +18,13 @@
 		display: flex;
 
 		&.active-tab {
-			background-color: var(--l1-border);
+			background-color: var(--bg-slate-400);
 		}
 	}
 
 	.copy-log-btn {
-		border-left: 1px solid var(--l1-border);
-		border-color: var(--l1-border) !important;
+		border-left: 1px solid var(--bg-slate-400);
+		border-color: var(--bg-slate-400) !important;
 	}
 }
 
@@ -38,3 +38,15 @@
 	margin: 0;
 	z-index: 5;
 }
+
+.lightMode {
+	.log-line-action-buttons {
+		border: 1px solid var(--bg-vanilla-400);
+		background: var(--bg-vanilla-400);
+
+		.copy-log-btn {
+			border-left: 1px solid var(--bg-vanilla-400);
+			border-color: var(--bg-vanilla-400) !important;
+		}
+	}
+}

frontend/src/components/Logs/LogStateIndicator/LogStateIndicator.styles.scss

@@ -60,7 +60,7 @@
 			background-color: var(--bg-robin-600);
 		}
 		&.severity-info-1 {
-			background-color: var(--primary-background);
+			background-color: var(--bg-robin-500);
 		}
 		&.severity-info-2 {
 			background-color: var(--bg-robin-400);