chore(release): bump to v0.121.2

Co-authored-by: primus-bot[bot] <171087277+primus-bot[bot]@users.noreply.github.com>

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.120.0
+    image: signoz/signoz:v0.121.2
     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.120.0
+    image: signoz/signoz:v0.121.2
     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.120.0}
+    image: signoz/signoz:${VERSION:-v0.121.2}
     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.120.0}
+    image: signoz/signoz:${VERSION:-v0.121.2}
     container_name: signoz
     ports:
       - "8080:8080" # signoz port

docs/api/openapi.yml

@@ -2632,6 +2632,158 @@ components:
       - list
       - grouped_list
       type: string
+    LlmpricingruletypesGettablePricingRules:
+      properties:
+        items:
+          items:
+            $ref: '#/components/schemas/LlmpricingruletypesLLMPricingRule'
+          nullable: true
+          type: array
+        limit:
+          type: integer
+        offset:
+          type: integer
+        total:
+          type: integer
+      required:
+      - items
+      - total
+      - offset
+      - limit
+      type: object
+    LlmpricingruletypesLLMPricingCacheCosts:
+      properties:
+        mode:
+          $ref: '#/components/schemas/LlmpricingruletypesLLMPricingRuleCacheMode'
+        read:
+          format: double
+          type: number
+        write:
+          format: double
+          type: number
+      required:
+      - mode
+      type: object
+    LlmpricingruletypesLLMPricingRule:
+      properties:
+        createdAt:
+          format: date-time
+          type: string
+        createdBy:
+          type: string
+        enabled:
+          type: boolean
+        id:
+          type: string
+        isOverride:
+          type: boolean
+        modelName:
+          type: string
+        modelPattern:
+          $ref: '#/components/schemas/LlmpricingruletypesStringSlice'
+        orgId:
+          type: string
+        pricing:
+          $ref: '#/components/schemas/LlmpricingruletypesLLMRulePricing'
+        provider:
+          type: string
+        sourceId:
+          type: string
+        syncedAt:
+          format: date-time
+          nullable: true
+          type: string
+        unit:
+          $ref: '#/components/schemas/LlmpricingruletypesLLMPricingRuleUnit'
+        updatedAt:
+          format: date-time
+          type: string
+        updatedBy:
+          type: string
+      required:
+      - id
+      - orgId
+      - modelName
+      - provider
+      - modelPattern
+      - unit
+      - pricing
+      - isOverride
+      - enabled
+      type: object
+    LlmpricingruletypesLLMPricingRuleCacheMode:
+      enum:
+      - subtract
+      - additive
+      - unknown
+      type: string
+    LlmpricingruletypesLLMPricingRuleUnit:
+      enum:
+      - per_million_tokens
+      type: string
+    LlmpricingruletypesLLMRulePricing:
+      properties:
+        cache:
+          $ref: '#/components/schemas/LlmpricingruletypesLLMPricingCacheCosts'
+        input:
+          format: double
+          type: number
+        output:
+          format: double
+          type: number
+      required:
+      - input
+      - output
+      type: object
+    LlmpricingruletypesStringSlice:
+      items:
+        type: string
+      nullable: true
+      type: array
+    LlmpricingruletypesUpdatableLLMPricingRule:
+      properties:
+        enabled:
+          type: boolean
+        id:
+          nullable: true
+          type: string
+        isOverride:
+          nullable: true
+          type: boolean
+        modelName:
+          type: string
+        modelPattern:
+          items:
+            type: string
+          nullable: true
+          type: array
+        pricing:
+          $ref: '#/components/schemas/LlmpricingruletypesLLMRulePricing'
+        provider:
+          type: string
+        sourceId:
+          nullable: true
+          type: string
+        unit:
+          $ref: '#/components/schemas/LlmpricingruletypesLLMPricingRuleUnit'
+      required:
+      - modelName
+      - provider
+      - modelPattern
+      - unit
+      - pricing
+      - enabled
+      type: object
+    LlmpricingruletypesUpdatableLLMPricingRules:
+      properties:
+        rules:
+          items:
+            $ref: '#/components/schemas/LlmpricingruletypesUpdatableLLMPricingRule'
+          nullable: true
+          type: array
+      required:
+      - rules
+      type: object
     MetricsexplorertypesInspectMetricsRequest:
       properties:
         end:
@@ -7675,6 +7827,218 @@ paths:
       summary: Create bulk invite
       tags:
       - users
+  /api/v1/llm_pricing_rules:
+    get:
+      deprecated: false
+      description: Returns all LLM pricing rules for the authenticated org, with pagination.
+      operationId: ListLLMPricingRules
+      parameters:
+      - in: query
+        name: offset
+        schema:
+          type: integer
+      - in: query
+        name: limit
+        schema:
+          type: integer
+      responses:
+        "200":
+          content:
+            application/json:
+              schema:
+                properties:
+                  data:
+                    $ref: '#/components/schemas/LlmpricingruletypesGettablePricingRules'
+                  status:
+                    type: string
+                required:
+                - status
+                - data
+                type: object
+          description: OK
+        "400":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Bad Request
+        "401":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Unauthorized
+        "403":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Forbidden
+        "500":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Internal Server Error
+      security:
+      - api_key:
+        - VIEWER
+      - tokenizer:
+        - VIEWER
+      summary: List pricing rules
+      tags:
+      - llmpricingrules
+    put:
+      deprecated: false
+      description: Single write endpoint used by both the user and the Zeus sync job.
+        Per-rule match is by id, then sourceId, then insert. Override rows (is_override=true)
+        are fully preserved when the request does not provide isOverride; only synced_at
+        is stamped.
+      operationId: CreateOrUpdateLLMPricingRules
+      requestBody:
+        content:
+          application/json:
+            schema:
+              $ref: '#/components/schemas/LlmpricingruletypesUpdatableLLMPricingRules'
+      responses:
+        "204":
+          description: No Content
+        "400":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Bad Request
+        "401":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Unauthorized
+        "403":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Forbidden
+        "500":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Internal Server Error
+      security:
+      - api_key:
+        - ADMIN
+      - tokenizer:
+        - ADMIN
+      summary: Create or update pricing rules
+      tags:
+      - llmpricingrules
+  /api/v1/llm_pricing_rules/{id}:
+    delete:
+      deprecated: false
+      description: Hard-deletes a pricing rule. If auto-synced, it will be recreated
+        on the next sync cycle.
+      operationId: DeleteLLMPricingRule
+      parameters:
+      - in: path
+        name: id
+        required: true
+        schema:
+          type: string
+      responses:
+        "204":
+          description: No Content
+        "401":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Unauthorized
+        "403":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Forbidden
+        "404":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Not Found
+        "500":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Internal Server Error
+      security:
+      - api_key:
+        - ADMIN
+      - tokenizer:
+        - ADMIN
+      summary: Delete a pricing rule
+      tags:
+      - llmpricingrules
+    get:
+      deprecated: false
+      description: Returns a single LLM pricing rule by ID.
+      operationId: GetLLMPricingRule
+      parameters:
+      - in: path
+        name: id
+        required: true
+        schema:
+          type: string
+      responses:
+        "200":
+          content:
+            application/json:
+              schema:
+                properties:
+                  data:
+                    $ref: '#/components/schemas/LlmpricingruletypesLLMPricingRule'
+                  status:
+                    type: string
+                required:
+                - status
+                - data
+                type: object
+          description: OK
+        "401":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Unauthorized
+        "403":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Forbidden
+        "404":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Not Found
+        "500":
+          content:
+            application/json:
+              schema:
+                $ref: '#/components/schemas/RenderErrorResponse'
+          description: Internal Server Error
+      security:
+      - api_key:
+        - VIEWER
+      - tokenizer:
+        - VIEWER
+      summary: Get a pricing rule
+      tags:
+      - llmpricingrules
   /api/v1/logs/promote_paths:
     get:
       deprecated: false
@@ -16909,9 +17273,9 @@ paths:
           description: Internal Server Error
       security:
       - api_key:
-        - ADMIN
+        - VIEWER
       - tokenizer:
-        - ADMIN
+        - VIEWER
       summary: Get host info from Zeus.
       tags:
       - zeus

frontend/package.json

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

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

@@ -0,0 +1,399 @@
+/**
+ * ! Do not edit manually
+ * * The file has been auto-generated using Orval for SigNoz
+ * * regenerate with 'yarn generate:api'
+ * SigNoz
+ */
+import { useMutation, useQuery } from 'react-query';
+import type {
+	InvalidateOptions,
+	MutationFunction,
+	QueryClient,
+	QueryFunction,
+	QueryKey,
+	UseMutationOptions,
+	UseMutationResult,
+	UseQueryOptions,
+	UseQueryResult,
+} from 'react-query';
+
+import type {
+	DeleteLLMPricingRulePathParameters,
+	GetLLMPricingRule200,
+	GetLLMPricingRulePathParameters,
+	ListLLMPricingRules200,
+	ListLLMPricingRulesParams,
+	LlmpricingruletypesUpdatableLLMPricingRulesDTO,
+	RenderErrorResponseDTO,
+} from '../sigNoz.schemas';
+
+import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
+import type { ErrorType, BodyType } from '../../../generatedAPIInstance';
+
+/**
+ * Returns all LLM pricing rules for the authenticated org, with pagination.
+ * @summary List pricing rules
+ */
+export const listLLMPricingRules = (
+	params?: ListLLMPricingRulesParams,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<ListLLMPricingRules200>({
+		url: `/api/v1/llm_pricing_rules`,
+		method: 'GET',
+		params,
+		signal,
+	});
+};
+
+export const getListLLMPricingRulesQueryKey = (
+	params?: ListLLMPricingRulesParams,
+) => {
+	return [`/api/v1/llm_pricing_rules`, ...(params ? [params] : [])] as const;
+};
+
+export const getListLLMPricingRulesQueryOptions = <
+	TData = Awaited<ReturnType<typeof listLLMPricingRules>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(
+	params?: ListLLMPricingRulesParams,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof listLLMPricingRules>>,
+			TError,
+			TData
+		>;
+	},
+) => {
+	const { query: queryOptions } = options ?? {};
+
+	const queryKey =
+		queryOptions?.queryKey ?? getListLLMPricingRulesQueryKey(params);
+
+	const queryFn: QueryFunction<
+		Awaited<ReturnType<typeof listLLMPricingRules>>
+	> = ({ signal }) => listLLMPricingRules(params, signal);
+
+	return { queryKey, queryFn, ...queryOptions } as UseQueryOptions<
+		Awaited<ReturnType<typeof listLLMPricingRules>>,
+		TError,
+		TData
+	> & { queryKey: QueryKey };
+};
+
+export type ListLLMPricingRulesQueryResult = NonNullable<
+	Awaited<ReturnType<typeof listLLMPricingRules>>
+>;
+export type ListLLMPricingRulesQueryError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary List pricing rules
+ */
+
+export function useListLLMPricingRules<
+	TData = Awaited<ReturnType<typeof listLLMPricingRules>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(
+	params?: ListLLMPricingRulesParams,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof listLLMPricingRules>>,
+			TError,
+			TData
+		>;
+	},
+): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
+	const queryOptions = getListLLMPricingRulesQueryOptions(params, options);
+
+	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
+		queryKey: QueryKey;
+	};
+
+	query.queryKey = queryOptions.queryKey;
+
+	return query;
+}
+
+/**
+ * @summary List pricing rules
+ */
+export const invalidateListLLMPricingRules = async (
+	queryClient: QueryClient,
+	params?: ListLLMPricingRulesParams,
+	options?: InvalidateOptions,
+): Promise<QueryClient> => {
+	await queryClient.invalidateQueries(
+		{ queryKey: getListLLMPricingRulesQueryKey(params) },
+		options,
+	);
+
+	return queryClient;
+};
+
+/**
+ * Single write endpoint used by both the user and the Zeus sync job. Per-rule match is by id, then sourceId, then insert. Override rows (is_override=true) are fully preserved when the request does not provide isOverride; only synced_at is stamped.
+ * @summary Create or update pricing rules
+ */
+export const createOrUpdateLLMPricingRules = (
+	llmpricingruletypesUpdatableLLMPricingRulesDTO: BodyType<LlmpricingruletypesUpdatableLLMPricingRulesDTO>,
+) => {
+	return GeneratedAPIInstance<void>({
+		url: `/api/v1/llm_pricing_rules`,
+		method: 'PUT',
+		headers: { 'Content-Type': 'application/json' },
+		data: llmpricingruletypesUpdatableLLMPricingRulesDTO,
+	});
+};
+
+export const getCreateOrUpdateLLMPricingRulesMutationOptions = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof createOrUpdateLLMPricingRules>>,
+		TError,
+		{ data: BodyType<LlmpricingruletypesUpdatableLLMPricingRulesDTO> },
+		TContext
+	>;
+}): UseMutationOptions<
+	Awaited<ReturnType<typeof createOrUpdateLLMPricingRules>>,
+	TError,
+	{ data: BodyType<LlmpricingruletypesUpdatableLLMPricingRulesDTO> },
+	TContext
+> => {
+	const mutationKey = ['createOrUpdateLLMPricingRules'];
+	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 createOrUpdateLLMPricingRules>>,
+		{ data: BodyType<LlmpricingruletypesUpdatableLLMPricingRulesDTO> }
+	> = (props) => {
+		const { data } = props ?? {};
+
+		return createOrUpdateLLMPricingRules(data);
+	};
+
+	return { mutationFn, ...mutationOptions };
+};
+
+export type CreateOrUpdateLLMPricingRulesMutationResult = NonNullable<
+	Awaited<ReturnType<typeof createOrUpdateLLMPricingRules>>
+>;
+export type CreateOrUpdateLLMPricingRulesMutationBody =
+	BodyType<LlmpricingruletypesUpdatableLLMPricingRulesDTO>;
+export type CreateOrUpdateLLMPricingRulesMutationError =
+	ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Create or update pricing rules
+ */
+export const useCreateOrUpdateLLMPricingRules = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof createOrUpdateLLMPricingRules>>,
+		TError,
+		{ data: BodyType<LlmpricingruletypesUpdatableLLMPricingRulesDTO> },
+		TContext
+	>;
+}): UseMutationResult<
+	Awaited<ReturnType<typeof createOrUpdateLLMPricingRules>>,
+	TError,
+	{ data: BodyType<LlmpricingruletypesUpdatableLLMPricingRulesDTO> },
+	TContext
+> => {
+	const mutationOptions =
+		getCreateOrUpdateLLMPricingRulesMutationOptions(options);
+
+	return useMutation(mutationOptions);
+};
+/**
+ * Hard-deletes a pricing rule. If auto-synced, it will be recreated on the next sync cycle.
+ * @summary Delete a pricing rule
+ */
+export const deleteLLMPricingRule = ({
+	id,
+}: DeleteLLMPricingRulePathParameters) => {
+	return GeneratedAPIInstance<void>({
+		url: `/api/v1/llm_pricing_rules/${id}`,
+		method: 'DELETE',
+	});
+};
+
+export const getDeleteLLMPricingRuleMutationOptions = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof deleteLLMPricingRule>>,
+		TError,
+		{ pathParams: DeleteLLMPricingRulePathParameters },
+		TContext
+	>;
+}): UseMutationOptions<
+	Awaited<ReturnType<typeof deleteLLMPricingRule>>,
+	TError,
+	{ pathParams: DeleteLLMPricingRulePathParameters },
+	TContext
+> => {
+	const mutationKey = ['deleteLLMPricingRule'];
+	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 deleteLLMPricingRule>>,
+		{ pathParams: DeleteLLMPricingRulePathParameters }
+	> = (props) => {
+		const { pathParams } = props ?? {};
+
+		return deleteLLMPricingRule(pathParams);
+	};
+
+	return { mutationFn, ...mutationOptions };
+};
+
+export type DeleteLLMPricingRuleMutationResult = NonNullable<
+	Awaited<ReturnType<typeof deleteLLMPricingRule>>
+>;
+
+export type DeleteLLMPricingRuleMutationError =
+	ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Delete a pricing rule
+ */
+export const useDeleteLLMPricingRule = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof deleteLLMPricingRule>>,
+		TError,
+		{ pathParams: DeleteLLMPricingRulePathParameters },
+		TContext
+	>;
+}): UseMutationResult<
+	Awaited<ReturnType<typeof deleteLLMPricingRule>>,
+	TError,
+	{ pathParams: DeleteLLMPricingRulePathParameters },
+	TContext
+> => {
+	const mutationOptions = getDeleteLLMPricingRuleMutationOptions(options);
+
+	return useMutation(mutationOptions);
+};
+/**
+ * Returns a single LLM pricing rule by ID.
+ * @summary Get a pricing rule
+ */
+export const getLLMPricingRule = (
+	{ id }: GetLLMPricingRulePathParameters,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<GetLLMPricingRule200>({
+		url: `/api/v1/llm_pricing_rules/${id}`,
+		method: 'GET',
+		signal,
+	});
+};
+
+export const getGetLLMPricingRuleQueryKey = ({
+	id,
+}: GetLLMPricingRulePathParameters) => {
+	return [`/api/v1/llm_pricing_rules/${id}`] as const;
+};
+
+export const getGetLLMPricingRuleQueryOptions = <
+	TData = Awaited<ReturnType<typeof getLLMPricingRule>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(
+	{ id }: GetLLMPricingRulePathParameters,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof getLLMPricingRule>>,
+			TError,
+			TData
+		>;
+	},
+) => {
+	const { query: queryOptions } = options ?? {};
+
+	const queryKey =
+		queryOptions?.queryKey ?? getGetLLMPricingRuleQueryKey({ id });
+
+	const queryFn: QueryFunction<
+		Awaited<ReturnType<typeof getLLMPricingRule>>
+	> = ({ signal }) => getLLMPricingRule({ id }, signal);
+
+	return {
+		queryKey,
+		queryFn,
+		enabled: !!id,
+		...queryOptions,
+	} as UseQueryOptions<
+		Awaited<ReturnType<typeof getLLMPricingRule>>,
+		TError,
+		TData
+	> & { queryKey: QueryKey };
+};
+
+export type GetLLMPricingRuleQueryResult = NonNullable<
+	Awaited<ReturnType<typeof getLLMPricingRule>>
+>;
+export type GetLLMPricingRuleQueryError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Get a pricing rule
+ */
+
+export function useGetLLMPricingRule<
+	TData = Awaited<ReturnType<typeof getLLMPricingRule>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(
+	{ id }: GetLLMPricingRulePathParameters,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof getLLMPricingRule>>,
+			TError,
+			TData
+		>;
+	},
+): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
+	const queryOptions = getGetLLMPricingRuleQueryOptions({ id }, options);
+
+	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
+		queryKey: QueryKey;
+	};
+
+	query.queryKey = queryOptions.queryKey;
+
+	return query;
+}
+
+/**
+ * @summary Get a pricing rule
+ */
+export const invalidateGetLLMPricingRule = async (
+	queryClient: QueryClient,
+	{ id }: GetLLMPricingRulePathParameters,
+	options?: InvalidateOptions,
+): Promise<QueryClient> => {
+	await queryClient.invalidateQueries(
+		{ queryKey: getGetLLMPricingRuleQueryKey({ id }) },
+		options,
+	);
+
+	return queryClient;
+};

frontend/src/api/generated/services/sigNoz.schemas.ts

@@ -3413,6 +3413,170 @@ export enum InframonitoringtypesResponseTypeDTO {
 	list = 'list',
 	grouped_list = 'grouped_list',
 }
+export interface LlmpricingruletypesGettablePricingRulesDTO {
+	/**
+	 * @type array
+	 * @nullable true
+	 */
+	items: LlmpricingruletypesLLMPricingRuleDTO[] | null;
+	/**
+	 * @type integer
+	 */
+	limit: number;
+	/**
+	 * @type integer
+	 */
+	offset: number;
+	/**
+	 * @type integer
+	 */
+	total: number;
+}
+
+export interface LlmpricingruletypesLLMPricingCacheCostsDTO {
+	mode: LlmpricingruletypesLLMPricingRuleCacheModeDTO;
+	/**
+	 * @type number
+	 * @format double
+	 */
+	read?: number;
+	/**
+	 * @type number
+	 * @format double
+	 */
+	write?: number;
+}
+
+export interface LlmpricingruletypesLLMPricingRuleDTO {
+	/**
+	 * @type string
+	 * @format date-time
+	 */
+	createdAt?: Date;
+	/**
+	 * @type string
+	 */
+	createdBy?: string;
+	/**
+	 * @type boolean
+	 */
+	enabled: boolean;
+	/**
+	 * @type string
+	 */
+	id: string;
+	/**
+	 * @type boolean
+	 */
+	isOverride: boolean;
+	/**
+	 * @type string
+	 */
+	modelName: string;
+	modelPattern: LlmpricingruletypesStringSliceDTO;
+	/**
+	 * @type string
+	 */
+	orgId: string;
+	pricing: LlmpricingruletypesLLMRulePricingDTO;
+	/**
+	 * @type string
+	 */
+	provider: string;
+	/**
+	 * @type string
+	 */
+	sourceId?: string;
+	/**
+	 * @type string
+	 * @format date-time
+	 * @nullable true
+	 */
+	syncedAt?: Date | null;
+	unit: LlmpricingruletypesLLMPricingRuleUnitDTO;
+	/**
+	 * @type string
+	 * @format date-time
+	 */
+	updatedAt?: Date;
+	/**
+	 * @type string
+	 */
+	updatedBy?: string;
+}
+
+export enum LlmpricingruletypesLLMPricingRuleCacheModeDTO {
+	subtract = 'subtract',
+	additive = 'additive',
+	unknown = 'unknown',
+}
+export enum LlmpricingruletypesLLMPricingRuleUnitDTO {
+	per_million_tokens = 'per_million_tokens',
+}
+export interface LlmpricingruletypesLLMRulePricingDTO {
+	cache?: LlmpricingruletypesLLMPricingCacheCostsDTO;
+	/**
+	 * @type number
+	 * @format double
+	 */
+	input: number;
+	/**
+	 * @type number
+	 * @format double
+	 */
+	output: number;
+}
+
+/**
+ * @nullable
+ */
+export type LlmpricingruletypesStringSliceDTO = string[] | null;
+
+export interface LlmpricingruletypesUpdatableLLMPricingRuleDTO {
+	/**
+	 * @type boolean
+	 */
+	enabled: boolean;
+	/**
+	 * @type string
+	 * @nullable true
+	 */
+	id?: string | null;
+	/**
+	 * @type boolean
+	 * @nullable true
+	 */
+	isOverride?: boolean | null;
+	/**
+	 * @type string
+	 */
+	modelName: string;
+	/**
+	 * @type array
+	 * @nullable true
+	 */
+	modelPattern: string[] | null;
+	pricing: LlmpricingruletypesLLMRulePricingDTO;
+	/**
+	 * @type string
+	 */
+	provider: string;
+	/**
+	 * @type string
+	 * @nullable true
+	 */
+	sourceId?: string | null;
+	unit: LlmpricingruletypesLLMPricingRuleUnitDTO;
+}
+
+export interface LlmpricingruletypesUpdatableLLMPricingRulesDTO {
+	/**
+	 * @type array
+	 * @nullable true
+	 */
+	rules: LlmpricingruletypesUpdatableLLMPricingRuleDTO[] | null;
+}
+
 export interface MetricsexplorertypesInspectMetricsRequestDTO {
 	/**
 	 * @type integer
@@ -7004,6 +7168,41 @@ export type CreateInvite201 = {
 	status: string;
 };
 
+export type ListLLMPricingRulesParams = {
+	/**
+	 * @type integer
+	 * @description undefined
+	 */
+	offset?: number;
+	/**
+	 * @type integer
+	 * @description undefined
+	 */
+	limit?: number;
+};
+
+export type ListLLMPricingRules200 = {
+	data: LlmpricingruletypesGettablePricingRulesDTO;
+	/**
+	 * @type string
+	 */
+	status: string;
+};
+
+export type DeleteLLMPricingRulePathParameters = {
+	id: string;
+};
+export type GetLLMPricingRulePathParameters = {
+	id: string;
+};
+export type GetLLMPricingRule200 = {
+	data: LlmpricingruletypesLLMPricingRuleDTO;
+	/**
+	 * @type string
+	 */
+	status: string;
+};
+
 export type ListPromotedAndIndexedPaths200 = {
 	/**
 	 * @type array

frontend/src/components/CodeBlock/CodeBlock.module.scss

@@ -0,0 +1,22 @@
+.codeBlock {
+	position: relative;
+}
+
+.codeBlockSyntaxHighlighter {
+	background-color: var(--l2-background) !important;
+	border-radius: 4px !important;
+	border: 1px solid var(--l2-border) !important;
+	color: var(--l2-foreground) !important;
+
+	pre {
+		color: var(--l2-foreground) !important;
+		font-family: 'Geist Mono' !important;
+		font-size: 12px !important;
+	}
+
+	code {
+		color: var(--l1-foreground) !important;
+		font-family: 'Geist Mono' !important;
+		font-size: 12px !important;
+	}
+}

frontend/src/components/CodeBlock/CodeBlock.test.tsx

@@ -0,0 +1,46 @@
+import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+
+import CodeBlock from './CodeBlock';
+
+const mockCopyToClipboard = jest.fn();
+
+jest.mock('react-use', () => ({
+	useCopyToClipboard: (): [unknown, (text: string) => void] => [
+		undefined,
+		mockCopyToClipboard,
+	],
+}));
+
+describe('CodeBlock', () => {
+	beforeEach(() => {
+		mockCopyToClipboard.mockReset();
+	});
+
+	it('renders code block mode by default', () => {
+		render(<CodeBlock code={'const x = 1;\n'} language="javascript" />);
+
+		const container = screen.getByTestId('code-block-container');
+		expect(container).toBeInTheDocument();
+		expect(container).toHaveTextContent('const x = 1;');
+	});
+
+	it('renders inline code when inline is true', () => {
+		render(<CodeBlock code="inline value" inline />);
+
+		const inlineCode = screen.getByText('inline value');
+		expect(inlineCode.tagName.toLowerCase()).toBe('code');
+		expect(screen.queryByTestId('code-block-container')).not.toBeInTheDocument();
+	});
+
+	it('copies code and triggers callback', async () => {
+		const onCopy = jest.fn();
+		render(<CodeBlock code="SELECT * FROM logs;" onCopy={onCopy} />);
+
+		fireEvent.click(screen.getByRole('button', { name: /copy code/i }));
+
+		await waitFor(() => {
+			expect(mockCopyToClipboard).toHaveBeenCalledWith('SELECT * FROM logs;');
+		});
+		expect(onCopy).toHaveBeenCalledWith('SELECT * FROM logs;');
+	});
+});

frontend/src/components/CodeBlock/CodeBlock.tsx

@@ -0,0 +1,89 @@
+import { useMemo, useState } from 'react';
+import { useCopyToClipboard } from 'react-use';
+import { Check, Copy } from '@signozhq/icons';
+import { Button } from '@signozhq/ui';
+import SyntaxHighlighter, {
+	a11yDark,
+} from 'components/MarkdownRenderer/syntaxHighlighter';
+
+import styles from './CodeBlock.module.scss';
+
+export interface CodeBlockProps {
+	code: string;
+	language?: string;
+	className?: string;
+	inline?: boolean;
+	showLineNumbers?: boolean;
+	showCopyButton?: boolean;
+	onCopy?: (copiedCode: string) => void;
+}
+
+function CodeBlock({
+	code,
+	language = 'text',
+	className,
+	inline = false,
+	showLineNumbers = false,
+	showCopyButton = true,
+	onCopy,
+}: CodeBlockProps): JSX.Element {
+	const [isCopied, setIsCopied] = useState(false);
+	const [, copyToClipboard] = useCopyToClipboard();
+	const normalizedCode = useMemo(() => code?.replace(/\n$/, '') ?? '', [code]);
+
+	const handleCopy = (): void => {
+		copyToClipboard(normalizedCode);
+		setIsCopied(true);
+		onCopy?.(normalizedCode);
+
+		setTimeout(() => {
+			setIsCopied(false);
+		}, 1000);
+	};
+
+	if (inline) {
+		return <code className={className}>{normalizedCode}</code>;
+	}
+
+	return (
+		<div
+			className={`${styles.codeBlock} ${className}`}
+			style={{ position: 'relative' }}
+			data-testid="code-block-container"
+		>
+			{showCopyButton ? (
+				<Button
+					variant="ghost"
+					color="secondary"
+					size="sm"
+					onClick={handleCopy}
+					prefix={isCopied ? <Check size={14} /> : <Copy size={14} />}
+					aria-label="Copy code"
+					title={isCopied ? 'Copied' : 'Copy'}
+					style={{ position: 'absolute', right: 8, top: 8, zIndex: 1 }}
+				/>
+			) : null}
+			<SyntaxHighlighter
+				style={a11yDark}
+				language={language}
+				PreTag="div"
+				showLineNumbers={showLineNumbers}
+				wrapLongLines
+				className={styles.codeBlockSyntaxHighlighter}
+			>
+				{normalizedCode}
+			</SyntaxHighlighter>
+		</div>
+	);
+}
+
+CodeBlock.defaultProps = {
+	language: 'text',
+	className: undefined,
+	inline: false,
+	showLineNumbers: false,
+	showCopyButton: true,
+	onCopy: undefined,
+};
+
+export default CodeBlock;

frontend/src/components/EditMemberDrawer/DeleteMemberDialog.tsx

@@ -46,6 +46,7 @@ function DeleteMemberDialog({
 				color="destructive"
 				disabled={isDeleting}
 				onClick={onConfirm}
+				loading={isDeleting}
 			>
 				<Trash2 size={12} />
 				{isDeleting ? 'Processing...' : title}
@@ -63,7 +64,6 @@ function DeleteMemberDialog({
 			}}
 			title={title}
 			width="narrow"
-			className="alert-dialog delete-dialog"
 			showCloseButton={false}
 			disableOutsideClick={false}
 			footer={footer}

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

@@ -28,18 +28,6 @@
 		cursor: default;
 	}
 
-	&__input {
-		height: 32px;
-		background: var(--l2-background);
-		border-color: var(--l1-border);
-		color: var(--l1-foreground);
-		box-shadow: none;
-
-		&::placeholder {
-			color: var(--l3-foreground);
-		}
-	}
-
 	&__input-wrapper {
 		display: flex;
 		align-items: center;
@@ -48,7 +36,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);
 		box-sizing: border-box;
 
 		&--disabled {
@@ -65,8 +53,8 @@
 	}
 
 	&__email-text {
-		font-size: var(--font-size-sm);
-		font-weight: var(--font-weight-normal);
+		font-size: var(--paragraph-base-400-font-size);
+		font-weight: var(--paragraph-base-400-font-weight);
 		color: var(--foreground);
 		line-height: var(--line-height-18);
 		letter-spacing: -0.07px;
@@ -178,36 +166,6 @@
 	}
 }
 
-.delete-dialog {
-	background: var(--l2-background);
-	border: 1px solid var(--l1-border);
-
-	[data-slot='dialog-title'] {
-		color: var(--l1-foreground);
-	}
-
-	&__body {
-		font-size: var(--paragraph-base-400-font-size);
-		font-weight: var(--paragraph-base-400-font-weight);
-		color: var(--l2-foreground);
-		line-height: var(--paragraph-base-400-line-height);
-		letter-spacing: -0.065px;
-		margin: 0;
-
-		strong {
-			font-weight: var(--font-weight-medium);
-			color: var(--l1-foreground);
-		}
-	}
-
-	&__footer {
-		display: flex;
-		justify-content: flex-end;
-		gap: var(--spacing-4);
-		margin-top: var(--margin-6);
-	}
-}
-
 .reset-link-dialog {
 	background: var(--l2-background);
 	border: 1px solid var(--l1-border);
@@ -264,13 +222,6 @@
 	}
 
 	&__copy-btn {
-		flex-shrink: 0;
-		height: 32px;
-		border-radius: 0 2px 2px 0;
-		border-top: none;
-		border-right: none;
-		border-bottom: none;
 		border-left: 1px solid var(--l1-border);
-		min-width: 64px;
 	}
 }

frontend/src/components/EditMemberDrawer/EditMemberDrawer.tsx

@@ -224,7 +224,7 @@ function EditMemberDrawer({
 				try {
 					await rawRetry();
 					setSaveErrors((prev) => prev.filter((e) => e.context !== context));
-					refetchUser();
+					void refetchUser();
 				} catch (err) {
 					setSaveErrors((prev) =>
 						prev.map((e) =>
@@ -250,7 +250,7 @@ function EditMemberDrawer({
 				});
 			}
 			setSaveErrors((prev) => prev.filter((e) => e.context !== 'Name update'));
-			refetchUser();
+			void refetchUser();
 		} catch (err) {
 			setSaveErrors((prev) =>
 				prev.map((e) =>
@@ -319,7 +319,7 @@ function EditMemberDrawer({
 								}),
 							];
 						});
-						refetchUser();
+						void refetchUser();
 					},
 				});
 			} else {
@@ -340,7 +340,7 @@ function EditMemberDrawer({
 				onComplete();
 			}
 
-			refetchUser();
+			void refetchUser();
 		} finally {
 			setIsSaving(false);
 		}
@@ -465,7 +465,6 @@ function EditMemberDrawer({
 								prev.filter((err) => err.context !== 'Name update'),
 							);
 						}}
-						className="edit-member-drawer__input"
 						placeholder="Enter name"
 						disabled={isRootUser || isDeleted}
 					/>
@@ -631,7 +630,7 @@ function EditMemberDrawer({
 					</div>
 
 					<div className="edit-member-drawer__footer-right">
-						<Button variant="solid" color="secondary" onClick={handleClose}>
+						<Button variant="outlined" color="secondary" onClick={handleClose}>
 							<X size={14} />
 							Cancel
 						</Button>
@@ -641,6 +640,7 @@ function EditMemberDrawer({
 							color="primary"
 							disabled={!isDirty || isSaving || isRootUser}
 							onClick={handleSave}
+							loading={isSaving}
 						>
 							{isSaving ? 'Saving...' : 'Save Member Details'}
 						</Button>

frontend/src/components/EditMemberDrawer/ResetLinkDialog.tsx

@@ -44,9 +44,8 @@ function ResetLinkDialog({
 						<span className="reset-link-dialog__link-text">{resetLink}</span>
 					</div>
 					<Button
-						variant="outlined"
+						variant="link"
 						color="secondary"
-						size="sm"
 						onClick={onCopy}
 						prefix={hasCopied ? <Check size={12} /> : <Copy size={12} />}
 						className="reset-link-dialog__copy-btn"

frontend/src/components/InviteMembersModal/InviteMembersModal.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { Style } from '@signozhq/design-tokens';
-import { ChevronDown, CircleAlert, Plus, Trash2, X } from '@signozhq/icons';
+import { ChevronDown, Plus, Trash2, X } from '@signozhq/icons';
 import {
 	Button,
 	Callout,
@@ -294,10 +294,8 @@ function InviteMembersModal({
 							type="error"
 							size="small"
 							showIcon
-							icon={<CircleAlert size={12} />}
-						>
-							{getValidationErrorMessage()}
-						</Callout>
+							title={getValidationErrorMessage()}
+						/>
 					</div>
 				)}
 			</div>

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

@@ -87,7 +87,7 @@
 
 			input {
 				color: var(--l1-foreground);
-				font-size: var(--font-size-sm);
+				font-size: var(--font-size-xs);
 			}
 
 			.ant-picker-suffix {
@@ -126,12 +126,6 @@
 	}
 
 	&__copy-btn {
-		flex-shrink: 0;
-		height: 32px;
-		border-radius: 0 2px 2px 0;
-		border-top: none;
-		border-right: none;
-		border-bottom: none;
 		border-left: 1px solid var(--l1-border);
 		min-width: 40px;
 	}
@@ -152,6 +146,7 @@
 		color: var(--foreground);
 		letter-spacing: 0.48px;
 		text-transform: uppercase;
+		margin-bottom: var(--spacing-4);
 	}
 
 	&__footer {

frontend/src/components/ServiceAccountDrawer/AddKeyModal/KeyCreatedPhase.tsx

@@ -22,9 +22,8 @@ function KeyCreatedPhase({
 				<div className="add-key-modal__key-display">
 					<span className="add-key-modal__key-text">{createdKey.key}</span>
 					<Button
-						variant="outlined"
+						variant="link"
 						color="secondary"
-						size="sm"
 						onClick={onCopy}
 						className="add-key-modal__copy-btn"
 					>

frontend/src/components/ServiceAccountDrawer/AddKeyModal/KeyFormPhase.tsx

@@ -106,7 +106,7 @@ function KeyFormPhase({
 
 			<div className="add-key-modal__footer">
 				<div className="add-key-modal__footer-right">
-					<Button variant="solid" color="secondary" size="sm" onClick={onClose}>
+					<Button variant="solid" color="secondary" onClick={onClose}>
 						Cancel
 					</Button>
 					<Button
@@ -115,7 +115,6 @@ function KeyFormPhase({
 						form={FORM_ID}
 						variant="solid"
 						color="primary"
-						size="sm"
 						loading={isSubmitting}
 						disabled={!isValid}
 					>

frontend/src/components/ServiceAccountDrawer/EditKeyModal/EditKeyForm.tsx

@@ -136,7 +136,7 @@ function EditKeyForm({
 			</form>
 
 			<div className="edit-key-modal__footer">
-				<Button variant="ghost" color="destructive" onClick={onRevokeClick}>
+				<Button variant="link" color="destructive" onClick={onRevokeClick}>
 					<Trash2 size={12} />
 					Revoke Key
 				</Button>

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

@@ -119,7 +119,7 @@
 
 			input {
 				color: var(--l1-foreground);
-				font-size: 13px;
+				font-size: var(--font-size-xs);
 			}
 
 			.ant-picker-suffix {

frontend/src/components/ServiceAccountDrawer/EditKeyModal/index.tsx

@@ -20,7 +20,7 @@ import { useErrorModal } from 'providers/ErrorModalProvider';
 import { useTimezone } from 'providers/Timezone';
 import APIError from 'types/api/error';
 
-import { RevokeKeyContent } from '../RevokeKeyModal';
+import { RevokeKeyFooter } from '../RevokeKeyModal';
 import EditKeyForm from './EditKeyForm';
 import type { FormValues } from './types';
 import { DEFAULT_FORM_VALUES, ExpiryMode } from './types';
@@ -158,17 +158,25 @@ function EditKeyModal({ keyItem }: EditKeyModalProps): JSX.Element {
 			}
 			width={isRevokeConfirmOpen ? 'narrow' : 'base'}
 			className={
-				isRevokeConfirmOpen ? 'alert-dialog delete-dialog' : 'edit-key-modal'
+				isRevokeConfirmOpen ? 'alert-dialog sa-delete-dialog' : 'edit-key-modal'
 			}
 			showCloseButton={!isRevokeConfirmOpen}
 			disableOutsideClick={isErrorModalVisible}
+			footer={
+				isRevokeConfirmOpen ? (
+					<RevokeKeyFooter
+						isRevoking={isRevoking}
+						onCancel={(): void => setIsRevokeConfirmOpen(false)}
+						onConfirm={handleRevoke}
+					/>
+				) : undefined
+			}
 		>
 			{isRevokeConfirmOpen ? (
-				<RevokeKeyContent
-					isRevoking={isRevoking}
-					onCancel={(): void => setIsRevokeConfirmOpen(false)}
-					onConfirm={handleRevoke}
-				/>
+				<>
+					Revoking this key will permanently invalidate it. Any systems using this
+					key will lose access immediately.
+				</>
 			) : (
 				<EditKeyForm
 					register={register}

frontend/src/components/ServiceAccountDrawer/OverviewTab.tsx

@@ -72,7 +72,6 @@ function OverviewTab({
 						id="sa-name"
 						value={localName}
 						onChange={(e): void => onNameChange(e.target.value)}
-						className="sa-drawer__input"
 						placeholder="Enter name"
 					/>
 				)}

frontend/src/components/ServiceAccountDrawer/RevokeKeyModal.tsx

@@ -17,39 +17,32 @@ import { parseAsString, useQueryState } from 'nuqs';
 import { useErrorModal } from 'providers/ErrorModalProvider';
 import APIError from 'types/api/error';
 
-export interface RevokeKeyContentProps {
+export interface RevokeKeyFooterProps {
 	isRevoking: boolean;
 	onCancel: () => void;
 	onConfirm: () => void;
 }
 
-export function RevokeKeyContent({
+export function RevokeKeyFooter({
 	isRevoking,
 	onCancel,
 	onConfirm,
-}: RevokeKeyContentProps): JSX.Element {
+}: RevokeKeyFooterProps): JSX.Element {
 	return (
 		<>
-			<p className="delete-dialog__body">
-				Revoking this key will permanently invalidate it. Any systems using this key
-				will lose access immediately.
-			</p>
-			<div className="delete-dialog__footer">
-				<Button variant="solid" color="secondary" size="sm" onClick={onCancel}>
-					<X size={12} />
-					Cancel
-				</Button>
-				<Button
-					variant="solid"
-					color="destructive"
-					size="sm"
-					loading={isRevoking}
-					onClick={onConfirm}
-				>
-					<Trash2 size={12} />
-					Revoke Key
-				</Button>
-			</div>
+			<Button variant="solid" color="secondary" onClick={onCancel}>
+				<X size={12} />
+				Cancel
+			</Button>
+			<Button
+				variant="solid"
+				color="destructive"
+				loading={isRevoking}
+				onClick={onConfirm}
+			>
+				<Trash2 size={12} />
+				Revoke Key
+			</Button>
 		</>
 	);
 }
@@ -112,15 +105,19 @@ function RevokeKeyModal(): JSX.Element {
 			}}
 			title={`Revoke ${keyName ?? 'key'}?`}
 			width="narrow"
-			className="alert-dialog delete-dialog"
+			className="alert-dialog sa-delete-dialog"
 			showCloseButton={false}
 			disableOutsideClick={isErrorModalVisible}
+			footer={
+				<RevokeKeyFooter
+					isRevoking={isRevoking}
+					onCancel={handleCancel}
+					onConfirm={handleConfirm}
+				/>
+			}
 		>
-			<RevokeKeyContent
-				isRevoking={isRevoking}
-				onCancel={handleCancel}
-				onConfirm={handleConfirm}
-			/>
+			Revoking this key will permanently invalidate it. Any systems using this key
+			will lose access immediately.
 		</DialogWrapper>
 	);
 }

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

@@ -57,6 +57,8 @@
 				color: var(--l1-foreground);
 			}
 		}
+
+		min-width: 220px;
 	}
 
 	&__tab {
@@ -166,18 +168,6 @@
 		cursor: default;
 	}
 
-	&__input {
-		height: 32px;
-		background: var(--l2-background);
-		border-color: var(--l1-border);
-		color: var(--l1-foreground);
-		box-shadow: none;
-
-		&::placeholder {
-			color: var(--l3-foreground);
-		}
-	}
-
 	&__input-wrapper {
 		display: flex;
 		align-items: center;
@@ -186,7 +176,7 @@
 		padding: 0 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;
@@ -195,8 +185,8 @@
 	}
 
 	&__input-text {
-		font-size: var(--font-size-sm);
-		font-weight: var(--font-weight-normal);
+		font-size: var(--paragraph-base-400-font-size);
+		font-weight: var(--paragraph-base-400-font-weight);
 		color: var(--foreground);
 		line-height: var(--line-height-18);
 		letter-spacing: -0.07px;

frontend/src/components/ServiceAccountDrawer/ServiceAccountDrawer.tsx

@@ -129,7 +129,7 @@ function ServiceAccountDrawer({
 	useEffect(() => {
 		if (account?.id) {
 			setLocalName(account?.name ?? '');
-			setKeysPage(1);
+			void setKeysPage(1);
 		}
 	}, [account?.id, account?.name, setKeysPage]);
 
@@ -176,7 +176,7 @@ function ServiceAccountDrawer({
 		}
 		const maxPage = Math.max(1, Math.ceil(keys.length / PAGE_SIZE));
 		if (keysPage > maxPage) {
-			setKeysPage(maxPage);
+			void setKeysPage(maxPage);
 		}
 	}, [keysLoading, keys.length, keysPage, setKeysPage]);
 
@@ -214,8 +214,8 @@ function ServiceAccountDrawer({
 				data: { name: localName },
 			});
 			setSaveErrors((prev) => prev.filter((e) => e.context !== 'Name update'));
-			refetchAccount();
-			queryClient.invalidateQueries(getListServiceAccountsQueryKey());
+			void refetchAccount();
+			void queryClient.invalidateQueries(getListServiceAccountsQueryKey());
 		} catch (err) {
 			setSaveErrors((prev) =>
 				prev.map((e) =>
@@ -337,8 +337,8 @@ function ServiceAccountDrawer({
 				onSuccess({ closeDrawer: false });
 			}
 
-			refetchAccount();
-			queryClient.invalidateQueries(getListServiceAccountsQueryKey());
+			void refetchAccount();
+			void queryClient.invalidateQueries(getListServiceAccountsQueryKey());
 		} finally {
 			setIsSaving(false);
 		}
@@ -357,12 +357,12 @@ function ServiceAccountDrawer({
 	]);
 
 	const handleClose = useCallback((): void => {
-		setIsDeleteOpen(null);
-		setIsAddKeyOpen(null);
-		setSelectedAccountId(null);
-		setActiveTab(null);
-		setKeysPage(null);
-		setEditKeyId(null);
+		void setIsDeleteOpen(null);
+		void setIsAddKeyOpen(null);
+		void setSelectedAccountId(null);
+		void setActiveTab(null);
+		void setKeysPage(null);
+		void setEditKeyId(null);
 		setSaveErrors([]);
 	}, [
 		setSelectedAccountId,
@@ -379,12 +379,13 @@ function ServiceAccountDrawer({
 				<ToggleGroup
 					type="single"
 					value={activeTab}
+					size="sm"
 					onChange={(val): void => {
 						if (val) {
-							setActiveTab(val as ServiceAccountDrawerTab);
+							void setActiveTab(val as ServiceAccountDrawerTab);
 							if (val !== ServiceAccountDrawerTab.Keys) {
-								setKeysPage(null);
-								setEditKeyId(null);
+								void setKeysPage(null);
+								void setEditKeyId(null);
 							}
 						}
 					}}
@@ -415,7 +416,7 @@ function ServiceAccountDrawer({
 						color="secondary"
 						disabled={isDeleted}
 						onClick={(): void => {
-							setIsAddKeyOpen(true);
+							void setIsAddKeyOpen(true);
 						}}
 					>
 						<Plus size={12} />
@@ -503,7 +504,7 @@ function ServiceAccountDrawer({
 							variant="link"
 							color="destructive"
 							onClick={(): void => {
-								setIsDeleteOpen(true);
+								void setIsDeleteOpen(true);
 							}}
 						>
 							<Trash2 size={12} />
@@ -512,7 +513,7 @@ function ServiceAccountDrawer({
 					)}
 					{!isDeleted && (
 						<div className="sa-drawer__footer-right">
-							<Button variant="solid" color="secondary" onClick={handleClose}>
+							<Button variant="outlined" color="secondary" onClick={handleClose}>
 								<X size={14} />
 								Cancel
 							</Button>

frontend/src/container/CustomDomainSettings/CustomDomainSettings.styles.scss

@@ -78,6 +78,7 @@
 		display: flex;
 		align-items: center;
 		gap: var(--spacing-10);
+		padding-left: 18px;
 	}
 
 	.custom-domain-card-meta-row.workspace-name-hidden {
@@ -124,30 +125,6 @@
 	}
 }
 
-.workspace-url-trigger {
-	display: inline-flex;
-	align-items: center;
-	gap: var(--spacing-3);
-	background: none;
-	border: none;
-	padding: 0;
-	cursor: pointer;
-	color: var(--l1-foreground);
-	font-size: var(--font-size-xs);
-	line-height: var(--line-height-18);
-	letter-spacing: -0.06px;
-
-	&:disabled {
-		opacity: 0.5;
-		cursor: not-allowed;
-	}
-
-	svg {
-		flex-shrink: 0;
-		color: var(--l2-foreground);
-	}
-}
-
 .workspace-url-dropdown {
 	border-radius: 4px;
 	border: 1px solid var(--l1-border);

frontend/src/container/CustomDomainSettings/CustomDomainSettings.tsx

@@ -204,6 +204,7 @@ export default function CustomDomainSettings(): JSX.Element {
 					>
 						<Dropdown
 							trigger={['click']}
+							disabled={isFetchingHosts}
 							dropdownRender={(): JSX.Element => (
 								<div className="workspace-url-dropdown">
 									<span className="workspace-url-dropdown-header">
@@ -239,12 +240,7 @@ export default function CustomDomainSettings(): JSX.Element {
 								</div>
 							)}
 						>
-							<Button
-								className="workspace-url-trigger"
-								disabled={isFetchingHosts}
-								variant="link"
-								color="none"
-							>
+							<Button variant="link" color="none">
 								<Link2 size={12} />
 								<span>{stripProtocol(activeHost?.url ?? '')}</span>
 								<ChevronDown size={12} />

frontend/src/container/DashboardContainer/visualization/hooks/usePanelContextMenu.ts

@@ -104,7 +104,12 @@ export const usePanelContextMenu = ({
 			}
 
 			if (data && data?.record?.queryName) {
-				onClick(data.coord, { ...data.record, label: data.label, timeRange });
+				onClick(data.coord, {
+					...data.record,
+					label: data.label,
+					seriesColor: data.seriesColor,
+					timeRange,
+				});
 			}
 		},
 		[onClick, queryResponse],

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

@@ -14,6 +14,7 @@ import { usePanelContextMenu } from '../../hooks/usePanelContextMenu';
 import { prepareBarPanelConfig, prepareBarPanelData } from './utils';
 
 import '../Panel.styles.scss';
+import get from 'lodash/get';
 
 function BarPanel(props: PanelWrapperProps): JSX.Element {
 	const {
@@ -114,7 +115,7 @@ function BarPanel(props: PanelWrapperProps): JSX.Element {
 	}, []);
 
 	const groupBy = useMemo(() => {
-		return widget.query.builder.queryData[0].groupBy;
+		return get(widget, 'query.builder.queryData[0].groupBy', []);
 	}, [widget.query]);
 
 	return (

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

@@ -10,6 +10,7 @@ import { ContextMenu } from 'periscope/components/ContextMenu';
 import { useTimezone } from 'providers/Timezone';
 import uPlot from 'uplot';
 import { getTimeRange } from 'utils/getTimeRange';
+import get from 'lodash/get';
 
 import { prepareChartData, prepareUPlotConfig } from '../TimeSeriesPanel/utils';
 
@@ -105,7 +106,7 @@ function TimeSeriesPanel(props: PanelWrapperProps): JSX.Element {
 	]);
 
 	const groupBy = useMemo(() => {
-		return widget.query.builder.queryData[0].groupBy;
+		return get(widget, 'query.builder.queryData[0].groupBy', []);
 	}, [widget.query]);
 
 	return (

frontend/src/container/Integrations/CloudIntegration/AlertMessage.tsx

@@ -1,8 +1,8 @@
-import { Color } from '@signozhq/design-tokens';
-import { Alert, Spin } from 'antd';
-import { LoaderCircle, TriangleAlert } from 'lucide-react';
+import { Callout } from '@signozhq/ui';
+import { Spin } from 'antd';
+import { LoaderCircle } from 'lucide-react';
 
-import { ModalStateEnum } from '../types';
+import { ModalStateEnum } from '../HeroSection/types';
 
 function AlertMessage({
 	modalState,
@@ -12,14 +12,13 @@ function AlertMessage({
 	switch (modalState) {
 		case ModalStateEnum.WAITING:
 			return (
-				<Alert
-					message={
+				<Callout
+					title={
 						<div className="cloud-account-setup-form__alert-message">
 							<Spin
 								indicator={
 									<LoaderCircle
 										size={14}
-										color={Color.BG_AMBER_400}
 										className="anticon anticon-loading anticon-spin ant-spin-dot"
 									/>
 								}
@@ -28,21 +27,19 @@ function AlertMessage({
 							<span className="retry-time">10</span> secs...
 						</div>
 					}
-					className="cloud-account-setup-form__alert"
-					type="warning"
+					type="info"
+					showIcon={false}
 				/>
 			);
 		case ModalStateEnum.ERROR:
 			return (
-				<Alert
-					message={
+				<Callout
+					title={
 						<div className="cloud-account-setup-form__alert-message">
-							<TriangleAlert type="solid" size={15} color={Color.BG_SAKURA_400} />
 							{`We couldn't establish a connection to your AWS account. Please try again`}
 						</div>
 					}
 					type="error"
-					className="cloud-account-setup-form__alert"
 				/>
 			);
 		default:

frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/AccountActions/AccountActions.style.scss

@@ -117,6 +117,12 @@
 		min-width: 140px !important;
 	}
 
+	&.azure {
+		.ant-select-selector {
+			min-width: 282px !important;
+		}
+	}
+
 	.ant-select-item-option-active {
 		background: var(--l3-background) !important;
 	}

frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/AccountActions/AccountActions.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from 'react';
+import { Dispatch, SetStateAction, useEffect, useMemo, useState } from 'react';
 import { useNavigate } from 'react-router-dom-v5-compat';
 import { Color } from '@signozhq/design-tokens';
 import { Button } from '@signozhq/ui';
@@ -6,19 +6,29 @@ import { Select, Skeleton } from 'antd';
 import { SelectProps } from 'antd/lib';
 import logEvent from 'api/common/logEvent';
 import { useListAccounts } from 'api/generated/services/cloudintegration';
+import cx from 'classnames';
 import { getAccountById } from 'container/Integrations/CloudIntegration/utils';
-import { INTEGRATION_TYPES } from 'container/Integrations/constants';
+import {
+	CloudAccount as IntegrationCloudAccount,
+	IntegrationType,
+} from 'container/Integrations/types';
 import useUrlQuery from 'hooks/useUrlQuery';
 import { ChevronDown, Dot, PencilLine, Plug, Plus } from 'lucide-react';
 
-import { mapAccountDtoToAwsCloudAccount } from '../../mapAwsCloudAccountFromDto';
-import { CloudAccount } from '../../types';
-import AccountSettingsModal from './AccountSettingsModal';
-import CloudAccountSetupModal from './CloudAccountSetupModal';
+import AzureCloudAccountSetupModal from '../../AzureCloudServices/AddNewAccount/CloudAccountSetupModal';
+import AzureAccountSettingsModal from '../../AzureCloudServices/EditAccount/AccountSettingsModal';
+import {
+	mapAccountDtoToAwsCloudAccount,
+	mapAccountDtoToAzureCloudAccount,
+} from '../../mapCloudAccountFromDto';
+import AwsCloudAccountSetupModal from '../AddNewAccount/CloudAccountSetupModal';
+import AwsAccountSettingsModal from '../EditAccount/AccountSettingsModal';
+import { CloudAccount as AwsCloudAccount } from '../types';
 
 import './AccountActions.style.scss';
 
 function AccountActionsRenderer({
+	type,
 	accounts,
 	isLoading,
 	activeAccount,
@@ -27,9 +37,10 @@ function AccountActionsRenderer({
 	onIntegrationModalOpen,
 	onAccountSettingsModalOpen,
 }: {
-	accounts: CloudAccount[] | undefined;
+	type: IntegrationType;
+	accounts: IntegrationCloudAccount[] | undefined;
 	isLoading: boolean;
-	activeAccount: CloudAccount | null;
+	activeAccount: IntegrationCloudAccount | null;
 	selectOptions: SelectProps['options'];
 	onAccountChange: (value: string) => void;
 	onIntegrationModalOpen: () => void;
@@ -57,9 +68,11 @@ function AccountActionsRenderer({
 						<Select
 							value={activeAccount?.providerAccountId}
 							options={selectOptions}
-							rootClassName="cloud-account-selector"
+							rootClassName={cx('cloud-account-selector', {
+								[type.toLowerCase()]: type,
+							})}
 							popupMatchSelectWidth={false}
-							placeholder="Select AWS Account"
+							placeholder={`Select ${type} Account`}
 							suffixIcon={<ChevronDown size={16} color={Color.BG_VANILLA_400} />}
 							onChange={onAccountChange}
 						/>
@@ -102,21 +115,49 @@ function AccountActionsRenderer({
 	);
 }
 
-function AccountActions(): JSX.Element {
+function AccountActions({ type }: { type: IntegrationType }): JSX.Element {
 	const urlQuery = useUrlQuery();
 	const navigate = useNavigate();
+
 	const { data: listAccountsResponse, isLoading } = useListAccounts({
-		cloudProvider: INTEGRATION_TYPES.AWS,
+		cloudProvider: type,
 	});
-	const accounts = useMemo((): CloudAccount[] | undefined => {
+
+	const accounts = useMemo((): IntegrationCloudAccount[] | undefined => {
 		const raw = listAccountsResponse?.data?.accounts;
+
 		if (!raw) {
 			return undefined;
 		}
-		return raw
-			.map(mapAccountDtoToAwsCloudAccount)
-			.filter((account): account is CloudAccount => account !== null);
-	}, [listAccountsResponse]);
+
+		const mappedAccounts: IntegrationCloudAccount[] = [];
+
+		if (type === IntegrationType.AWS_SERVICES) {
+			raw.forEach((account) => {
+				if (!account) {
+					return;
+				}
+				const mapped = mapAccountDtoToAwsCloudAccount(account);
+				if (mapped) {
+					mappedAccounts.push(mapped);
+				}
+			});
+		}
+
+		if (type === IntegrationType.AZURE_SERVICES) {
+			raw.forEach((account) => {
+				if (!account) {
+					return;
+				}
+				const mapped = mapAccountDtoToAzureCloudAccount(account);
+				if (mapped) {
+					mappedAccounts.push(mapped);
+				}
+			});
+		}
+
+		return mappedAccounts;
+	}, [listAccountsResponse, type]);
 
 	const initialAccount = useMemo(
 		() =>
@@ -127,9 +168,8 @@ function AccountActions(): JSX.Element {
 		[accounts, urlQuery],
 	);
 
-	const [activeAccount, setActiveAccount] = useState<CloudAccount | null>(
-		initialAccount,
-	);
+	const [activeAccount, setActiveAccount] =
+		useState<IntegrationCloudAccount | null>(initialAccount);
 
 	// Update state when initial value changes
 	useEffect(() => {
@@ -149,16 +189,17 @@ function AccountActions(): JSX.Element {
 	}, [initialAccount]);
 
 	const [isIntegrationModalOpen, setIsIntegrationModalOpen] = useState(false);
+
 	const startAccountConnectionAttempt = (): void => {
 		setIsIntegrationModalOpen(true);
-		logEvent('AWS Integration: Account connection attempt started', {});
+		logEvent(`${type} Integration: Account connection attempt started`, {});
 	};
 
 	const [isAccountSettingsModalOpen, setIsAccountSettingsModalOpen] =
 		useState(false);
 	const openAccountSettings = (): void => {
 		setIsAccountSettingsModalOpen(true);
-		logEvent('AWS Integration: Account settings viewed', {
+		logEvent(`${type} Integration: Account settings viewed`, {
 			cloudAccountId: activeAccount?.cloud_account_id,
 		});
 	};
@@ -166,13 +207,16 @@ function AccountActions(): JSX.Element {
 	// log telemetry event when an account is viewed.
 	useEffect(() => {
 		if (activeAccount) {
-			logEvent('AWS Integration: Account viewed', {
+			logEvent(`${type} Integration: Account viewed`, {
 				cloudAccountId: activeAccount?.cloud_account_id,
 				status: activeAccount?.status,
-				enabledRegions: activeAccount?.config?.regions,
+				enabledRegions:
+					'regions' in activeAccount.config
+						? activeAccount.config.regions
+						: activeAccount.config.resource_groups,
 			});
 		}
-	}, [activeAccount]);
+	}, [activeAccount, type]);
 
 	const selectOptions: SelectProps['options'] = useMemo(
 		() =>
@@ -188,6 +232,7 @@ function AccountActions(): JSX.Element {
 	return (
 		<div className="hero-section__actions">
 			<AccountActionsRenderer
+				type={type}
 				accounts={accounts}
 				isLoading={isLoading}
 				activeAccount={activeAccount}
@@ -204,17 +249,39 @@ function AccountActions(): JSX.Element {
 			/>
 
 			{isIntegrationModalOpen && (
-				<CloudAccountSetupModal
-					onClose={(): void => setIsIntegrationModalOpen(false)}
-				/>
+				<>
+					{type === IntegrationType.AWS_SERVICES && (
+						<AwsCloudAccountSetupModal
+							onClose={(): void => setIsIntegrationModalOpen(false)}
+						/>
+					)}
+					{type === IntegrationType.AZURE_SERVICES && (
+						<AzureCloudAccountSetupModal
+							onClose={(): void => setIsIntegrationModalOpen(false)}
+						/>
+					)}
+				</>
 			)}
 
 			{isAccountSettingsModalOpen && activeAccount && (
-				<AccountSettingsModal
-					onClose={(): void => setIsAccountSettingsModalOpen(false)}
-					account={activeAccount}
-					setActiveAccount={setActiveAccount}
-				/>
+				<>
+					{type === IntegrationType.AWS_SERVICES && (
+						<AwsAccountSettingsModal
+							onClose={(): void => setIsAccountSettingsModalOpen(false)}
+							account={activeAccount as AwsCloudAccount}
+							setActiveAccount={
+								setActiveAccount as Dispatch<SetStateAction<AwsCloudAccount | null>>
+							}
+						/>
+					)}
+					{type === IntegrationType.AZURE_SERVICES && (
+						<AzureAccountSettingsModal
+							onClose={(): void => setIsAccountSettingsModalOpen(false)}
+							account={activeAccount}
+							setActiveAccount={setActiveAccount}
+						/>
+					)}
+				</>
 			)}
 		</div>
 	);

frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/AddNewAccount/CloudAccountSetupModal.style.scss

@@ -0,0 +1,346 @@
+.cloud-account-setup-modal {
+	background: var(--l1-background);
+	color: var(--l1-foreground);
+
+	[data-slot='drawer-title'] {
+		color: var(--l1-foreground);
+	}
+
+	> div {
+		display: flex;
+		flex-direction: column;
+		overflow: hidden;
+	}
+
+	&__content {
+		flex: 1;
+		overflow-y: auto;
+		min-height: 0;
+		scrollbar-width: thin;
+		padding-right: 16px;
+
+		&::-webkit-scrollbar-thumb {
+			background: var(--l1-border);
+		}
+
+		&::-webkit-scrollbar-track {
+			background: var(--l1-background);
+		}
+
+		scrollbar-width: thin;
+		scrollbar-color: var(--l3-background) var(--l1-background);
+	}
+
+	.cloud-account-setup-prerequisites {
+		display: flex;
+		flex-direction: column;
+		gap: 12px;
+
+		&__title {
+			color: var(--l1-foreground);
+			font-size: 14px;
+			font-weight: 500;
+			line-height: 20px;
+			letter-spacing: -0.07px;
+		}
+
+		&__list {
+			display: flex;
+			flex-direction: column;
+			gap: 8px;
+			list-style: none;
+			padding: 0;
+			margin: 0;
+		}
+
+		&__list-item {
+			color: var(--l2-foreground);
+			font-size: 13px;
+			line-height: 18px;
+			letter-spacing: -0.06px;
+
+			display: flex;
+			align-items: center;
+			gap: 16px;
+
+			&-bullet {
+				color: var(--primary);
+				font-weight: 500;
+			}
+
+			&-text {
+				display: flex;
+				align-items: center;
+				gap: 4px;
+			}
+		}
+
+		&__list-item-highlight {
+			color: var(--l1-foreground);
+			font-weight: 500;
+		}
+	}
+
+	.cloud-account-setup-how-it-works-accordion {
+		display: flex;
+		flex-direction: column;
+		margin: 24px 0;
+
+		&__title {
+			display: flex;
+			align-items: center;
+
+			color: var(--l1-foreground);
+			font-size: 14px;
+			font-weight: 500;
+			line-height: 20px;
+			letter-spacing: -0.07px;
+
+			border-radius: 4px;
+			border: 1px solid var(--l2-border);
+			background: var(--l2-background);
+			padding: 4px 16px 4px 0px;
+
+			&.open {
+				border-bottom-left-radius: 0;
+				border-bottom-right-radius: 0;
+			}
+		}
+
+		&__description {
+			display: flex;
+			flex-direction: column;
+			gap: 16px;
+			padding: 16px;
+			opacity: 0;
+			transform: translateY(-8px);
+			animation: cloud-account-setup-accordion-reveal 220ms ease-out forwards;
+
+			border-radius: 4px;
+
+			border-top: none;
+			border-top-left-radius: 0;
+			border-top-right-radius: 0;
+
+			border: 1px solid var(--l2-border);
+			background: var(--l2-background);
+
+			&-item {
+				display: flex;
+				flex-direction: column;
+				gap: 8px;
+
+				color: var(--l1-foreground);
+				font-size: 13px;
+				line-height: 18px;
+				letter-spacing: -0.06px;
+			}
+
+			@media (prefers-reduced-motion: reduce) {
+				animation: none;
+				opacity: 1;
+				transform: none;
+			}
+		}
+	}
+
+	.cloud-account-setup-form__code-block-tabs {
+		padding: 8px;
+		border-radius: 4px;
+		border: 1px solid var(--l2-border);
+		background: var(--l2-background);
+
+		&-header {
+			display: flex;
+			flex-direction: column;
+			gap: 12px;
+
+			margin-bottom: 12px;
+
+			&-title {
+				color: var(--l1-foreground);
+				font-size: 14px;
+				font-weight: 500;
+				line-height: 20px;
+				letter-spacing: -0.07px;
+			}
+
+			&-description {
+				color: var(--l2-foreground);
+				font-size: 12px;
+				font-weight: 400;
+				line-height: 18px;
+				letter-spacing: -0.06px;
+			}
+		}
+
+		[role='tablist'] {
+			gap: 8px !important;
+		}
+
+		[role='tabpanel'] {
+			padding: 0 !important;
+		}
+
+		[data-slot='tabs-trigger'] {
+			padding: 4px 24px !important;
+			border: none !important;
+			background-color: transparent !important;
+			font-size: 12px !important;
+		}
+	}
+
+	@keyframes cloud-account-setup-accordion-reveal {
+		from {
+			opacity: 0;
+			transform: translateY(-8px);
+		}
+
+		to {
+			opacity: 1;
+			transform: translateY(0);
+		}
+	}
+
+	.account-setup-modal-footer {
+		&__confirm-button {
+			background: var(--primary-background);
+			color: var(--primary-foreground);
+			font-size: 12px;
+			font-weight: 500;
+		}
+		&__confirm-selection-count {
+			font-family: 'Geist Mono';
+		}
+		&__close-button {
+			background: var(--l1-background);
+			border: 1px solid var(--l1-border);
+			border-radius: 2px;
+			color: var(--l1-foreground);
+			font-family: 'Inter';
+			font-size: 12px;
+			font-weight: 500;
+
+			&:hover {
+				border-color: var(--l1-border);
+				color: var(--l1-foreground);
+			}
+		}
+	}
+
+	.cloud-account-setup-form {
+		.disabled {
+			opacity: 0.4;
+		}
+
+		&,
+		&__content {
+			display: flex;
+			flex-direction: column;
+			gap: 24px;
+		}
+
+		&__alert {
+			width: 100%;
+
+			[data-slot='callout'] {
+				width: 100%;
+				box-sizing: border-box;
+			}
+
+			&-message {
+				display: flex;
+				align-items: center;
+				gap: 8px;
+				color: var(--l1-foreground);
+
+				.retry-time {
+					font-family: 'Geist Mono';
+					font-size: 14px;
+					font-weight: 600;
+					line-height: 22px;
+					letter-spacing: -0.07px;
+				}
+			}
+		}
+
+		&__form-group {
+			display: flex;
+			flex-direction: column;
+			gap: 12px;
+		}
+
+		&__title {
+			color: var(--l1-foreground);
+			font-size: 14px;
+			font-weight: 500;
+			line-height: 20px;
+			letter-spacing: -0.07px;
+		}
+		&__description {
+			color: var(--l2-foreground);
+			font-size: 12px;
+			font-weight: 400;
+			line-height: 18px;
+			letter-spacing: -0.06px;
+		}
+		&__select {
+			.ant-select-selection-item {
+				color: var(--l1-foreground);
+				font-size: 14px;
+				line-height: 20px;
+				letter-spacing: -0.07px;
+			}
+		}
+		&__form-item {
+			margin: 0;
+		}
+		&__include-all-regions-switch {
+			display: flex;
+			align-items: center;
+			gap: 10px;
+			color: var(--l2-foreground);
+			font-size: 12px;
+			line-height: 18px;
+			letter-spacing: -0.06px;
+			margin-bottom: 12px;
+			&-label {
+				background-color: transparent;
+				border: none;
+				color: var(--l2-foreground);
+				font-size: 12px;
+				line-height: 18px;
+				letter-spacing: -0.06px;
+				cursor: pointer;
+			}
+		}
+		&__note {
+			padding: 12px;
+			color: var(--callout-primary-description);
+			font-size: 12px;
+			line-height: 22px;
+			letter-spacing: -0.06px;
+			border-radius: 4px;
+			border: 1px solid
+				color-mix(in srgb, var(--primary-background) 10%, transparent);
+			background: color-mix(in srgb, var(--primary-background) 10%, transparent);
+		}
+		&__submit-button {
+			border-radius: 2px;
+			background: var(--primary-background);
+			color: var(--primary-foreground);
+			font-size: 14px;
+			font-weight: 500;
+			line-height: 20px;
+			&-content {
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				gap: 8px;
+			}
+			&:disabled {
+				opacity: 0.4;
+			}
+		}
+	}
+}

frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/AddNewAccount/CloudAccountSetupModal.tsx

@@ -8,8 +8,8 @@ import {
 	ActiveViewEnum,
 	IntegrationModalProps,
 	ModalStateEnum,
-} from '../types';
-import { RegionForm } from './RegionForm';
+} from '../../../HeroSection/types';
+import { RegionForm } from '../RegionForm/RegionForm';
 
 import './CloudAccountSetupModal.style.scss';
 
@@ -74,8 +74,6 @@ function CloudAccountSetupModal({
 		isConnectionParamsLoading,
 		setSelectedRegions,
 		setIncludeAllRegions,
-		isLoading,
-		isGeneratingUrl,
 		handleConnectionSuccess,
 		handleConnectionTimeout,
 		handleConnectionError,

frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/EditAccount/AccountSettingsModal.tsx

@@ -9,10 +9,10 @@ import useUrlQuery from 'hooks/useUrlQuery';
 import history from 'lib/history';
 import { Save } from 'lucide-react';
 
-import logEvent from '../../../../../../api/common/logEvent';
-import { CloudAccount } from '../../types';
-import { RegionSelector } from './RegionSelector';
-import RemoveIntegrationAccount from './RemoveIntegrationAccount';
+import logEvent from '../../../../../api/common/logEvent';
+import RemoveIntegrationAccount from '../../RemoveAccount/RemoveIntegrationAccount';
+import { RegionSelector } from '../RegionForm/RegionSelector';
+import { CloudAccount } from '../types';
 
 import './AccountSettingsModal.style.scss';
 
@@ -110,11 +110,7 @@ function AccountSettingsModal({
 		form,
 		selectedRegions,
 		includeAllRegions,
-		account?.id,
-		handleRemoveIntegrationAccountSuccess,
-		isSaveDisabled,
-		handleSubmit,
-		isLoading,
+		account?.providerAccountId,
 		setSelectedRegions,
 		setIncludeAllRegions,
 	]);
@@ -133,6 +129,7 @@ function AccountSettingsModal({
 			<RemoveIntegrationAccount
 				accountId={account?.id}
 				onRemoveIntegrationAccountSuccess={handleRemoveIntegrationAccountSuccess}
+				cloudProvider={INTEGRATION_TYPES.AWS}
 			/>
 
 			<Button

frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/HeroSection/HeroSection.tsx

@@ -1,28 +0,0 @@
-import awsDarkLogoUrl from '@/assets/Logos/aws-dark.svg';
-
-import AccountActions from './components/AccountActions';
-
-import './HeroSection.style.scss';
-
-function HeroSection(): JSX.Element {
-	return (
-		<div className="hero-section">
-			<div className="hero-section__details">
-				<div className="hero-section__details-header">
-					<div className="hero-section__icon">
-						<img src={awsDarkLogoUrl} alt="AWS" />
-					</div>
-
-					<div className="hero-section__details-title">AWS</div>
-				</div>
-				<div className="hero-section__details-description">
-					AWS is a cloud computing platform that provides a range of services for
-					building and running applications.
-				</div>
-			</div>
-			<AccountActions />
-		</div>
-	);
-}
-
-export default HeroSection;

frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/HeroSection/components/CloudAccountSetupModal.style.scss

@@ -1,180 +0,0 @@
-.cloud-account-setup-modal {
-	background: var(--l1-background);
-	color: var(--l1-foreground);
-
-	[data-slot='drawer-title'] {
-		color: var(--l1-foreground);
-	}
-
-	> div {
-		display: flex;
-		flex-direction: column;
-		overflow: hidden;
-	}
-
-	&__content {
-		flex: 1;
-		overflow-y: auto;
-		min-height: 0;
-		scrollbar-width: thin;
-
-		&::-webkit-scrollbar {
-			width: 2px;
-		}
-	}
-
-	.account-setup-modal-footer {
-		&__confirm-button {
-			background: var(--primary-background);
-			color: var(--primary-foreground);
-			font-size: 12px;
-			font-weight: 500;
-		}
-		&__confirm-selection-count {
-			font-family: 'Geist Mono';
-		}
-		&__close-button {
-			background: var(--l1-background);
-			border: 1px solid var(--l1-border);
-			border-radius: 2px;
-			color: var(--l1-foreground);
-			font-family: 'Inter';
-			font-size: 12px;
-			font-weight: 500;
-
-			&:hover {
-				border-color: var(--l1-border);
-				color: var(--l1-foreground);
-			}
-		}
-	}
-
-	.cloud-account-setup-form {
-		.disabled {
-			opacity: 0.4;
-		}
-
-		&,
-		&__content {
-			display: flex;
-			flex-direction: column;
-			gap: 24px;
-		}
-
-		&__alert {
-			&.ant-alert {
-				padding: 12px;
-				border-radius: 6px;
-				font-size: 14px;
-				line-height: 22px; /* 157.143% */
-				letter-spacing: -0.07px;
-			}
-
-			&.ant-alert-error {
-				color: var(--danger-foreground);
-				border: 1px solid
-					color-mix(in srgb, var(--danger-background) 10%, transparent);
-				background: color-mix(in srgb, var(--danger-background) 10%, transparent);
-			}
-
-			&.ant-alert-warning {
-				color: var(--warning-foreground);
-				border: 1px solid
-					color-mix(in srgb, var(--warning-background) 10%, transparent);
-				background: color-mix(in srgb, var(--warning-background) 10%, transparent);
-			}
-
-			&-message {
-				display: flex;
-				align-items: center;
-				gap: 8px;
-				color: var(--l1-foreground);
-
-				.retry-time {
-					font-family: 'Geist Mono';
-					font-size: 14px;
-					font-weight: 600;
-					line-height: 22px;
-					letter-spacing: -0.07px;
-				}
-			}
-		}
-		&__form-group {
-			display: flex;
-			flex-direction: column;
-			gap: 12px;
-		}
-		&__title {
-			color: var(--l1-foreground);
-			font-size: 14px;
-			font-weight: 500;
-			line-height: 20px;
-			letter-spacing: -0.07px;
-		}
-		&__description {
-			color: var(--l2-foreground);
-			font-size: 12px;
-			font-weight: 400;
-			line-height: 18px;
-			letter-spacing: -0.06px;
-		}
-		&__select {
-			.ant-select-selection-item {
-				color: var(--l1-foreground);
-				font-size: 14px;
-				line-height: 20px;
-				letter-spacing: -0.07px;
-			}
-		}
-		&__form-item {
-			margin: 0;
-		}
-		&__include-all-regions-switch {
-			display: flex;
-			align-items: center;
-			gap: 10px;
-			color: var(--l2-foreground);
-			font-size: 12px;
-			line-height: 18px;
-			letter-spacing: -0.06px;
-			margin-bottom: 12px;
-			&-label {
-				background-color: transparent;
-				border: none;
-				color: var(--l2-foreground);
-				font-size: 12px;
-				line-height: 18px;
-				letter-spacing: -0.06px;
-				cursor: pointer;
-			}
-		}
-		&__note {
-			padding: 12px;
-			color: var(--callout-primary-description);
-			font-size: 12px;
-			line-height: 22px;
-			letter-spacing: -0.06px;
-			border-radius: 4px;
-			border: 1px solid
-				color-mix(in srgb, var(--primary-background) 10%, transparent);
-			background: color-mix(in srgb, var(--primary-background) 10%, transparent);
-		}
-		&__submit-button {
-			border-radius: 2px;
-			background: var(--primary-background);
-			color: var(--primary-foreground);
-			font-size: 14px;
-			font-weight: 500;
-			line-height: 20px;
-			&-content {
-				display: flex;
-				align-items: center;
-				justify-content: center;
-				gap: 8px;
-			}
-			&:disabled {
-				opacity: 0.4;
-			}
-		}
-	}
-}

frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/IntegrateNowFormSections.tsx

@@ -5,7 +5,7 @@ import { ChevronDown } from 'lucide-react';
 import { Region } from 'utils/regions';
 import { popupContainer } from 'utils/selectPopupContainer';
 
-import { RegionSelector } from './RegionSelector';
+import { RegionSelector } from './RegionForm/RegionSelector';
 
 // Form section components
 function RegionDeploymentSection({

frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/RegionForm/RegionForm.tsx

@@ -3,15 +3,18 @@ import { Form } from 'antd';
 import { useGetAccount } from 'api/generated/services/cloudintegration';
 import cx from 'classnames';
 import { INTEGRATION_TYPES } from 'container/Integrations/constants';
+import {
+	ModalStateEnum,
+	RegionFormProps,
+} from 'container/Integrations/HeroSection/types';
 import { regions } from 'utils/regions';
 
-import { ModalStateEnum, RegionFormProps } from '../types';
-import AlertMessage from './AlertMessage';
+import AlertMessage from '../../AlertMessage';
 import {
 	ComplianceNote,
 	MonitoringRegionsSection,
 	RegionDeploymentSection,
-} from './IntegrateNowFormSections';
+} from '../IntegrateNowFormSections';
 import RenderConnectionFields from './RenderConnectionParams';
 
 export function RegionForm({
@@ -76,8 +79,6 @@ export function RegionForm({
 			layout="vertical"
 			onFinish={onSubmit}
 		>
-			<AlertMessage modalState={modalState} />
-
 			<div
 				className={cx(`cloud-account-setup-form__content`, {
 					disabled: isFormDisabled,
@@ -100,6 +101,10 @@ export function RegionForm({
 					isFormDisabled={isFormDisabled}
 				/>
 			</div>
+
+			<div className="cloud-account-setup-form__alert">
+				<AlertMessage modalState={modalState} />
+			</div>
 		</Form>
 	);
 }

frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/S3BucketsSelector/S3BucketsSelector.tsx

@@ -4,7 +4,7 @@ import { useListAccounts } from 'api/generated/services/cloudintegration';
 import { INTEGRATION_TYPES } from 'container/Integrations/constants';
 import useUrlQuery from 'hooks/useUrlQuery';
 
-import { mapAccountDtoToAwsCloudAccount } from '../mapAwsCloudAccountFromDto';
+import { mapAccountDtoToAwsCloudAccount } from '../../mapCloudAccountFromDto';
 import { CloudAccount } from '../types';
 
 import './S3BucketsSelector.styles.scss';

frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/ServiceDetails/ServiceDetails.tsx

@@ -12,14 +12,14 @@ import {
 	useUpdateService,
 } from 'api/generated/services/cloudintegration';
 import {
+	CloudintegrationtypesServiceConfigDTO,
 	CloudintegrationtypesServiceDTO,
 	ListServicesMetadata200,
 } from 'api/generated/services/sigNoz.schemas';
 import CloudServiceDataCollected from 'components/CloudIntegrations/CloudServiceDataCollected/CloudServiceDataCollected';
 import { MarkdownRenderer } from 'components/MarkdownRenderer/MarkdownRenderer';
-import ServiceDashboards from 'container/Integrations/CloudIntegration/AmazonWebServices/ServiceDashboards/ServiceDashboards';
-import { INTEGRATION_TYPES } from 'container/Integrations/constants';
-import { IServiceStatus } from 'container/Integrations/types';
+import ServiceDashboards from 'container/Integrations/CloudIntegration/ServiceDashboards/ServiceDashboards';
+import { IntegrationType, IServiceStatus } from 'container/Integrations/types';
 import useUrlQuery from 'hooks/useUrlQuery';
 import { Save, X } from 'lucide-react';
 
@@ -36,7 +36,81 @@ type ServiceDetailsData = CloudintegrationtypesServiceDTO & {
 	status?: IServiceStatus;
 };
 
-function ServiceDetails(): JSX.Element | null {
+const EMPTY_FORM_VALUES: ServiceConfigFormValues = {
+	logsEnabled: false,
+	metricsEnabled: false,
+	s3BucketsByRegion: {},
+};
+
+function getInitialFormValues(
+	type: IntegrationType,
+	serviceDetailsData?: ServiceDetailsData,
+): ServiceConfigFormValues {
+	const integrationConfig =
+		type === IntegrationType.AWS_SERVICES
+			? serviceDetailsData?.cloudIntegrationService?.config?.aws
+			: serviceDetailsData?.cloudIntegrationService?.config?.azure;
+
+	return {
+		logsEnabled: integrationConfig?.logs?.enabled || false,
+		metricsEnabled: integrationConfig?.metrics?.enabled || false,
+		s3BucketsByRegion:
+			type === IntegrationType.AWS_SERVICES
+				? serviceDetailsData?.cloudIntegrationService?.config?.aws?.logs
+						?.s3Buckets || {}
+				: {},
+	};
+}
+
+function getServiceConfigPayload({
+	type,
+	serviceId,
+	logsEnabled,
+	metricsEnabled,
+	isLogsSupported,
+	isMetricsSupported,
+	s3BucketsByRegion,
+}: {
+	type: IntegrationType;
+	serviceId: string;
+	logsEnabled: boolean;
+	metricsEnabled: boolean;
+	isLogsSupported: boolean;
+	isMetricsSupported: boolean;
+	s3BucketsByRegion: Record<string, string[]>;
+}): CloudintegrationtypesServiceConfigDTO {
+	if (type === IntegrationType.AWS_SERVICES) {
+		return {
+			aws: {
+				logs: {
+					enabled: isLogsSupported ? logsEnabled : false,
+					s3Buckets:
+						serviceId === 's3sync' && isLogsSupported ? s3BucketsByRegion : {},
+				},
+				metrics: {
+					enabled: isMetricsSupported ? metricsEnabled : false,
+				},
+			},
+		};
+	}
+
+	return {
+		azure: {
+			logs: {
+				enabled: isLogsSupported ? logsEnabled : false,
+			},
+			metrics: {
+				enabled: isMetricsSupported ? metricsEnabled : false,
+			},
+		},
+	};
+}
+
+function ServiceDetails({
+	type,
+}: {
+	type: IntegrationType;
+}): JSX.Element | null {
 	const urlQuery = useUrlQuery();
 	const cloudAccountId = urlQuery.get('cloudAccountId');
 	const serviceId = urlQuery.get('service');
@@ -51,7 +125,7 @@ function ServiceDetails(): JSX.Element | null {
 		isLoading: isServiceDetailsLoading,
 	} = useGetService(
 		{
-			cloudProvider: INTEGRATION_TYPES.AWS,
+			cloudProvider: type,
 			serviceId: serviceId || '',
 		},
 		{
@@ -65,10 +139,17 @@ function ServiceDetails(): JSX.Element | null {
 		},
 	);
 
-	const awsConfig = serviceDetailsData?.cloudIntegrationService?.config?.aws;
+	const integrationConfig =
+		type === IntegrationType.AWS_SERVICES
+			? serviceDetailsData?.cloudIntegrationService?.config?.aws
+			: serviceDetailsData?.cloudIntegrationService?.config?.azure;
 	const isServiceEnabledInPersistedConfig =
-		Boolean(awsConfig?.logs?.enabled) || Boolean(awsConfig?.metrics?.enabled);
+		Boolean(integrationConfig?.logs?.enabled) ||
+		Boolean(integrationConfig?.metrics?.enabled);
 	const serviceDetailsId = serviceDetailsData?.id;
+	const isLogsSupported = serviceDetailsData?.supportedSignals?.logs || false;
+	const isMetricsSupported =
+		serviceDetailsData?.supportedSignals?.metrics || false;
 
 	const {
 		control,
@@ -77,43 +158,31 @@ function ServiceDetails(): JSX.Element | null {
 		watch,
 		formState: { isDirty },
 	} = useForm<ServiceConfigFormValues>({
-		defaultValues: {
-			logsEnabled: awsConfig?.logs?.enabled || false,
-			metricsEnabled: awsConfig?.metrics?.enabled || false,
-			s3BucketsByRegion: awsConfig?.logs?.s3Buckets || {},
-		},
+		defaultValues: getInitialFormValues(type, serviceDetailsData),
 	});
 
-	const resetToAwsConfig = useCallback((): void => {
-		reset({
-			logsEnabled: awsConfig?.logs?.enabled || false,
-			metricsEnabled: awsConfig?.metrics?.enabled || false,
-			s3BucketsByRegion: awsConfig?.logs?.s3Buckets || {},
-		});
-	}, [awsConfig, reset]);
+	const resetToConfig = useCallback((): void => {
+		reset(getInitialFormValues(type, serviceDetailsData));
+	}, [reset, serviceDetailsData, type]);
 
 	// Ensure form state does not leak across service switches while new details load.
 	useEffect(() => {
-		reset({
-			logsEnabled: false,
-			metricsEnabled: false,
-			s3BucketsByRegion: {},
-		});
+		reset(EMPTY_FORM_VALUES);
 	}, [reset, serviceId]);
 
 	useEffect(() => {
-		resetToAwsConfig();
-	}, [resetToAwsConfig, serviceDetailsId]);
+		resetToConfig();
+	}, [resetToConfig, serviceDetailsId]);
 
 	// log telemetry event on visiting details of a service.
 	useEffect(() => {
 		if (serviceId) {
-			logEvent('AWS Integration: Service viewed', {
+			logEvent(`${type} Integration: Service viewed`, {
 				cloudAccountId,
 				serviceId,
 			});
 		}
-	}, [cloudAccountId, serviceId]);
+	}, [cloudAccountId, serviceId, type]);
 
 	const { mutate: updateService, isLoading: isUpdatingServiceConfig } =
 		useUpdateService();
@@ -121,8 +190,8 @@ function ServiceDetails(): JSX.Element | null {
 	const queryClient = useQueryClient();
 
 	const handleDiscard = useCallback((): void => {
-		resetToAwsConfig();
-	}, [resetToAwsConfig]);
+		resetToConfig();
+	}, [resetToConfig]);
 
 	const onSubmit = useCallback(
 		async (values: ServiceConfigFormValues): Promise<void> => {
@@ -141,25 +210,25 @@ function ServiceDetails(): JSX.Element | null {
 					return;
 				}
 
+				const serviceConfigPayload = getServiceConfigPayload({
+					type,
+					serviceId,
+					logsEnabled,
+					metricsEnabled,
+					isLogsSupported,
+					isMetricsSupported,
+					s3BucketsByRegion: normalizedS3BucketsByRegion,
+				});
+
 				updateService(
 					{
 						pathParams: {
-							cloudProvider: INTEGRATION_TYPES.AWS,
+							cloudProvider: type,
 							id: cloudAccountId,
 							serviceId,
 						},
 						data: {
-							config: {
-								aws: {
-									logs: {
-										enabled: logsEnabled,
-										s3Buckets: normalizedS3BucketsByRegion,
-									},
-									metrics: {
-										enabled: metricsEnabled,
-									},
-								},
-							},
+							config: serviceConfigPayload,
 						},
 					},
 					{
@@ -170,7 +239,7 @@ function ServiceDetails(): JSX.Element | null {
 
 							const servicesListQueryKey = getListServicesMetadataQueryKey(
 								{
-									cloudProvider: INTEGRATION_TYPES.AWS,
+									cloudProvider: type,
 								},
 								{
 									cloud_integration_id: cloudAccountId,
@@ -203,7 +272,7 @@ function ServiceDetails(): JSX.Element | null {
 							invalidateGetService(
 								queryClient,
 								{
-									cloudProvider: INTEGRATION_TYPES.AWS,
+									cloudProvider: type,
 									serviceId,
 								},
 								{
@@ -214,14 +283,14 @@ function ServiceDetails(): JSX.Element | null {
 							invalidateListServicesMetadata(
 								queryClient,
 								{
-									cloudProvider: INTEGRATION_TYPES.AWS,
+									cloudProvider: type,
 								},
 								{
 									cloud_integration_id: cloudAccountId,
 								},
 							);
 
-							logEvent('AWS Integration: Service settings saved', {
+							logEvent(`${type} Integration: Service settings saved`, {
 								cloudAccountId,
 								serviceId,
 								logsEnabled,
@@ -241,7 +310,16 @@ function ServiceDetails(): JSX.Element | null {
 				console.error('Form submission failed:', error);
 			}
 		},
-		[serviceId, cloudAccountId, updateService, queryClient, reset],
+		[
+			serviceId,
+			cloudAccountId,
+			updateService,
+			queryClient,
+			reset,
+			type,
+			isLogsSupported,
+			isMetricsSupported,
+		],
 	);
 
 	if (isServiceDetailsLoading) {
@@ -262,10 +340,6 @@ function ServiceDetails(): JSX.Element | null {
 		const logsEnabled = watch('logsEnabled');
 		const s3BucketsByRegion = watch('s3BucketsByRegion');
 
-		const isLogsSupported = serviceDetailsData?.supportedSignals?.logs || false;
-		const isMetricsSupported =
-			serviceDetailsData?.supportedSignals?.metrics || false;
-
 		const hasUnsavedChanges = isDirty;
 
 		const isS3SyncBucketsMissing =

frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/ServicesTabs.tsx

@@ -1,29 +0,0 @@
-import useUrlQuery from 'hooks/useUrlQuery';
-
-import HeroSection from './HeroSection/HeroSection';
-import ServiceDetails from './ServiceDetails/ServiceDetails';
-import ServicesList from './ServicesList';
-
-import './ServicesTabs.style.scss';
-
-function ServicesTabs(): JSX.Element {
-	const urlQuery = useUrlQuery();
-	const cloudAccountId = urlQuery.get('cloudAccountId') || '';
-
-	return (
-		<div className="services-tabs">
-			<HeroSection />
-
-			<div className="services-section">
-				<div className="services-section__sidebar">
-					<ServicesList cloudAccountId={cloudAccountId} />
-				</div>
-				<div className="services-section__content">
-					<ServiceDetails />
-				</div>
-			</div>
-		</div>
-	);
-}
-
-export default ServicesTabs;

frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/__tests__/ServiceDetailsS3Sync.test.tsx

@@ -29,7 +29,7 @@ jest.mock('components/MarkdownRenderer/MarkdownRenderer', () => ({
 	MarkdownRenderer: (): JSX.Element => <div data-testid="markdown-renderer" />,
 }));
 jest.mock(
-	'container/Integrations/CloudIntegration/AmazonWebServices/ServiceDashboards/ServiceDashboards',
+	'container/Integrations/CloudIntegration/ServiceDashboards/ServiceDashboards',
 	() => ({
 		__esModule: true,
 		default: (): JSX.Element => <div data-testid="service-dashboards" />,

frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/__tests__/utils.tsx

@@ -1,4 +1,5 @@
 import { render, RenderResult, screen, waitFor } from '@testing-library/react';
+import { IntegrationType } from 'container/Integrations/types';
 import MockQueryClientProvider from 'providers/test/MockQueryClientProvider';
 
 import ServiceDetails from '../ServiceDetails/ServiceDetails';
@@ -11,10 +12,11 @@ import { accountsResponse } from './mockData';
 const renderServiceDetails = (
 	_initialConfigLogsS3Buckets: Record<string, string[]> = {},
 	_serviceId = 's3sync',
+	type: IntegrationType = IntegrationType.AWS_SERVICES,
 ): RenderResult =>
 	render(
 		<MockQueryClientProvider>
-			<ServiceDetails />
+			<ServiceDetails type={type} />
 		</MockQueryClientProvider>,
 	);
 

frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/mapAwsCloudAccountFromDto.ts

@@ -1,25 +0,0 @@
-import { CloudintegrationtypesAccountDTO } from 'api/generated/services/sigNoz.schemas';
-
-import { CloudAccount } from './types';
-
-export function mapAccountDtoToAwsCloudAccount(
-	account: CloudintegrationtypesAccountDTO,
-): CloudAccount | null {
-	if (!account.providerAccountId) {
-		return null;
-	}
-
-	return {
-		id: account.id,
-		cloud_account_id: account.id,
-		config: {
-			regions: account.config?.aws?.regions ?? [],
-		},
-		status: {
-			integration: {
-				last_heartbeat_ts_ms: account.agentReport?.timestampMillis ?? 0,
-			},
-		},
-		providerAccountId: account.providerAccountId,
-	};
-}

frontend/src/container/Integrations/CloudIntegration/AzureCloudServices/AddNewAccount/CloudAccountSetupModal.tsx

@@ -0,0 +1,356 @@
+import { useCallback, useRef, useState } from 'react';
+import { Color } from '@signozhq/design-tokens';
+import { ChevronDown, ChevronRight } from '@signozhq/icons';
+import { Button, Callout, DrawerWrapper, Tabs } from '@signozhq/ui';
+import { Form, Select, Spin } from 'antd';
+import { useGetAccount } from 'api/generated/services/cloudintegration';
+import { CloudintegrationtypesAccountDTO } from 'api/generated/services/sigNoz.schemas';
+import CodeBlock from 'components/CodeBlock/CodeBlock';
+import {
+	AZURE_REGIONS,
+	INTEGRATION_TYPES,
+} from 'container/Integrations/constants';
+import {
+	IntegrationModalProps,
+	ModalStateEnum,
+} from 'container/Integrations/HeroSection/types';
+import { LoaderCircle, SquareArrowOutUpRight } from 'lucide-react';
+import { popupContainer } from 'utils/selectPopupContainer';
+
+import { useIntegrationModal } from '../../../../../hooks/integration/azure/useIntegrationModal';
+import RenderConnectionFields from '../../AmazonWebServices/RegionForm/RenderConnectionParams';
+
+import '../../AmazonWebServices/AddNewAccount/CloudAccountSetupModal.style.scss';
+
+const AZURE_CLI_DESC =
+	'Paste the following command if you have Azure CLI setup locally on your machine or use BASH CloudShell on Azure portal with above mentioned permissions.';
+const AZURE_POWERSHELL_DESC =
+	'Paste the following command in PowerShell CloudShell on Azure portal, you can switch to PowerShell on Azure portal.';
+
+function CloudAccountSetupModal({
+	onClose,
+}: IntegrationModalProps): JSX.Element {
+	const {
+		form,
+		modalState,
+		isLoading,
+		accountId,
+		connectionCommands,
+		handleSubmit,
+		handleClose,
+		connectionParams,
+		isConnectionParamsLoading,
+		handleConnectionSuccess,
+		handleConnectionTimeout,
+		handleConnectionError,
+	} = useIntegrationModal({ onClose });
+
+	const startTimeRef = useRef(Date.now());
+	const refetchInterval = 10 * 1000;
+	const errorTimeout = 10 * 60 * 1000;
+
+	const [isHowItWorksOpen, setIsHowItWorksOpen] = useState(true);
+	const [activeTab, setActiveTab] = useState('cli');
+
+	useGetAccount(
+		{
+			cloudProvider: INTEGRATION_TYPES.AZURE,
+			id: accountId ?? '',
+		},
+		{
+			query: {
+				enabled: Boolean(accountId) && modalState === ModalStateEnum.WAITING,
+				refetchInterval,
+				select: (response): CloudintegrationtypesAccountDTO => response.data,
+				onSuccess: (account) => {
+					const isConnected =
+						Boolean(account.providerAccountId) && account.removedAt === null;
+
+					if (isConnected) {
+						handleConnectionSuccess({
+							cloudAccountId: account.providerAccountId ?? account.id,
+							status: account.agentReport,
+						});
+					} else if (Date.now() - startTimeRef.current >= errorTimeout) {
+						handleConnectionTimeout({ id: accountId });
+					}
+				},
+				onError: () => {
+					handleConnectionError();
+				},
+			},
+		},
+	);
+
+	const renderAlert = useCallback((): JSX.Element | null => {
+		if (modalState === ModalStateEnum.WAITING) {
+			return (
+				<div className="cloud-account-setup-form__alert">
+					<Callout
+						title={
+							<div className="cloud-account-setup-form__alert-message">
+								<Spin
+									indicator={
+										<LoaderCircle
+											size={14}
+											className="anticon anticon-loading anticon-spin ant-spin-dot"
+										/>
+									}
+								/>
+								Waiting for Azure account connection, retrying in{' '}
+								<span className="retry-time">10</span> secs...
+							</div>
+						}
+						type="info"
+						showIcon={false}
+					/>
+				</div>
+			);
+		}
+
+		if (modalState === ModalStateEnum.ERROR) {
+			return (
+				<div className="cloud-account-setup-form__alert">
+					<Callout
+						title={
+							<div className="cloud-account-setup-form__alert-message">
+								We couldn&apos;t establish a connection to your Azure account. Please
+								try again
+							</div>
+						}
+						type="error"
+					/>
+				</div>
+			);
+		}
+
+		return null;
+	}, [modalState]);
+
+	const footer = (
+		<div className="cloud-account-setup-modal__footer">
+			{modalState === ModalStateEnum.FORM && (
+				<Button
+					variant="solid"
+					color="primary"
+					prefix={<SquareArrowOutUpRight size={17} color={Color.BG_VANILLA_100} />}
+					onClick={handleSubmit}
+					loading={isLoading}
+				>
+					Generate Azure Setup Commands
+				</Button>
+			)}
+		</div>
+	);
+
+	return (
+		<DrawerWrapper
+			open={true}
+			className="cloud-account-setup-modal"
+			onOpenChange={(open): void => {
+				if (!open) {
+					handleClose();
+				}
+			}}
+			direction="right"
+			showCloseButton
+			title="Add Azure Account"
+			width="wide"
+			footer={footer}
+		>
+			<div className="cloud-account-setup-modal__content">
+				<div className="cloud-account-setup-prerequisites">
+					<div className="cloud-account-setup-prerequisites__title">
+						Prerequisites
+					</div>
+
+					<ul className="cloud-account-setup-prerequisites__list">
+						<li className="cloud-account-setup-prerequisites__list-item">
+							<span className="cloud-account-setup-prerequisites__list-item-bullet">
+								—
+							</span>{' '}
+							<span className="cloud-account-setup-prerequisites__list-item-text">
+								Ensure that you&apos;re logged in to the Azure workspace which you want
+								to monitor.
+							</span>
+						</li>
+						<li className="cloud-account-setup-prerequisites__list-item">
+							<span className="cloud-account-setup-prerequisites__list-item-bullet">
+								—
+							</span>{' '}
+							<span className="cloud-account-setup-prerequisites__list-item-text">
+								Ensure that you either have the{' '}
+								<span className="cloud-account-setup-prerequisites__list-item-highlight">
+									Owner
+								</span>{' '}
+								role OR
+							</span>
+						</li>
+						<li className="cloud-account-setup-prerequisites__list-item">
+							<span className="cloud-account-setup-prerequisites__list-item-bullet">
+								—
+							</span>{' '}
+							<span className="cloud-account-setup-prerequisites__list-item-text">
+								Both the{' '}
+								<span className="cloud-account-setup-prerequisites__list-item-highlight">
+									Contributor
+								</span>{' '}
+								and{' '}
+								<span className="cloud-account-setup-prerequisites__list-item-highlight">
+									user access admin
+								</span>{' '}
+								roles
+							</span>
+						</li>
+					</ul>
+				</div>
+
+				<div className="cloud-account-setup-how-it-works-accordion">
+					<div
+						className={`cloud-account-setup-how-it-works-accordion__title ${
+							isHowItWorksOpen ? 'open' : ''
+						}`}
+					>
+						<Button
+							variant="link"
+							color="secondary"
+							onClick={(): void => setIsHowItWorksOpen(!isHowItWorksOpen)}
+							prefix={isHowItWorksOpen ? <ChevronDown /> : <ChevronRight />}
+						/>
+
+						<span className="cloud-account-setup-how-it-works-accordion__title-text">
+							How it works?
+						</span>
+					</div>
+					{isHowItWorksOpen && (
+						<div className="cloud-account-setup-how-it-works-accordion__description">
+							<div className="cloud-account-setup-how-it-works-accordion__description-item">
+								SigNoz will create new resource-group to manage the resources required
+								for this integration. The following steps will create a User-Assigned
+								Managed Identity with the necessary permissions and follows the
+								Principle of Least Privilege.
+							</div>
+							<div className="cloud-account-setup-how-it-works__description-item">
+								Once the Integration template is deployed, you can enable the services
+								you want to monitor right here in Signoz dashboard.
+							</div>
+						</div>
+					)}
+				</div>
+
+				<Form
+					form={form}
+					className="cloud-account-setup-form"
+					layout="vertical"
+					initialValues={{ resourceGroups: [] }}
+				>
+					<div className="cloud-account-setup-form__content">
+						<div className="cloud-account-setup-form__form-group">
+							<div className="cloud-account-setup-form__title">
+								Where should we deploy the SigNoz collector resources?
+							</div>
+							<div className="cloud-account-setup-form__description">
+								Choose the Azure region for deployment.
+							</div>
+							<Form.Item
+								name="region"
+								rules={[{ required: true, message: 'Please select a region' }]}
+								className="cloud-account-setup-form__form-item"
+							>
+								<Select
+									placeholder="e.g. East US"
+									options={AZURE_REGIONS.map((region) => ({
+										label: `${region.label} (${region.value})`,
+										value: region.value,
+									}))}
+									getPopupContainer={popupContainer}
+									disabled={modalState === ModalStateEnum.WAITING}
+								/>
+							</Form.Item>
+						</div>
+
+						<div className="cloud-account-setup-form__form-group">
+							<div className="cloud-account-setup-form__title">
+								Which resource groups do you want to monitor?
+							</div>
+							<div className="cloud-account-setup-form__description">
+								Add one or more Azure resource group names.
+							</div>
+							<Form.Item
+								name="resourceGroups"
+								rules={[
+									{
+										required: true,
+										type: 'array',
+										min: 1,
+										message: 'Please add at least one resource group',
+									},
+								]}
+								className="cloud-account-setup-form__form-item"
+							>
+								<Select
+									mode="tags"
+									placeholder="e.g. prod-platform-rg"
+									tokenSeparators={[',']}
+									disabled={modalState === ModalStateEnum.WAITING}
+								/>
+							</Form.Item>
+						</div>
+
+						<RenderConnectionFields
+							isConnectionParamsLoading={isConnectionParamsLoading}
+							connectionParams={connectionParams}
+							isFormDisabled={modalState === ModalStateEnum.WAITING}
+						/>
+
+						{connectionCommands && (
+							<div className="cloud-account-setup-form__code-block-tabs-container">
+								<div className="cloud-account-setup-form__code-block-tabs-header">
+									<div className="cloud-account-setup-form__code-block-tabs-header-title">
+										Deploy Agent
+									</div>
+									<div className="cloud-account-setup-form__code-block-tabs-header-description">
+										{activeTab === 'cli' ? AZURE_CLI_DESC : AZURE_POWERSHELL_DESC}
+									</div>
+								</div>
+								<Tabs
+									className="cloud-account-setup-form__code-block-tabs"
+									items={[
+										{
+											key: 'cli',
+											label: 'CLI',
+											children: <CodeBlock code={connectionCommands?.cliCommand || ''} />,
+										},
+										{
+											key: 'powershell',
+											label: 'PowerShell',
+											children: (
+												<CodeBlock
+													code={connectionCommands?.cloudPowerShellCommand || ''}
+												/>
+											),
+										},
+									]}
+									value={activeTab}
+									onChange={(key): void => setActiveTab(key)}
+									variant="primary"
+								/>
+							</div>
+						)}
+
+						{renderAlert()}
+
+						{modalState === ModalStateEnum.WAITING && (
+							<div className="cloud-account-setup-status-message">
+								After running the command, return here and wait for automatic connection
+								detection.
+							</div>
+						)}
+					</div>
+				</Form>
+			</div>
+		</DrawerWrapper>
+	);
+}
+
+export default CloudAccountSetupModal;

frontend/src/container/Integrations/CloudIntegration/AzureCloudServices/EditAccount/AccountSettingsModal.tsx

@@ -0,0 +1,150 @@
+import { Dispatch, SetStateAction, useMemo } from 'react';
+import { useQueryClient } from 'react-query';
+import { Button, DrawerWrapper } from '@signozhq/ui';
+import { Form, Select } from 'antd';
+import { invalidateListAccounts } from 'api/generated/services/cloudintegration';
+import { INTEGRATION_TYPES } from 'container/Integrations/constants';
+import { CloudAccount } from 'container/Integrations/types';
+import { Save } from 'lucide-react';
+
+import { useAccountSettingsModal } from '../../../../../hooks/integration/azure/useAccountSettingsModal';
+import RemoveIntegrationAccount from '../../RemoveAccount/RemoveIntegrationAccount';
+
+import '../../AmazonWebServices/EditAccount/AccountSettingsModal.style.scss';
+
+interface AccountSettingsModalProps {
+	onClose: () => void;
+	account: CloudAccount;
+	setActiveAccount: Dispatch<SetStateAction<CloudAccount | null>>;
+}
+
+function AccountSettingsModal({
+	onClose,
+	account,
+	setActiveAccount,
+}: AccountSettingsModalProps): JSX.Element {
+	const {
+		form,
+		isLoading,
+		resourceGroups,
+		isSaveDisabled,
+		setResourceGroups,
+		handleSubmit,
+		handleClose,
+	} = useAccountSettingsModal({ onClose, account, setActiveAccount });
+
+	const queryClient = useQueryClient();
+
+	const azureConfig = useMemo(
+		() => ('deployment_region' in account.config ? account.config : null),
+		[account.config],
+	);
+
+	return (
+		<DrawerWrapper
+			open={true}
+			className="account-settings-modal"
+			title="Account Settings"
+			direction="right"
+			showCloseButton
+			onOpenChange={(open): void => {
+				if (!open) {
+					handleClose();
+				}
+			}}
+			width="wide"
+			footer={
+				<div className="account-settings-modal__footer">
+					<RemoveIntegrationAccount
+						accountId={account?.id}
+						onRemoveIntegrationAccountSuccess={(): void => {
+							void invalidateListAccounts(queryClient, {
+								cloudProvider: INTEGRATION_TYPES.AZURE,
+							});
+							setActiveAccount(null);
+							handleClose();
+						}}
+						cloudProvider={INTEGRATION_TYPES.AZURE}
+					/>
+					<Button
+						variant="solid"
+						color="secondary"
+						disabled={isSaveDisabled}
+						onClick={handleSubmit}
+						loading={isLoading}
+						prefix={<Save size={14} />}
+					>
+						Update Changes
+					</Button>
+				</div>
+			}
+		>
+			<Form
+				form={form}
+				layout="vertical"
+				initialValues={{
+					resourceGroups: azureConfig?.resource_groups || [],
+				}}
+			>
+				<div className="account-settings-modal__body">
+					<div className="account-settings-modal__body-account-info">
+						<div className="account-settings-modal__body-account-info-connected-account-details">
+							<div className="account-settings-modal__body-account-info-connected-account-details-title">
+								Connected Account details
+							</div>
+							<div className="account-settings-modal__body-account-info-connected-account-details-account-id">
+								Azure Subscription:{' '}
+								<span className="account-settings-modal__body-account-info-connected-account-details-account-id-account-id">
+									{account?.providerAccountId}
+								</span>
+							</div>
+						</div>
+					</div>
+
+					{azureConfig?.deployment_region && (
+						<div className="account-settings-modal__body-region-selector">
+							<div className="account-settings-modal__body-region-selector-title">
+								Deployment region
+							</div>
+							<div className="account-settings-modal__body-region-selector-description">
+								{azureConfig.deployment_region}
+							</div>
+						</div>
+					)}
+
+					<div className="account-settings-modal__body-region-selector">
+						<div className="account-settings-modal__body-region-selector-title">
+							Resource groups
+						</div>
+						<div className="account-settings-modal__body-region-selector-description">
+							Update the resource groups that should be monitored.
+						</div>
+
+						<Form.Item
+							name="resourceGroups"
+							rules={[
+								{
+									required: true,
+									type: 'array',
+									min: 1,
+									message: 'Please add at least one resource group',
+								},
+							]}
+						>
+							<Select
+								mode="tags"
+								value={resourceGroups}
+								onChange={(values): void => {
+									setResourceGroups(values);
+									form.setFieldValue('resourceGroups', values);
+								}}
+							/>
+						</Form.Item>
+					</div>
+				</div>
+			</Form>
+		</DrawerWrapper>
+	);
+}
+
+export default AccountSettingsModal;

frontend/src/container/Integrations/CloudIntegration/CloudIntegration.tsx

@@ -1,16 +1,15 @@
 import { IntegrationType } from 'container/Integrations/types';
 
-import AWSTabs from './AmazonWebServices/ServicesTabs';
 import Header from './Header/Header';
+import ServicesTabs from './ServiceTabs/ServicesTabs';
 
 import './CloudIntegration.styles.scss';
 
 const CloudIntegration = ({ type }: { type: IntegrationType }): JSX.Element => {
 	return (
 		<div className="cloud-integration-container">
-			<Header title={type} />
-
-			{type === IntegrationType.AWS_SERVICES && <AWSTabs />}
+			<Header type={type} />
+			<ServicesTabs type={type} />
 		</div>
 	);
 };

frontend/src/container/Integrations/CloudIntegration/Header/Header.tsx

@@ -7,7 +7,7 @@ import { Blocks, LifeBuoy } from 'lucide-react';
 
 import './Header.styles.scss';
 
-function Header({ title }: { title: IntegrationType }): JSX.Element {
+function Header({ type }: { type: IntegrationType }): JSX.Element {
 	return (
 		<div className="cloud-header">
 			<div className="cloud-header__navigation">
@@ -25,27 +25,30 @@ function Header({ title }: { title: IntegrationType }): JSX.Element {
 							),
 						},
 						{
-							title: <div className="cloud-header__breadcrumb-title">{title}</div>,
+							title: <div className="cloud-header__breadcrumb-title">{type}</div>,
 						},
 					]}
 				/>
 			</div>
-			<div className="cloud-header__actions">
-				<Button
-					variant="solid"
-					size="sm"
-					color="secondary"
-					onClick={(): void => {
-						window.open(
-							'https://signoz.io/blog/native-aws-integrations-with-autodiscovery/',
-							'_blank',
-						);
-					}}
-					prefix={<LifeBuoy size={12} />}
-				>
-					Get Help
-				</Button>
-			</div>
+
+			{type === IntegrationType.AWS_SERVICES && (
+				<div className="cloud-header__actions">
+					<Button
+						variant="solid"
+						size="sm"
+						color="secondary"
+						onClick={(): void => {
+							window.open(
+								'https://signoz.io/blog/native-aws-integrations-with-autodiscovery/',
+								'_blank',
+							);
+						}}
+						prefix={<LifeBuoy size={12} />}
+					>
+						Get Help
+					</Button>
+				</div>
+			)}
 		</div>
 	);
 }

frontend/src/container/Integrations/CloudIntegration/RemoveAccount/RemoveIntegrationAccount.scss

@@ -1,9 +1,16 @@
 .remove-integration-account-modal {
+	&__cloud-provider {
+		color: var(--l1-foreground);
+		font-weight: 500;
+		font-size: 14px;
+		line-height: 20px;
+		letter-spacing: -0.07px;
+	}
+
 	.ant-modal-content {
 		background-color: var(--l1-background);
 		border: 1px solid var(--l3-background);
 		border-radius: 4px;
-		padding: 12px;
 	}
 
 	.ant-modal-close {

frontend/src/container/Integrations/CloudIntegration/RemoveAccount/RemoveIntegrationAccount.tsx

@@ -4,16 +4,21 @@ import { Modal } from 'antd/lib';
 import logEvent from 'api/common/logEvent';
 import { useDisconnectAccount } from 'api/generated/services/cloudintegration';
 import { SOMETHING_WENT_WRONG } from 'constants/api';
-import { INTEGRATION_TELEMETRY_EVENTS } from 'container/Integrations/constants';
+import {
+	INTEGRATION_TELEMETRY_EVENTS,
+	INTEGRATION_TYPES,
+} from 'container/Integrations/constants';
 import { useNotifications } from 'hooks/useNotifications';
 import { Unlink } from 'lucide-react';
 
 import './RemoveIntegrationAccount.scss';
 
 function RemoveIntegrationAccount({
+	cloudProvider,
 	accountId,
 	onRemoveIntegrationAccountSuccess,
 }: {
+	cloudProvider: string;
 	accountId: string;
 	onRemoveIntegrationAccountSuccess: () => void;
 }): JSX.Element {
@@ -39,12 +44,13 @@ function RemoveIntegrationAccount({
 			},
 		});
 	const handleOk = (): void => {
-		logEvent(INTEGRATION_TELEMETRY_EVENTS.AWS_INTEGRATION_ACCOUNT_REMOVED, {
+		logEvent(INTEGRATION_TELEMETRY_EVENTS.INTEGRATION_ACCOUNT_REMOVED, {
 			accountId,
+			integration: cloudProvider,
 		});
 		disconnectAccount({
 			pathParams: {
-				cloudProvider: 'aws',
+				cloudProvider,
 				id: accountId,
 			},
 		});
@@ -78,13 +84,28 @@ function RemoveIntegrationAccount({
 					loading: isRemoveIntegrationLoading,
 				}}
 			>
-				Removing this account will remove all components created for sending
-				telemetry to SigNoz in your AWS account within the next ~15 minutes
-				(cloudformation stacks named signoz-integration-telemetry-collection in
-				enabled regions). <br />
-				<br />
-				After that, you can delete the cloudformation stack that was created
-				manually when connecting this account.
+				{cloudProvider === INTEGRATION_TYPES.AWS ? (
+					<>
+						Removing this account will remove all components created for sending
+						telemetry to SigNoz in your AWS account within the next ~15 minutes
+						(cloudformation stacks named signoz-integration-telemetry-collection in
+						enabled regions). <br />
+						<br />
+						After that, you can delete the cloudformation stack that was created
+						manually when connecting this account.
+					</>
+				) : (
+					<>
+						Removing this account will remove all components created for sending
+						telemetry to SigNoz in your Azure subscription within the next ~15 minutes
+						(deployment stack named signoz-integration-telemetry will be deleted
+						automatically). <br />
+						<br />
+						After that, you have to manually delete &apos;signoz-integration&apos;
+						deployment stack that was created while connecting this account (Takes ~20
+						minutes to delete).
+					</>
+				)}
 			</Modal>
 		</div>
 	);

frontend/src/container/Integrations/CloudIntegration/ServiceItem.tsx

@@ -1,7 +1,7 @@
 import cx from 'classnames';
 import LineClampedText from 'periscope/components/LineClampedText/LineClampedText';
 
-import { Service } from './types';
+import { Service } from './AmazonWebServices/types';
 
 function ServiceItem({
 	service,

frontend/src/container/Integrations/CloudIntegration/ServiceTabs/ServicesTabs.tsx

@@ -0,0 +1,30 @@
+import { IntegrationType } from 'container/Integrations/types';
+import useUrlQuery from 'hooks/useUrlQuery';
+
+import HeroSection from '../../HeroSection/HeroSection';
+import ServiceDetails from '../AmazonWebServices/ServiceDetails/ServiceDetails';
+import ServicesList from '../ServicesList';
+
+import './ServicesTabs.style.scss';
+
+function ServicesTabs({ type }: { type: IntegrationType }): JSX.Element {
+	const urlQuery = useUrlQuery();
+	const cloudAccountId = urlQuery.get('cloudAccountId') || '';
+
+	return (
+		<div className="services-tabs">
+			<HeroSection type={type} />
+
+			<div className="services-section">
+				<div className="services-section__sidebar">
+					<ServicesList cloudAccountId={cloudAccountId} type={type} />
+				</div>
+				<div className="services-section__content">
+					<ServiceDetails type={type} />
+				</div>
+			</div>
+		</div>
+	);
+}
+
+export default ServicesTabs;

frontend/src/container/Integrations/CloudIntegration/ServicesList.tsx

@@ -4,15 +4,20 @@ import { Skeleton } from 'antd';
 import { useListServicesMetadata } from 'api/generated/services/cloudintegration';
 import type { CloudintegrationtypesServiceMetadataDTO } from 'api/generated/services/sigNoz.schemas';
 import cx from 'classnames';
+import { IntegrationType } from 'container/Integrations/types';
 import useUrlQuery from 'hooks/useUrlQuery';
 
 import emptyStateIconUrl from '@/assets/Icons/emptyState.svg';
 
 interface ServicesListProps {
 	cloudAccountId: string;
+	type: IntegrationType;
 }
 
-function ServicesList({ cloudAccountId }: ServicesListProps): JSX.Element {
+function ServicesList({
+	cloudAccountId,
+	type,
+}: ServicesListProps): JSX.Element {
 	const urlQuery = useUrlQuery();
 	const navigate = useNavigate();
 	const hasValidCloudAccountId = Boolean(cloudAccountId);
@@ -22,7 +27,7 @@ function ServicesList({ cloudAccountId }: ServicesListProps): JSX.Element {
 
 	const { data: servicesMetadata, isLoading } = useListServicesMetadata(
 		{
-			cloudProvider: 'aws',
+			cloudProvider: type,
 		},
 		serviceQueryParams,
 	);

frontend/src/container/Integrations/CloudIntegration/mapCloudAccountFromDto.ts

@@ -0,0 +1,49 @@
+import { CloudintegrationtypesAccountDTO } from 'api/generated/services/sigNoz.schemas';
+import { CloudAccount as IntegrationCloudAccount } from 'container/Integrations/types';
+
+import { CloudAccount as AwsCloudAccount } from './AmazonWebServices/types';
+
+export function mapAccountDtoToAwsCloudAccount(
+	account: CloudintegrationtypesAccountDTO,
+): AwsCloudAccount | null {
+	if (!account.providerAccountId) {
+		return null;
+	}
+
+	return {
+		id: account.id,
+		cloud_account_id: account.id,
+		config: {
+			regions: account.config?.aws?.regions ?? [],
+		},
+		status: {
+			integration: {
+				last_heartbeat_ts_ms: account.agentReport?.timestampMillis ?? 0,
+			},
+		},
+		providerAccountId: account.providerAccountId,
+	};
+}
+
+export function mapAccountDtoToAzureCloudAccount(
+	account: CloudintegrationtypesAccountDTO,
+): IntegrationCloudAccount | null {
+	if (!account.providerAccountId) {
+		return null;
+	}
+
+	return {
+		id: account.id,
+		cloud_account_id: account.id,
+		config: {
+			deployment_region: account.config?.azure?.deploymentRegion ?? '',
+			resource_groups: account.config?.azure?.resourceGroups ?? [],
+		},
+		status: {
+			integration: {
+				last_heartbeat_ts_ms: account.agentReport?.timestampMillis ?? 0,
+			},
+		},
+		providerAccountId: account.providerAccountId,
+	};
+}

frontend/src/container/Integrations/CloudIntegration/utils.ts

@@ -1,5 +1,32 @@
+import { ONE_CLICK_INTEGRATIONS } from '../constants';
+import { IntegrationType } from '../types';
+
 export const getAccountById = <T extends { cloud_account_id: string }>(
 	accounts: T[],
 	accountId: string,
 ): T | null =>
 	accounts.find((account) => account.cloud_account_id === accountId) || null;
+
+interface IntegrationMetadata {
+	title: string;
+	description: string;
+	logo: string;
+}
+
+export const getIntegrationMetadata = (
+	type: IntegrationType,
+): IntegrationMetadata => {
+	const integration = ONE_CLICK_INTEGRATIONS.find(
+		(integration) => integration.id === type,
+	);
+
+	if (!integration) {
+		return { title: '', description: '', logo: '' };
+	}
+
+	return {
+		title: integration.title,
+		description: integration.description,
+		logo: integration.icon,
+	};
+};

frontend/src/container/Integrations/HeroSection/HeroSection.tsx

@@ -0,0 +1,33 @@
+import { IntegrationType } from 'container/Integrations/types';
+
+import AccountActions from '../CloudIntegration/AmazonWebServices/AccountActions/AccountActions';
+import { getIntegrationMetadata } from '../CloudIntegration/utils';
+
+import './HeroSection.style.scss';
+
+function HeroSection({ type }: { type: IntegrationType }): JSX.Element {
+	const {
+		title,
+		description,
+		logo: integrationLogo,
+	} = getIntegrationMetadata(type);
+
+	return (
+		<div className="hero-section">
+			<div className="hero-section__details">
+				<div className="hero-section__details-header">
+					<div className="hero-section__icon">
+						<img src={integrationLogo} alt={type} />
+					</div>
+
+					<div className="hero-section__details-title">{title}</div>
+				</div>
+				<div className="hero-section__details-description">{description}</div>
+			</div>
+
+			<AccountActions type={type} />
+		</div>
+	);
+}
+
+export default HeroSection;

frontend/src/container/Integrations/IntegrationDetailPage/IntegrationDetailPage.styles.scss

@@ -9,53 +9,6 @@
 		flex-direction: column;
 		gap: 16px;
 
-		.error-container {
-			display: flex;
-			border-radius: 6px;
-			border: 1px solid var(--l1-border);
-			background: var(--l1-background);
-			align-items: center;
-			justify-content: center;
-			flex-direction: column;
-
-			.error-content {
-				display: flex;
-				flex-direction: column;
-				justify-content: center;
-				height: 300px;
-				gap: 15px;
-
-				.error-btns {
-					display: flex;
-					flex-direction: row;
-					gap: 16px;
-					align-items: center;
-
-					.retry-btn {
-						display: flex;
-						align-items: center;
-					}
-
-					.contact-support {
-						display: flex;
-						align-items: center;
-						gap: 4px;
-						cursor: pointer;
-
-						.text {
-							color: var(--callout-primary-description);
-							font-weight: 500;
-						}
-					}
-				}
-
-				.error-state-svg {
-					height: 40px;
-					width: 40px;
-				}
-			}
-		}
-
 		.loading-integration-details {
 			display: flex;
 			flex-direction: column;
@@ -327,6 +280,36 @@
 			}
 		}
 	}
+
+	.error-container {
+		display: flex;
+		border-radius: 6px;
+		border: 1px solid var(--l1-border);
+		background: var(--l1-background);
+		align-items: center;
+		justify-content: center;
+		flex-direction: column;
+
+		.error-content {
+			display: flex;
+			flex-direction: column;
+			justify-content: center;
+			height: 300px;
+			gap: 15px;
+
+			.error-btns {
+				display: flex;
+				flex-direction: row;
+				gap: 12px;
+				align-items: center;
+			}
+
+			.error-state-svg {
+				height: 40px;
+				width: 40px;
+			}
+		}
+	}
 }
 
 .remove-integration-modal {

frontend/src/container/Integrations/IntegrationDetailPage/IntegrationDetailPage.tsx

@@ -1,6 +1,5 @@
 import { useState } from 'react';
 import { useHistory, useParams } from 'react-router-dom';
-import { Color } from '@signozhq/design-tokens';
 import { Button } from '@signozhq/ui';
 import { Flex, Skeleton, Typography } from 'antd';
 import ROUTES from 'constants/routes';
@@ -55,8 +54,19 @@ function IntegrationDetailPage(): JSX.Element {
 		),
 	);
 
-	if (integrationId === INTEGRATION_TYPES.AWS) {
-		return <CloudIntegration type={IntegrationType.AWS_SERVICES} />;
+	if (
+		integrationId === INTEGRATION_TYPES.AWS ||
+		integrationId === INTEGRATION_TYPES.AZURE
+	) {
+		return (
+			<CloudIntegration
+				type={
+					integrationId === INTEGRATION_TYPES.AWS
+						? IntegrationType.AWS_SERVICES
+						: IntegrationType.AZURE_SERVICES
+				}
+			/>
+		);
 	}
 
 	return (
@@ -85,20 +95,20 @@ function IntegrationDetailPage(): JSX.Element {
 						<div className="error-btns">
 							<Button
 								variant="solid"
-								color="primary"
+								color="secondary"
 								onClick={(): Promise<any> => refetch()}
 								prefix={<RotateCw size={14} />}
 							>
 								Retry
 							</Button>
-							<div
-								className="contact-support"
+							<Button
+								variant="solid"
+								color="secondary"
 								onClick={(): void => handleContactSupport(isCloudUserVal)}
+								suffix={<MoveUpRight size={12} />}
 							>
-								<Typography.Link className="text">Contact Support </Typography.Link>
-
-								<MoveUpRight size={14} color={Color.BG_ROBIN_400} />
-							</div>
+								Contact Support
+							</Button>
 						</div>
 					</div>
 				</div>

frontend/src/container/Integrations/OneClickIntegrations/OneClickIntegrations.tsx

@@ -22,6 +22,7 @@ function OneClickIntegrations(props: OneClickIntegrationsProps): JSX.Element {
 		if (!query) {
 			return ONE_CLICK_INTEGRATIONS;
 		}
+
 		return ONE_CLICK_INTEGRATIONS.filter(
 			(integration) =>
 				integration.title.toLowerCase().includes(query) ||

frontend/src/container/Integrations/constants.ts

@@ -14,8 +14,8 @@ export const INTEGRATION_TELEMETRY_EVENTS = {
 		'Integrations Detail Page: Clicked remove Integration button for integration',
 	INTEGRATIONS_DETAIL_CONFIGURE_INSTRUCTION:
 		'Integrations Detail Page: Navigated to configure an integration',
-	AWS_INTEGRATION_ACCOUNT_REMOVED:
-		'AWS Integration Detail page: Clicked remove Integration button for integration',
+	INTEGRATION_ACCOUNT_REMOVED:
+		'Integration Detail page: Clicked remove Integration button for integration',
 };
 
 export const INTEGRATION_TYPES = {
@@ -53,7 +53,7 @@ export const AZURE_INTEGRATION = {
 	is_new: true,
 };
 
-export const ONE_CLICK_INTEGRATIONS = [AWS_INTEGRATION];
+export const ONE_CLICK_INTEGRATIONS = [AWS_INTEGRATION, AZURE_INTEGRATION];
 
 export const AZURE_REGIONS: AzureRegion[] = [
 	{
@@ -81,6 +81,7 @@ export const AZURE_REGIONS: AzureRegion[] = [
 	{ label: 'Central India', value: 'centralindia', geography: 'India' },
 	{ label: 'Central US', value: 'centralus', geography: 'United States' },
 	{ label: 'Chile Central', value: 'chilecentral', geography: 'Chile' },
+	{ label: 'Denmark East', value: 'denmarkeast', geography: 'Denmark' },
 	{ label: 'East Asia', value: 'eastasia', geography: 'Asia Pacific' },
 	{ label: 'East US', value: 'eastus', geography: 'United States' },
 	{ label: 'East US 2', value: 'eastus2', geography: 'United States' },

frontend/src/container/Integrations/types.ts

@@ -4,8 +4,8 @@ import {
 } from './CloudIntegration/AmazonWebServices/types';
 
 export enum IntegrationType {
-	AWS_SERVICES = 'aws-services',
-	AZURE_SERVICES = 'azure-services',
+	AWS_SERVICES = 'aws',
+	AZURE_SERVICES = 'azure',
 }
 
 interface LogField {
@@ -89,6 +89,7 @@ export interface CloudAccount {
 	cloud_account_id: string;
 	config: AzureCloudAccountConfig | AWSCloudAccountConfig;
 	status: AccountStatus | IServiceStatus;
+	providerAccountId: string;
 }
 
 export interface AzureCloudAccountConfig {

frontend/src/container/MCPServerSettings/AuthCard/AuthCard.test.tsx

@@ -67,4 +67,40 @@ describe('AuthCard', () => {
 
 		expect(mockOnCreateServiceAccount).toHaveBeenCalledTimes(1);
 	});
+
+	it('shows URL for non-admin (all roles can fetch instance URL)', () => {
+		render(<AuthCard {...defaultProps} isAdmin={false} />);
+
+		expect(screen.getByTestId('mcp-instance-url')).toHaveTextContent(
+			'http://localhost',
+		);
+	});
+
+	describe('isLoadingInstanceUrl', () => {
+		it('shows a skeleton and hides the URL while loading', () => {
+			render(<AuthCard {...defaultProps} isAdmin isLoadingInstanceUrl />);
+
+			expect(screen.queryByTestId('mcp-instance-url')).not.toBeInTheDocument();
+			expect(document.querySelector('.ant-skeleton-input')).toBeInTheDocument();
+		});
+
+		it('does not render the copy button while loading', () => {
+			render(<AuthCard {...defaultProps} isAdmin isLoadingInstanceUrl />);
+
+			expect(
+				screen.queryByRole('button', { name: 'Copy SigNoz instance URL' }),
+			).not.toBeInTheDocument();
+		});
+
+		it('shows the URL and copy button once loading is done', () => {
+			render(<AuthCard {...defaultProps} isAdmin isLoadingInstanceUrl={false} />);
+
+			expect(screen.getByTestId('mcp-instance-url')).toHaveTextContent(
+				'http://localhost',
+			);
+			expect(
+				screen.getByRole('button', { name: 'Copy SigNoz instance URL' }),
+			).toBeInTheDocument();
+		});
+	});
 });

frontend/src/container/MCPServerSettings/AuthCard/AuthCard.tsx

@@ -1,3 +1,4 @@
+import { Skeleton } from 'antd';
 import { Badge, Button } from '@signozhq/ui';
 import { Info, KeyRound } from '@signozhq/icons';
 import CopyIconButton from '../CopyIconButton';
@@ -7,6 +8,7 @@ import './AuthCard.styles.scss';
 interface AuthCardProps {
 	isAdmin: boolean;
 	instanceUrl: string;
+	isLoadingInstanceUrl?: boolean;
 	onCopyInstanceUrl: () => void;
 	onCreateServiceAccount: () => void;
 }
@@ -14,6 +16,7 @@ interface AuthCardProps {
 function AuthCard({
 	isAdmin,
 	instanceUrl,
+	isLoadingInstanceUrl = false,
 	onCopyInstanceUrl,
 	onCreateServiceAccount,
 }: AuthCardProps): JSX.Element {
@@ -32,13 +35,18 @@ function AuthCard({
 
 			<div className="mcp-auth-card__field">
 				<span className="mcp-auth-card__field-label">SigNoz Instance URL</span>
-				<div className="mcp-auth-card__endpoint-value">
-					<span data-testid="mcp-instance-url">{instanceUrl}</span>
-					<CopyIconButton
-						ariaLabel="Copy SigNoz instance URL"
-						onCopy={onCopyInstanceUrl}
-					/>
-				</div>
+				{isLoadingInstanceUrl ? (
+					<Skeleton.Input active size="small" />
+				) : (
+					<div className="mcp-auth-card__endpoint-value">
+						<span data-testid="mcp-instance-url">{instanceUrl}</span>
+						<CopyIconButton
+							ariaLabel="Copy SigNoz instance URL"
+							onCopy={onCopyInstanceUrl}
+							disabled={isLoadingInstanceUrl}
+						/>
+					</div>
+				)}
 			</div>
 
 			<div className="mcp-auth-card__field">

frontend/src/container/MCPServerSettings/MCPServerSettings.test.tsx

@@ -6,6 +6,8 @@ const mockLogEvent = jest.fn();
 const mockCopyToClipboard = jest.fn();
 const mockHistoryPush = jest.fn();
 const mockUseGetGlobalConfig = jest.fn();
+const mockUseGetHosts = jest.fn();
+const mockUseGetTenantLicense = jest.fn();
 const mockToastSuccess = jest.fn();
 const mockToastWarning = jest.fn();
 
@@ -19,6 +21,14 @@ jest.mock('api/generated/services/global', () => ({
 		mockUseGetGlobalConfig(...args),
 }));
 
+jest.mock('api/generated/services/zeus', () => ({
+	useGetHosts: (...args: unknown[]): unknown => mockUseGetHosts(...args),
+}));
+
+jest.mock('hooks/useGetTenantLicense', () => ({
+	useGetTenantLicense: (): unknown => mockUseGetTenantLicense(),
+}));
+
 jest.mock('react-use', () => ({
 	__esModule: true,
 	useCopyToClipboard: (): [unknown, jest.Mock] => [null, mockCopyToClipboard],
@@ -47,6 +57,23 @@ jest.mock('utils/basePath', () => ({
 }));
 
 const MCP_URL = 'https://mcp.us.signoz.cloud/mcp';
+const CUSTOM_HOST_URL = 'https://myteam.signoz.cloud';
+const DEFAULT_HOST_URL = 'https://default.signoz.cloud';
+
+function setupLicense({
+	isCloudUser = true,
+	isEnterpriseSelfHostedUser = false,
+}: {
+	isCloudUser?: boolean;
+	isEnterpriseSelfHostedUser?: boolean;
+} = {}): void {
+	mockUseGetTenantLicense.mockReturnValue({
+		isCloudUser,
+		isEnterpriseSelfHostedUser,
+		isCommunityUser: !isCloudUser && !isEnterpriseSelfHostedUser,
+		isCommunityEnterpriseUser: false,
+	});
+}
 
 function setupGlobalConfig({ mcpUrl }: { mcpUrl: string | null }): void {
 	mockUseGetGlobalConfig.mockReturnValue({
@@ -55,7 +82,29 @@ function setupGlobalConfig({ mcpUrl }: { mcpUrl: string | null }): void {
 	});
 }
 
+function setupHosts({
+	hosts = [],
+	isLoading = false,
+	isError = false,
+}: {
+	hosts?: { name?: string; url?: string; is_default?: boolean }[];
+	isLoading?: boolean;
+	isError?: boolean;
+} = {}): void {
+	mockUseGetHosts.mockReturnValue({
+		data: isLoading || isError ? undefined : { data: { hosts } },
+		isLoading,
+		isError,
+	});
+}
+
 describe('MCPServerSettings', () => {
+	beforeEach(() => {
+		// Default: cloud user, hosts loaded but empty → instanceUrl falls back to getBaseUrl()
+		setupLicense();
+		setupHosts();
+	});
+
 	afterEach(() => {
 		jest.clearAllMocks();
 	});
@@ -158,4 +207,145 @@ describe('MCPServerSettings', () => {
 			'Instance URL copied to clipboard',
 		);
 	});
+
+	describe('instance URL resolution', () => {
+		it('uses the active custom host URL when available', async () => {
+			setupGlobalConfig({ mcpUrl: MCP_URL });
+			setupHosts({
+				hosts: [
+					{ name: 'default', url: DEFAULT_HOST_URL, is_default: true },
+					{ name: 'myteam', url: CUSTOM_HOST_URL, is_default: false },
+				],
+			});
+			const user = userEvent.setup({ pointerEventsCheck: 0 });
+
+			render(<MCPServerSettings />);
+
+			expect(screen.getByTestId('mcp-instance-url')).toHaveTextContent(
+				CUSTOM_HOST_URL,
+			);
+
+			await user.click(
+				screen.getByRole('button', { name: 'Copy SigNoz instance URL' }),
+			);
+
+			expect(mockCopyToClipboard).toHaveBeenCalledWith(CUSTOM_HOST_URL);
+		});
+
+		it('falls back to the default host URL when no custom host exists', async () => {
+			setupGlobalConfig({ mcpUrl: MCP_URL });
+			setupHosts({
+				hosts: [{ name: 'default', url: DEFAULT_HOST_URL, is_default: true }],
+			});
+			const user = userEvent.setup({ pointerEventsCheck: 0 });
+
+			render(<MCPServerSettings />);
+
+			expect(screen.getByTestId('mcp-instance-url')).toHaveTextContent(
+				DEFAULT_HOST_URL,
+			);
+
+			await user.click(
+				screen.getByRole('button', { name: 'Copy SigNoz instance URL' }),
+			);
+
+			expect(mockCopyToClipboard).toHaveBeenCalledWith(DEFAULT_HOST_URL);
+		});
+
+		it('falls back to browser URL when hosts request errors', async () => {
+			setupGlobalConfig({ mcpUrl: MCP_URL });
+			setupHosts({ isError: true });
+			const user = userEvent.setup({ pointerEventsCheck: 0 });
+
+			render(<MCPServerSettings />);
+
+			await user.click(
+				screen.getByRole('button', { name: 'Copy SigNoz instance URL' }),
+			);
+
+			expect(mockCopyToClipboard).toHaveBeenCalledWith('http://localhost');
+		});
+
+		it('shows URL skeleton while hosts are loading', () => {
+			setupGlobalConfig({ mcpUrl: MCP_URL });
+			setupHosts({ isLoading: true });
+
+			render(<MCPServerSettings />);
+
+			expect(screen.queryByTestId('mcp-instance-url')).not.toBeInTheDocument();
+			expect(document.querySelector('.ant-skeleton-input')).toBeInTheDocument();
+		});
+
+		it('does not copy while hosts are still loading', async () => {
+			setupGlobalConfig({ mcpUrl: MCP_URL });
+			setupHosts({ isLoading: true });
+			userEvent.setup({ pointerEventsCheck: 0 });
+
+			render(<MCPServerSettings />);
+
+			expect(
+				screen.queryByRole('button', { name: 'Copy SigNoz instance URL' }),
+			).not.toBeInTheDocument();
+			expect(mockCopyToClipboard).not.toHaveBeenCalled();
+		});
+
+		it('disables the hosts query for non-cloud deployments', () => {
+			setupGlobalConfig({ mcpUrl: MCP_URL });
+			setupLicense({ isCloudUser: false, isEnterpriseSelfHostedUser: true });
+
+			render(<MCPServerSettings />, undefined, { role: 'ADMIN' });
+
+			const callOptions = mockUseGetHosts.mock.calls[0]?.[0];
+			expect(callOptions?.query?.enabled).toBe(false);
+		});
+
+		it('uses browser URL immediately for enterprise self-hosted (no skeleton)', async () => {
+			setupGlobalConfig({ mcpUrl: MCP_URL });
+			setupLicense({ isCloudUser: false, isEnterpriseSelfHostedUser: true });
+			setupHosts({ isLoading: false });
+			const user = userEvent.setup({ pointerEventsCheck: 0 });
+
+			render(<MCPServerSettings />, undefined, { role: 'ADMIN' });
+
+			expect(
+				document.querySelector('.ant-skeleton-input'),
+			).not.toBeInTheDocument();
+			expect(screen.getByTestId('mcp-instance-url')).toHaveTextContent(
+				'http://localhost',
+			);
+
+			await user.click(
+				screen.getByRole('button', { name: 'Copy SigNoz instance URL' }),
+			);
+
+			expect(mockCopyToClipboard).toHaveBeenCalledWith('http://localhost');
+		});
+
+		it('enables the hosts query for all cloud users including viewers', () => {
+			setupGlobalConfig({ mcpUrl: MCP_URL });
+			setupLicense({ isCloudUser: true });
+
+			render(<MCPServerSettings />, undefined, { role: 'VIEWER' });
+
+			const callOptions = mockUseGetHosts.mock.calls[0]?.[0];
+			expect(callOptions?.query?.enabled).toBe(true);
+		});
+
+		it('shows instance URL for cloud viewer', () => {
+			setupGlobalConfig({ mcpUrl: MCP_URL });
+			setupLicense({ isCloudUser: true });
+			setupHosts({
+				hosts: [{ name: 'default', url: DEFAULT_HOST_URL, is_default: true }],
+			});
+
+			render(<MCPServerSettings />, undefined, { role: 'VIEWER' });
+
+			expect(
+				document.querySelector('.ant-skeleton-input'),
+			).not.toBeInTheDocument();
+			expect(screen.getByTestId('mcp-instance-url')).toHaveTextContent(
+				DEFAULT_HOST_URL,
+			);
+		});
+	});
 });

frontend/src/container/MCPServerSettings/MCPServerSettings.tsx

@@ -1,11 +1,13 @@
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useCopyToClipboard } from 'react-use';
 import logEvent from 'api/common/logEvent';
 import ROUTES from 'constants/routes';
 import { SA_QUERY_PARAMS } from 'container/ServiceAccountsSettings/constants';
 import { useGetGlobalConfig } from 'api/generated/services/global';
+import { useGetHosts } from 'api/generated/services/zeus';
 import history from 'lib/history';
 import { useAppContext } from 'providers/App/App';
+import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
 import { USER_ROLES } from 'types/roles';
 import { getBaseUrl } from 'utils/basePath';
 
@@ -34,7 +36,23 @@ function MCPServerSettings(): JSX.Element {
 	const [, copyToClipboard] = useCopyToClipboard();
 
 	const isAdmin = user.role === USER_ROLES.ADMIN;
-	const instanceUrl = getBaseUrl();
+	const { isCloudUser } = useGetTenantLicense();
+
+	const {
+		data: hostsData,
+		isLoading: isLoadingHosts,
+		isError: isHostsError,
+	} = useGetHosts({ query: { enabled: isCloudUser } });
+
+	const instanceUrl = useMemo(() => {
+		if (isLoadingHosts || isHostsError || !hostsData) {
+			return getBaseUrl();
+		}
+		const hosts = hostsData.data?.hosts ?? [];
+		const activeHost =
+			hosts.find((h) => !h.is_default) ?? hosts.find((h) => h.is_default);
+		return activeHost?.url ?? getBaseUrl();
+	}, [hostsData, isLoadingHosts, isHostsError]);
 
 	const { data: globalConfig, isLoading: isConfigLoading } =
 		useGetGlobalConfig();
@@ -70,10 +88,13 @@ function MCPServerSettings(): JSX.Element {
 	}, []);
 
 	const handleCopyInstanceUrl = useCallback(() => {
+		if (isLoadingHosts) {
+			return;
+		}
 		copyToClipboard(instanceUrl);
 		toast.success('Instance URL copied to clipboard');
 		void logEvent(ANALYTICS.INSTANCE_URL_COPIED, {});
-	}, [copyToClipboard, instanceUrl]);
+	}, [copyToClipboard, instanceUrl, isLoadingHosts]);
 
 	const handleDocsLinkClick = useCallback((target: string) => {
 		void logEvent(ANALYTICS.DOCS_LINK_CLICKED, { target });
@@ -132,6 +153,7 @@ function MCPServerSettings(): JSX.Element {
 			<AuthCard
 				isAdmin={isAdmin}
 				instanceUrl={instanceUrl}
+				isLoadingInstanceUrl={isLoadingHosts}
 				onCopyInstanceUrl={handleCopyInstanceUrl}
 				onCreateServiceAccount={handleCreateServiceAccount}
 			/>

frontend/src/container/OrganizationSettings/AuthDomain/CreateEdit/Providers/components/DomainMappingList.styles.scss

@@ -89,25 +89,4 @@
 			) !important;
 		}
 	}
-
-	&__add-btn {
-		width: 100%;
-
-		// Ensure icon is visible
-		svg,
-		[class*='icon'] {
-			color: var(--l2-foreground) !important;
-			display: inline-block !important;
-			opacity: 1 !important;
-		}
-
-		&:hover {
-			color: var(--l1-foreground);
-
-			svg,
-			[class*='icon'] {
-				color: var(--l1-foreground) !important;
-			}
-		}
-	}
 }

frontend/src/container/OrganizationSettings/AuthDomain/CreateEdit/Providers/components/DomainMappingList.tsx

@@ -69,10 +69,10 @@ function DomainMappingList({
 						))}
 
 						<Button
-							variant="dashed"
+							variant="outlined"
+							color="secondary"
 							onClick={(): void => add({ domain: '', adminEmail: '' })}
 							prefix={<Plus size={14} />}
-							className="domain-mapping-list__add-btn"
 						>
 							Add Domain Mapping
 						</Button>

frontend/src/container/QueryTable/Drilldown/drilldownUtils.tsx

@@ -196,6 +196,7 @@ export const getUplotClickData = ({
 	coord: { x: number; y: number };
 	record: { queryName: string; filters: FilterData[] };
 	label: string | React.ReactNode;
+	seriesColor?: string;
 } | null => {
 	if (!queryData?.queryName || !metric) {
 		return null;
@@ -208,6 +209,8 @@ export const getUplotClickData = ({
 
 	// Generate label from focusedSeries data
 	let label: string | React.ReactNode = '';
+	const seriesColor = focusedSeries?.color;
+
 	if (focusedSeries && focusedSeries.seriesName) {
 		label = (
 			<span style={{ color: focusedSeries.color }}>
@@ -223,6 +226,7 @@ export const getUplotClickData = ({
 		},
 		record,
 		label,
+		seriesColor,
 	};
 };
 
@@ -237,6 +241,7 @@ export const getPieChartClickData = (
 	queryName: string;
 	filters: FilterData[];
 	label: string | React.ReactNode;
+	seriesColor?: string;
 } | null => {
 	const { metric, queryName } = arc.data.record;
 	if (!queryName || !metric) {
@@ -248,6 +253,7 @@ export const getPieChartClickData = (
 		queryName,
 		filters: getFiltersFromMetric(metric), // TODO: add where clause query as well.
 		label,
+		seriesColor: arc.data.color,
 	};
 };
 

frontend/src/container/QueryTable/Drilldown/useAggregateDrilldown.tsx

@@ -22,6 +22,7 @@ export interface AggregateData {
 		endTime: number;
 	};
 	label?: string | React.ReactNode;
+	seriesColor?: string;
 }
 
 const useAggregateDrilldown = ({

frontend/src/container/QueryTable/Drilldown/useBaseAggregateOptions.tsx

@@ -228,7 +228,13 @@ const useBaseAggregateOptions = ({
 									return (
 										<ContextMenu.Item
 											key={key}
-											icon={isLoading ? <LoadingOutlined spin /> : icon}
+											icon={
+												isLoading ? (
+													<LoadingOutlined spin />
+												) : (
+													<span style={{ color: aggregateData?.seriesColor }}>{icon}</span>
+												)
+											}
 											onClick={(): void => onClick()}
 											disabled={isLoading}
 										>

frontend/src/container/RolesSettings/RolesSettings.styles.scss

@@ -51,35 +51,6 @@
 			border-radius: 2px;
 		}
 	}
-
-	// todo: https://github.com/SigNoz/components/issues/116
-	.roles-search-wrapper {
-		flex: 1;
-
-		input {
-			width: 100%;
-			background: var(--l3-background);
-			border: 1px solid var(--l1-border);
-			border-radius: 2px;
-			padding: 6px 6px 6px 8px;
-			font-family: Inter;
-			font-size: 14px;
-			font-weight: 400;
-			line-height: 18px;
-			letter-spacing: -0.07px;
-			color: var(--l1-foreground);
-			outline: none;
-			height: 32px;
-
-			&::placeholder {
-				color: var(--l3-foreground);
-			}
-
-			&:focus {
-				border-color: var(--input);
-			}
-		}
-	}
 }
 
 .roles-description-tooltip {

frontend/src/container/RolesSettings/RolesSettings.tsx

@@ -22,14 +22,12 @@ function RolesSettings(): JSX.Element {
 			</div>
 			<div className="roles-settings-content">
 				<div className="roles-settings-toolbar">
-					<div className="roles-search-wrapper">
-						<Input
-							type="search"
-							placeholder="Search for roles..."
-							value={searchQuery}
-							onChange={(e): void => setSearchQuery(e.target.value)}
-						/>
-					</div>
+					<Input
+						type="search"
+						placeholder="Search for roles..."
+						value={searchQuery}
+						onChange={(e): void => setSearchQuery(e.target.value)}
+					/>
 					{IS_ROLE_DETAILS_AND_CRUD_ENABLED && (
 						<Button
 							variant="solid"

frontend/src/hooks/Integrations/useGetIntegrationStatus.ts

@@ -7,6 +7,13 @@ import {
 	GetIntegrationStatusProps,
 } from 'types/api/integrations/types';
 
+export function isOneClickIntegration(integrationId: string): boolean {
+	return (
+		integrationId === INTEGRATION_TYPES.AWS ||
+		integrationId === INTEGRATION_TYPES.AZURE
+	);
+}
+
 export const useGetIntegrationStatus = ({
 	integrationId,
 }: GetIntegrationPayloadProps): UseQueryResult<
@@ -20,5 +27,5 @@ export const useGetIntegrationStatus = ({
 		enabled:
 			!!integrationId &&
 			integrationId !== '' &&
-			integrationId !== INTEGRATION_TYPES.AWS,
+			!isOneClickIntegration(integrationId),
 	});

frontend/src/hooks/integration/aws/useIntegrationModal.ts

@@ -20,11 +20,11 @@ import {
 	CloudintegrationtypesCredentialsDTO,
 	CloudintegrationtypesPostableAccountDTO,
 } from 'api/generated/services/sigNoz.schemas';
+import { INTEGRATION_TYPES } from 'container/Integrations/constants';
 import {
 	ActiveViewEnum,
 	ModalStateEnum,
-} from 'container/Integrations/CloudIntegration/AmazonWebServices/HeroSection/types';
-import { INTEGRATION_TYPES } from 'container/Integrations/constants';
+} from 'container/Integrations/HeroSection/types';
 import useAxiosError from 'hooks/useAxiosError';
 import { regions } from 'utils/regions';
 

frontend/src/hooks/integration/azure/useAccountSettingsModal.ts

@@ -0,0 +1,142 @@
+import {
+	Dispatch,
+	SetStateAction,
+	useCallback,
+	useEffect,
+	useMemo,
+	useState,
+} from 'react';
+import { toast } from '@signozhq/ui';
+import { Form } from 'antd';
+import { FormInstance } from 'antd/lib';
+import { useUpdateAccount } from 'api/generated/services/cloudintegration';
+import { INTEGRATION_TYPES } from 'container/Integrations/constants';
+import { CloudAccount } from 'container/Integrations/types';
+import { isEqual } from 'lodash-es';
+
+import logEvent from '../../../api/common/logEvent';
+
+interface UseAccountSettingsModalProps {
+	onClose: () => void;
+	account: CloudAccount;
+	setActiveAccount: Dispatch<SetStateAction<CloudAccount | null>>;
+}
+
+interface UseAccountSettingsModal {
+	form: FormInstance;
+	isLoading: boolean;
+	resourceGroups: string[];
+	isSaveDisabled: boolean;
+	setResourceGroups: Dispatch<SetStateAction<string[]>>;
+	handleSubmit: () => Promise<void>;
+	handleClose: () => void;
+}
+
+export function useAccountSettingsModal({
+	onClose,
+	account,
+	setActiveAccount,
+}: UseAccountSettingsModalProps): UseAccountSettingsModal {
+	const [form] = Form.useForm();
+	const { mutate: updateAccount, isLoading } = useUpdateAccount();
+	const accountConfig = useMemo(
+		() => ('deployment_region' in account.config ? account.config : null),
+		[account.config],
+	);
+	const [resourceGroups, setResourceGroups] = useState<string[]>(
+		accountConfig?.resource_groups || [],
+	);
+
+	useEffect(() => {
+		if (!accountConfig) {
+			return;
+		}
+
+		form.setFieldsValue({
+			region: accountConfig.deployment_region,
+			resourceGroups: accountConfig.resource_groups,
+		});
+		setResourceGroups(accountConfig.resource_groups);
+	}, [accountConfig, form]);
+
+	const handleSubmit = useCallback(async (): Promise<void> => {
+		try {
+			const values = await form.validateFields();
+
+			updateAccount(
+				{
+					pathParams: {
+						cloudProvider: INTEGRATION_TYPES.AZURE,
+						id: account?.id || '',
+					},
+					data: {
+						config: {
+							azure: {
+								resourceGroups: values.resourceGroups || [],
+							},
+						},
+					},
+				},
+				{
+					onSuccess: () => {
+						const nextConfig = {
+							deployment_region: accountConfig?.deployment_region || '',
+							resource_groups: values.resourceGroups || [],
+						};
+
+						setActiveAccount({
+							...account,
+							config: nextConfig,
+						});
+						onClose();
+
+						toast.success('Account settings updated successfully', {
+							position: 'bottom-right',
+						});
+
+						logEvent('Azure Integration: Account settings updated', {
+							cloudAccountId: account.cloud_account_id,
+							deploymentRegion: nextConfig.deployment_region,
+							resourceGroups: nextConfig.resource_groups,
+						});
+					},
+					onError: (error) => {
+						toast.error('Failed to update account settings', {
+							description: error?.message,
+							position: 'bottom-right',
+						});
+					},
+				},
+			);
+		} catch (error) {
+			console.error('Form submission failed:', error);
+		}
+	}, [form, updateAccount, account, setActiveAccount, onClose]);
+
+	const isSaveDisabled = useMemo(() => {
+		if (!accountConfig) {
+			return true;
+		}
+
+		const formResourceGroups = resourceGroups || [];
+
+		return isEqual(
+			[...formResourceGroups].sort(),
+			[...accountConfig.resource_groups].sort(),
+		);
+	}, [accountConfig, resourceGroups, form]);
+
+	const handleClose = useCallback(() => {
+		onClose();
+	}, [onClose]);
+
+	return {
+		form,
+		isLoading,
+		resourceGroups,
+		isSaveDisabled,
+		setResourceGroups,
+		handleSubmit,
+		handleClose,
+	};
+}

frontend/src/hooks/integration/azure/useIntegrationModal.ts

@@ -0,0 +1,188 @@
+import { Dispatch, SetStateAction, useCallback, useState } from 'react';
+import { useQueryClient } from 'react-query';
+import { toast } from '@signozhq/ui';
+import { Form, FormInstance } from 'antd';
+import {
+	CreateAccountMutationResult,
+	GetConnectionCredentialsQueryResult,
+	invalidateListAccounts,
+	useCreateAccount,
+	useGetConnectionCredentials,
+} from 'api/generated/services/cloudintegration';
+import {
+	CloudintegrationtypesCredentialsDTO,
+	CloudintegrationtypesPostableAccountDTO,
+} from 'api/generated/services/sigNoz.schemas';
+import { INTEGRATION_TYPES } from 'container/Integrations/constants';
+import { ModalStateEnum } from 'container/Integrations/HeroSection/types';
+import useAxiosError from 'hooks/useAxiosError';
+
+import logEvent from '../../../api/common/logEvent';
+
+interface UseIntegrationModalProps {
+	onClose: () => void;
+}
+
+interface UseAzureIntegrationModal {
+	form: FormInstance;
+	modalState: ModalStateEnum;
+	isLoading: boolean;
+	accountId?: string;
+	connectionCommands: {
+		cliCommand: string;
+		cloudPowerShellCommand: string;
+	} | null;
+	setModalState: Dispatch<SetStateAction<ModalStateEnum>>;
+	handleSubmit: () => Promise<void>;
+	handleClose: () => void;
+	connectionParams?: CloudintegrationtypesCredentialsDTO;
+	isConnectionParamsLoading: boolean;
+	handleConnectionSuccess: (payload: {
+		cloudAccountId: string;
+		status?: unknown;
+	}) => void;
+	handleConnectionTimeout: (payload: { id?: string }) => void;
+	handleConnectionError: () => void;
+}
+
+export function useIntegrationModal({
+	onClose,
+}: UseIntegrationModalProps): UseAzureIntegrationModal {
+	const queryClient = useQueryClient();
+	const [form] = Form.useForm();
+	const [modalState, setModalState] = useState<ModalStateEnum>(
+		ModalStateEnum.FORM,
+	);
+	const [isLoading, setIsLoading] = useState(false);
+	const [accountId, setAccountId] = useState<string | undefined>(undefined);
+	const [connectionCommands, setConnectionCommands] = useState<{
+		cliCommand: string;
+		cloudPowerShellCommand: string;
+	} | null>(null);
+
+	const handleClose = useCallback((): void => {
+		setModalState(ModalStateEnum.FORM);
+		setConnectionCommands(null);
+		onClose();
+	}, [onClose]);
+
+	const handleConnectionSuccess = useCallback(
+		(payload: { cloudAccountId: string; status?: unknown }): void => {
+			logEvent('Azure Integration: Account connected', {
+				cloudAccountId: payload.cloudAccountId,
+				status: payload.status,
+			});
+			toast.success('Azure account connected successfully', {
+				position: 'bottom-right',
+			});
+			void invalidateListAccounts(queryClient, {
+				cloudProvider: INTEGRATION_TYPES.AZURE,
+			});
+			handleClose();
+		},
+		[handleClose, queryClient],
+	);
+
+	const handleConnectionTimeout = useCallback(
+		(payload: { id?: string }): void => {
+			setModalState(ModalStateEnum.ERROR);
+			logEvent('Azure Integration: Account connection attempt timed out', {
+				id: payload.id,
+			});
+		},
+		[],
+	);
+
+	const handleConnectionError = useCallback((): void => {
+		setModalState(ModalStateEnum.ERROR);
+	}, []);
+
+	const { mutate: createAccount } = useCreateAccount();
+	const handleError = useAxiosError();
+
+	const { data: connectionParams, isLoading: isConnectionParamsLoading } =
+		useGetConnectionCredentials<GetConnectionCredentialsQueryResult>(
+			{
+				cloudProvider: INTEGRATION_TYPES.AZURE,
+			},
+			{
+				query: {
+					onError: handleError,
+				},
+			},
+		);
+
+	const handleSubmit = useCallback(async (): Promise<void> => {
+		try {
+			setIsLoading(true);
+			const values = await form.validateFields();
+
+			const payload: CloudintegrationtypesPostableAccountDTO = {
+				config: {
+					azure: {
+						deploymentRegion: values.region,
+						resourceGroups: values.resourceGroups || [],
+					},
+				},
+				credentials: {
+					ingestionUrl: connectionParams?.data?.ingestionUrl || values.ingestionUrl,
+					ingestionKey: connectionParams?.data?.ingestionKey || values.ingestionKey,
+					sigNozApiUrl: connectionParams?.data?.sigNozApiUrl || values.sigNozApiUrl,
+					sigNozApiKey: connectionParams?.data?.sigNozApiKey || values.sigNozApiKey,
+				},
+			};
+
+			createAccount(
+				{
+					pathParams: { cloudProvider: INTEGRATION_TYPES.AZURE },
+					data: payload,
+				},
+				{
+					onSuccess: (response: CreateAccountMutationResult) => {
+						const nextAccountId = response.data.id;
+						const artifact = response.data.connectionArtifact.azure;
+
+						logEvent('Azure Integration: Account connection commands generated', {
+							id: nextAccountId,
+						});
+
+						setConnectionCommands({
+							cliCommand: artifact?.cliCommand || '',
+							cloudPowerShellCommand: artifact?.cloudPowerShellCommand || '',
+						});
+						setModalState(ModalStateEnum.WAITING);
+						setAccountId(nextAccountId);
+					},
+					onError: () => {
+						setModalState(ModalStateEnum.ERROR);
+						toast.error('Failed to create account connection', {
+							position: 'bottom-right',
+						});
+					},
+				},
+			);
+		} catch (error) {
+			console.error('Form submission failed:', error);
+		} finally {
+			setIsLoading(false);
+		}
+	}, [form, connectionParams, createAccount]);
+
+	return {
+		form,
+		modalState,
+		isLoading,
+		accountId,
+		connectionCommands,
+		setModalState,
+		handleSubmit,
+		handleClose,
+		connectionParams: connectionParams?.data as
+			| CloudintegrationtypesCredentialsDTO
+			| undefined,
+		isConnectionParamsLoading,
+		handleConnectionSuccess,
+		handleConnectionTimeout,
+		handleConnectionError,
+	};
+}

frontend/src/pages/Settings/Settings.tsx

@@ -36,6 +36,7 @@ function SettingsPage(): JSX.Element {
 
 	const isAdmin = user.role === USER_ROLES.ADMIN;
 	const isEditor = user.role === USER_ROLES.EDITOR;
+	const isViewer = user.role === USER_ROLES.VIEWER;
 
 	const isWorkspaceBlocked = trialInfo?.workSpaceBlock || false;
 
@@ -102,6 +103,13 @@ function SettingsPage(): JSX.Element {
 								: item.isEnabled,
 					}));
 				}
+
+				if (isViewer) {
+					updatedItems = updatedItems.map((item) => ({
+						...item,
+						isEnabled: item.key === ROUTES.MCP_SERVER ? true : item.isEnabled,
+					}));
+				}
 			}
 
 			if (isEnterpriseSelfHostedUser) {
@@ -134,6 +142,13 @@ function SettingsPage(): JSX.Element {
 								: item.isEnabled,
 					}));
 				}
+
+				if (isViewer) {
+					updatedItems = updatedItems.map((item) => ({
+						...item,
+						isEnabled: item.key === ROUTES.MCP_SERVER ? true : item.isEnabled,
+					}));
+				}
 			}
 
 			if (!isCloudUser && !isEnterpriseSelfHostedUser) {
@@ -166,6 +181,7 @@ function SettingsPage(): JSX.Element {
 	}, [
 		isAdmin,
 		isEditor,
+		isViewer,
 		isCloudUser,
 		isEnterpriseSelfHostedUser,
 		isFetchingActiveLicense,

frontend/src/pages/Settings/__tests__/Settings.test.tsx

@@ -82,12 +82,13 @@ describe('SettingsPage nav sections', () => {
 			expect(screen.getByTestId(id)).toBeInTheDocument();
 		});
 
-		it.each(['billing', 'roles', 'mcp-server'])(
-			'does not render "%s" element',
-			(id) => {
-				expect(screen.queryByTestId(id)).not.toBeInTheDocument();
-			},
-		);
+		it.each(['billing', 'roles'])('does not render "%s" element', (id) => {
+			expect(screen.queryByTestId(id)).not.toBeInTheDocument();
+		});
+
+		it('renders "mcp-server" element', () => {
+			expect(screen.getByTestId('mcp-server')).toBeInTheDocument();
+		});
 	});
 
 	describe('Self-hosted Admin', () => {

frontend/src/periscope/components/ContextMenu/styles.scss

@@ -4,7 +4,7 @@
 	gap: 8px;
 	padding: 8px;
 	cursor: pointer;
-	color: var(--foreground);
+	color: var(--muted-foreground);
 	font-family: Inter;
 	font-size: var(--font-size-sm);
 	font-weight: 600;
@@ -20,13 +20,10 @@
 	overflow: hidden;
 	text-overflow: ellipsis;
 
-	&:hover {
-		background-color: var(--l1-background);
-	}
-
+	&:hover,
 	&:focus {
 		outline: none;
-		background-color: var(--l1-background);
+		background-color: var(--l2-background-hover);
 	}
 
 	&.disabled {
@@ -47,7 +44,8 @@
 		}
 
 		&:hover {
-			background-color: var(--bg-cherry-100);
+			background-color: var(--danger-background);
+			color: var(--l1-foreground);
 		}
 	}
 
@@ -74,73 +72,24 @@
 }
 
 .context-menu-header {
-	padding-bottom: 4px;
-	border-bottom: 1px solid var(--l1-border);
+	padding: 8px 12px;
+	border-bottom: 1px solid var(--l2-border);
 	color: var(--muted-foreground);
 }
 
-// Target the popover inner specifically for context menu
 .context-menu .ant-popover-inner {
-	padding: 12px 8px !important;
-	// max-height: 254px !important;
-	max-width: 300px !important;
+	padding: 0;
+	border-radius: 6px;
+	max-width: 300px;
+	background: var(--l2-background) !important;
+	border: 1px solid var(--l2-border) !important;
 }
 
-// Dark mode support
-.darkMode {
-	.context-menu-item {
-		color: var(--muted-foreground);
-
-		&:hover,
-		&:focus {
-			background-color: var(--l2-background);
-		}
-
-		&.danger {
-			color: var(--bg-cherry-400);
-
-			.icon {
-				color: var(--bg-cherry-400);
-			}
-
-			&:hover {
-				background-color: var(--danger-background);
-				color: var(--l1-foreground);
-			}
-		}
-
-		.icon {
-			color: var(--bg-robin-400);
-		}
-	}
-
-	.context-menu-header {
-		border-bottom: 1px solid var(--l1-border);
-		color: var(--muted-foreground);
-	}
-
-	// Set the menu popover background
-	.context-menu .ant-popover-inner {
-		background: var(--l1-background) !important;
-		border: 1px solid var(--border) !important;
-	}
-}
-
-// Context menu backdrop overlay
 .context-menu-backdrop {
 	position: fixed;
-	top: 0;
-	left: 0;
-	width: 100vw;
-	height: 100vh;
+	inset: 0;
 	z-index: 9999;
 	background: transparent;
 	cursor: default;
-
-	// Prevent any pointer events from reaching elements behind
 	pointer-events: auto;
-
-	// Ensure it covers the entire viewport including any scrollable areas
-	position: fixed !important;
-	inset: 0;
 }

frontend/src/styles.scss

@@ -720,6 +720,10 @@ notifications	-  2050
 	animation: spin 1s linear infinite;
 }
 
+.animate-fast-spin {
+	animation: spin 0.5s linear infinite;
+}
+
 // Custom legend tooltip for immediate display
 .legend-tooltip {
 	position: fixed;

frontend/yarn.lock

@@ -5586,10 +5586,10 @@
     tailwind-merge "^2.5.2"
     tailwindcss-animate "^1.0.7"
 
-"@signozhq/ui@0.0.10":
-  version "0.0.10"
-  resolved "https://registry.yarnpkg.com/@signozhq/ui/-/ui-0.0.10.tgz#cdbab838f8cb543cf5b483a86e9d9b65265b81ff"
-  integrity sha512-XLeET+PgSP7heqKMsb9YZOSRT3TpfMPHNQRnY1I4SK8mXSct7BYWwK0Q3Je0uf4Z3aWOcpRYoRUPHWZQBpweFQ==
+"@signozhq/ui@0.0.12":
+  version "0.0.12"
+  resolved "https://registry.yarnpkg.com/@signozhq/ui/-/ui-0.0.12.tgz#b623c1729a0d85532d555fe7e756f3a4207e8e5d"
+  integrity sha512-69XS/j9R+uTNMdupyjki/WK1j0d5K5j0/pJrINGiteQRRrPg/AOMue7v/W6dkLICRhXcz/mgI6tLeT2FAuzKFw==
   dependencies:
     "@chenglou/pretext" "^0.0.5"
     "@radix-ui/react-checkbox" "^1.2.3"
@@ -5611,7 +5611,7 @@
     clsx "^2.1.1"
     cmdk "^1.1.1"
     dayjs "^1.11.10"
-    lodash-es "^4.17.21"
+    lodash-es "^4.18.1"
     motion "^11.11.17"
     next-themes "^0.4.6"
     nuqs "^2.8.9"
@@ -13291,6 +13291,11 @@ lodash-es@4, lodash-es@^4.17.21:
   resolved "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz"
   integrity sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==
 
+lodash-es@^4.18.1:
+  version "4.18.1"
+  resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.18.1.tgz#b962eeb80d9d983a900bf342961fb7418ca10b1d"
+  integrity sha512-J8xewKD/Gk22OZbhpOVSwcs60zhd95ESDwezOFuA3/099925PdHJ7OFHNTGtajL3AlZkykD32HykiMo+BIBI8A==
+
 lodash.camelcase@^4.3.0:
   version "4.3.0"
   resolved "https://registry.npmjs.org/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz"

pkg/apiserver/signozapiserver/llmpricingrule.go

@@ -0,0 +1,93 @@
+package signozapiserver
+
+import (
+	"net/http"
+
+	"github.com/SigNoz/signoz/pkg/http/handler"
+	"github.com/SigNoz/signoz/pkg/types"
+	"github.com/SigNoz/signoz/pkg/types/llmpricingruletypes"
+	"github.com/gorilla/mux"
+)
+
+func (provider *provider) addLLMPricingRuleRoutes(router *mux.Router) error {
+	if err := router.Handle("/api/v1/llm_pricing_rules", handler.New(
+		provider.authZ.ViewAccess(provider.llmPricingRuleHandler.List),
+		handler.OpenAPIDef{
+			ID:                  "ListLLMPricingRules",
+			Tags:                []string{"llmpricingrules"},
+			Summary:             "List pricing rules",
+			Description:         "Returns all LLM pricing rules for the authenticated org, with pagination.",
+			Request:             nil,
+			RequestContentType:  "",
+			RequestQuery:        new(llmpricingruletypes.ListPricingRulesQuery),
+			Response:            new(llmpricingruletypes.GettablePricingRules),
+			ResponseContentType: "application/json",
+			SuccessStatusCode:   http.StatusOK,
+			ErrorStatusCodes:    []int{http.StatusBadRequest},
+			Deprecated:          false,
+			SecuritySchemes:     newSecuritySchemes(types.RoleViewer),
+		},
+	)).Methods(http.MethodGet).GetError(); err != nil {
+		return err
+	}
+
+	if err := router.Handle("/api/v1/llm_pricing_rules", handler.New(
+		provider.authZ.AdminAccess(provider.llmPricingRuleHandler.CreateOrUpdate),
+		handler.OpenAPIDef{
+			ID:                 "CreateOrUpdateLLMPricingRules",
+			Tags:               []string{"llmpricingrules"},
+			Summary:            "Create or update pricing rules",
+			Description:        "Single write endpoint used by both the user and the Zeus sync job. Per-rule match is by id, then sourceId, then insert. Override rows (is_override=true) are fully preserved when the request does not provide isOverride; only synced_at is stamped.",
+			Request:            new(llmpricingruletypes.UpdatableLLMPricingRules),
+			RequestContentType: "application/json",
+			SuccessStatusCode:  http.StatusNoContent,
+			ErrorStatusCodes:   []int{http.StatusBadRequest},
+			Deprecated:         false,
+			SecuritySchemes:    newSecuritySchemes(types.RoleAdmin),
+		},
+	)).Methods(http.MethodPut).GetError(); err != nil {
+		return err
+	}
+
+	if err := router.Handle("/api/v1/llm_pricing_rules/{id}", handler.New(
+		provider.authZ.ViewAccess(provider.llmPricingRuleHandler.Get),
+		handler.OpenAPIDef{
+			ID:                  "GetLLMPricingRule",
+			Tags:                []string{"llmpricingrules"},
+			Summary:             "Get a pricing rule",
+			Description:         "Returns a single LLM pricing rule by ID.",
+			Request:             nil,
+			RequestContentType:  "",
+			Response:            new(llmpricingruletypes.GettableLLMPricingRule),
+			ResponseContentType: "application/json",
+			SuccessStatusCode:   http.StatusOK,
+			ErrorStatusCodes:    []int{http.StatusNotFound},
+			Deprecated:          false,
+			SecuritySchemes:     newSecuritySchemes(types.RoleViewer),
+		},
+	)).Methods(http.MethodGet).GetError(); err != nil {
+		return err
+	}
+
+	if err := router.Handle("/api/v1/llm_pricing_rules/{id}", handler.New(
+		provider.authZ.AdminAccess(provider.llmPricingRuleHandler.Delete),
+		handler.OpenAPIDef{
+			ID:                  "DeleteLLMPricingRule",
+			Tags:                []string{"llmpricingrules"},
+			Summary:             "Delete a pricing rule",
+			Description:         "Hard-deletes a pricing rule. If auto-synced, it will be recreated on the next sync cycle.",
+			Request:             nil,
+			RequestContentType:  "",
+			Response:            nil,
+			ResponseContentType: "",
+			SuccessStatusCode:   http.StatusNoContent,
+			ErrorStatusCodes:    []int{http.StatusNotFound},
+			Deprecated:          false,
+			SecuritySchemes:     newSecuritySchemes(types.RoleAdmin),
+		},
+	)).Methods(http.MethodDelete).GetError(); err != nil {
+		return err
+	}
+
+	return nil
+}

pkg/apiserver/signozapiserver/provider.go

@@ -17,6 +17,7 @@ import (
 	"github.com/SigNoz/signoz/pkg/modules/dashboard"
 	"github.com/SigNoz/signoz/pkg/modules/fields"
 	"github.com/SigNoz/signoz/pkg/modules/inframonitoring"
+	"github.com/SigNoz/signoz/pkg/modules/llmpricingrule"
 	"github.com/SigNoz/signoz/pkg/modules/metricsexplorer"
 	"github.com/SigNoz/signoz/pkg/modules/organization"
 	"github.com/SigNoz/signoz/pkg/modules/preference"
@@ -67,6 +68,7 @@ type provider struct {
 	alertmanagerHandler     alertmanager.Handler
 	traceDetailHandler      tracedetail.Handler
 	rulerHandler            ruler.Handler
+	llmPricingRuleHandler   llmpricingrule.Handler
 }
 
 func NewFactory(
@@ -96,6 +98,7 @@ func NewFactory(
 	ruleStateHistoryHandler rulestatehistory.Handler,
 	spanMapperHandler spanmapper.Handler,
 	alertmanagerHandler alertmanager.Handler,
+	llmPricingRuleHandler llmpricingrule.Handler,
 	traceDetailHandler tracedetail.Handler,
 	rulerHandler ruler.Handler,
 ) factory.ProviderFactory[apiserver.APIServer, apiserver.Config] {
@@ -130,6 +133,7 @@ func NewFactory(
 			ruleStateHistoryHandler,
 			spanMapperHandler,
 			alertmanagerHandler,
+			llmPricingRuleHandler,
 			traceDetailHandler,
 			rulerHandler,
 		)
@@ -166,6 +170,7 @@ func newProvider(
 	ruleStateHistoryHandler rulestatehistory.Handler,
 	spanMapperHandler spanmapper.Handler,
 	alertmanagerHandler alertmanager.Handler,
+	llmPricingRuleHandler llmpricingrule.Handler,
 	traceDetailHandler tracedetail.Handler,
 	rulerHandler ruler.Handler,
 ) (apiserver.APIServer, error) {
@@ -202,6 +207,7 @@ func newProvider(
 		alertmanagerHandler:     alertmanagerHandler,
 		traceDetailHandler:      traceDetailHandler,
 		rulerHandler:            rulerHandler,
+		llmPricingRuleHandler:   llmPricingRuleHandler,
 	}
 
 	provider.authZ = middleware.NewAuthZ(settings.Logger(), orgGetter, authz)
@@ -314,6 +320,10 @@ func (provider *provider) AddToRouter(router *mux.Router) error {
 		return err
 	}
 
+	if err := provider.addLLMPricingRuleRoutes(router); err != nil {
+		return err
+	}
+
 	if err := provider.addTraceDetailRoutes(router); err != nil {
 		return err
 	}

pkg/apiserver/signozapiserver/zeus.go

@@ -27,7 +27,7 @@ func (provider *provider) addZeusRoutes(router *mux.Router) error {
 		return err
 	}
 
-	if err := router.Handle("/api/v2/zeus/hosts", handler.New(provider.authZ.AdminAccess(provider.zeusHandler.GetHosts), handler.OpenAPIDef{
+	if err := router.Handle("/api/v2/zeus/hosts", handler.New(provider.authZ.ViewAccess(provider.zeusHandler.GetHosts), handler.OpenAPIDef{
 		ID:                  "GetHosts",
 		Tags:                []string{"zeus"},
 		Summary:             "Get host info from Zeus.",
@@ -39,7 +39,7 @@ func (provider *provider) addZeusRoutes(router *mux.Router) error {
 		SuccessStatusCode:   http.StatusOK,
 		ErrorStatusCodes:    []int{http.StatusBadRequest, http.StatusUnauthorized, http.StatusForbidden, http.StatusNotFound},
 		Deprecated:          false,
-		SecuritySchemes:     newSecuritySchemes(types.RoleAdmin),
+		SecuritySchemes:     newSecuritySchemes(types.RoleViewer),
 	})).Methods(http.MethodGet).GetError(); err != nil {
 		return err
 	}

pkg/modules/cloudintegration/config.go

@@ -22,7 +22,7 @@ func newConfig() factory.Config {
 		Agent: AgentConfig{
 			// we will maintain the latest version of cloud integration agent from here,
 			// till we automate it externally or figure out a way to validate it.
-			Version: "v0.0.9",
+			Version: "v0.0.10",
 		},
 	}
 }

pkg/modules/llmpricingrule/impllmpricingrule/handler.go

@@ -0,0 +1,158 @@
+package impllmpricingrule
+
+import (
+	"context"
+	"net/http"
+	"time"
+
+	"github.com/SigNoz/signoz/pkg/errors"
+	"github.com/SigNoz/signoz/pkg/factory"
+	"github.com/SigNoz/signoz/pkg/http/binding"
+	"github.com/SigNoz/signoz/pkg/http/render"
+	"github.com/SigNoz/signoz/pkg/modules/llmpricingrule"
+	"github.com/SigNoz/signoz/pkg/types/authtypes"
+	"github.com/SigNoz/signoz/pkg/types/llmpricingruletypes"
+	"github.com/SigNoz/signoz/pkg/valuer"
+	"github.com/gorilla/mux"
+)
+
+const maxLimit = 100
+
+type handler struct {
+	module           llmpricingrule.Module
+	providerSettings factory.ProviderSettings
+}
+
+func NewHandler(module llmpricingrule.Module, providerSettings factory.ProviderSettings) llmpricingrule.Handler {
+	return &handler{module: module, providerSettings: providerSettings}
+}
+
+// List handles GET /api/v1/llm_pricing_rules.
+func (h *handler) List(rw http.ResponseWriter, r *http.Request) {
+	ctx, cancel := context.WithTimeout(r.Context(), 10*time.Second)
+	defer cancel()
+
+	claims, err := authtypes.ClaimsFromContext(ctx)
+	if err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	orgID := valuer.MustNewUUID(claims.OrgID)
+
+	var q llmpricingruletypes.ListPricingRulesQuery
+	if err := binding.Query.BindQuery(r.URL.Query(), &q); err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	if q.Limit <= 0 {
+		q.Limit = 20
+	} else if q.Limit > maxLimit {
+		q.Limit = maxLimit
+	}
+	if q.Offset < 0 {
+		render.Error(rw, errors.Newf(errors.TypeInvalidInput, llmpricingruletypes.ErrCodePricingRuleInvalidInput, "offset must be a non-negative integer"))
+		return
+	}
+
+	rules, total, err := h.module.List(ctx, orgID, q.Offset, q.Limit)
+	if err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	render.Success(rw, http.StatusOK, llmpricingruletypes.NewGettableLLMPricingRulesFromLLMPricingRules(rules, total, q.Offset, q.Limit))
+}
+
+// Get handles GET /api/v1/llm_pricing_rules/{id}.
+func (h *handler) Get(rw http.ResponseWriter, r *http.Request) {
+	ctx, cancel := context.WithTimeout(r.Context(), 10*time.Second)
+	defer cancel()
+
+	claims, err := authtypes.ClaimsFromContext(ctx)
+	if err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	orgID := valuer.MustNewUUID(claims.OrgID)
+
+	id, err := ruleIDFromPath(r)
+	if err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	rule, err := h.module.Get(ctx, orgID, id)
+	if err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	render.Success(rw, http.StatusOK, rule)
+}
+
+func (h *handler) CreateOrUpdate(rw http.ResponseWriter, r *http.Request) {
+	ctx, cancel := context.WithTimeout(r.Context(), 30*time.Second)
+	defer cancel()
+
+	claims, err := authtypes.ClaimsFromContext(ctx)
+	if err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	orgID := valuer.MustNewUUID(claims.OrgID)
+
+	req := new(llmpricingruletypes.UpdatableLLMPricingRules)
+	if err := binding.JSON.BindBody(r.Body, req); err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	err = h.module.CreateOrUpdate(ctx, orgID, claims.Email, req.Rules)
+	if err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	render.Success(rw, http.StatusNoContent, nil)
+}
+
+// Delete handles DELETE /api/v1/llm_pricing_rules/{id}.
+func (h *handler) Delete(rw http.ResponseWriter, r *http.Request) {
+	ctx, cancel := context.WithTimeout(r.Context(), 10*time.Second)
+	defer cancel()
+
+	claims, err := authtypes.ClaimsFromContext(ctx)
+	if err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	orgID := valuer.MustNewUUID(claims.OrgID)
+
+	id, err := ruleIDFromPath(r)
+	if err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	if err := h.module.Delete(ctx, orgID, id); err != nil {
+		render.Error(rw, err)
+		return
+	}
+
+	render.Success(rw, http.StatusNoContent, nil)
+}
+
+// ruleIDFromPath extracts and validates the {id} path variable.
+func ruleIDFromPath(r *http.Request) (valuer.UUID, error) {
+	raw := mux.Vars(r)["id"]
+	id, err := valuer.NewUUID(raw)
+	if err != nil {
+		return valuer.UUID{}, errors.Wrapf(err, errors.TypeInvalidInput, llmpricingruletypes.ErrCodePricingRuleInvalidInput, "id is not a valid uuid")
+	}
+	return id, nil
+}

pkg/modules/llmpricingrule/llmpricingrule.go

@@ -0,0 +1,24 @@
+package llmpricingrule
+
+import (
+	"context"
+	"net/http"
+
+	"github.com/SigNoz/signoz/pkg/types/llmpricingruletypes"
+	"github.com/SigNoz/signoz/pkg/valuer"
+)
+
+type Module interface {
+	List(ctx context.Context, orgID valuer.UUID, offset, limit int) ([]*llmpricingruletypes.LLMPricingRule, int, error)
+	Get(ctx context.Context, orgID valuer.UUID, id valuer.UUID) (*llmpricingruletypes.LLMPricingRule, error)
+	CreateOrUpdate(ctx context.Context, orgID valuer.UUID, userEmail string, rules []llmpricingruletypes.UpdatableLLMPricingRule) (err error)
+	Delete(ctx context.Context, orgID, id valuer.UUID) error
+}
+
+// Handler defines the HTTP handler interface for pricing rule endpoints.
+type Handler interface {
+	List(rw http.ResponseWriter, r *http.Request)
+	Get(rw http.ResponseWriter, r *http.Request)
+	CreateOrUpdate(rw http.ResponseWriter, r *http.Request)
+	Delete(rw http.ResponseWriter, r *http.Request)
+}

pkg/querybuilder/constants.go

@@ -4,6 +4,10 @@ const (
 	TrueConditionLiteral  = "true"
 	SkipConditionLiteral  = "__skip__"
 	ErrorConditionLiteral = "__skip_because_of_error__"
+
+	// BodyFullTextSearchDefaultWarning is emitted when a full-text search or "body" searches are hit
+	// with New JSON Body enhancements.
+	BodyFullTextSearchDefaultWarning = "Full text searches default to `body.message:string`. Use `body.<key>` to search a different field inside body"
 )
 
 var (