address review comments

Added system dashboard API endpoints under /api/v1/system/{source}/dashboard
GET /api/v1/system/ai-o11y-overview/dashboard
PUT /api/v1/system/ai-o11y-overview/dashboard

reset endpoint to removed any edited dashboard and reset the default values.
POST /api/v1/system/ai-o11y-overview/dashboard/reset

seeding at two points,
- at org creation,
- existing org migration.

change delete to reset

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.121.0
+    image: signoz/signoz:v0.120.0
     ports:
       - "8080:8080" # signoz port
     #   - "6060:6060"     # pprof port

deploy/docker-swarm/docker-compose.yaml

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

deploy/docker/docker-compose.ha.yaml

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

deploy/docker/docker-compose.yaml

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

docs/api/openapi.yml

@@ -2103,6 +2103,8 @@ components:
           type: boolean
         org_id:
           type: string
+        source:
+          type: string
         updatedAt:
           format: date-time
           type: string
@@ -2134,6 +2136,7 @@ components:
       type: object
     DashboardtypesStorableDashboardData:
       additionalProperties: {}
+      nullable: true
       type: object
     DashboardtypesUpdatablePublicDashboard:
       properties:
@@ -2632,158 +2635,6 @@ 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:
@@ -7827,218 +7678,6 @@ 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
@@ -10419,6 +10058,186 @@ paths:
       summary: Update a span mapper
       tags:
       - spanmapper
+  /api/v1/system/{source}:
+    get:
+      deprecated: false
+      description: This endpoint returns the system dashboard for the callers org
+        keyed by source (e.g. ai-o11y-overview).
+      operationId: GetSystemDashboard
+      parameters:
+      - in: path
+        name: source
+        required: true
+        schema:
+          type: string
+      responses:
+        "200":
+          content:
+            application/json:
+              schema:
+                properties:
+                  data:
+                    $ref: '#/components/schemas/DashboardtypesDashboard'
+                  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: Get system dashboard
+      tags:
+      - systemdashboard
+    put:
+      deprecated: false
+      description: This endpoint replaces the system dashboard for the callers org
+        with the provided payload.
+      operationId: UpdateSystemDashboard
+      parameters:
+      - in: path
+        name: source
+        required: true
+        schema:
+          type: string
+      requestBody:
+        content:
+          application/json:
+            schema:
+              $ref: '#/components/schemas/DashboardtypesStorableDashboardData'
+      responses:
+        "200":
+          content:
+            application/json:
+              schema:
+                properties:
+                  data:
+                    $ref: '#/components/schemas/DashboardtypesDashboard'
+                  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:
+        - EDITOR
+      - tokenizer:
+        - EDITOR
+      summary: Update system dashboard
+      tags:
+      - systemdashboard
+  /api/v1/system/{source}/reset:
+    post:
+      deprecated: false
+      description: This resets edited/updated system dashboard to default system dashboard.
+      operationId: ResetSystemDashboard
+      parameters:
+      - in: path
+        name: source
+        required: true
+        schema:
+          type: string
+      responses:
+        "200":
+          content:
+            application/json:
+              schema:
+                properties:
+                  data:
+                    $ref: '#/components/schemas/DashboardtypesDashboard'
+                  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:
+        - EDITOR
+      - tokenizer:
+        - EDITOR
+      summary: Reset system dashboard to defaults
+      tags:
+      - systemdashboard
   /api/v1/testChannel:
     post:
       deprecated: true

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.12",
+    "@signozhq/ui": "0.0.10",
     "@tanstack/react-table": "8.21.3",
     "@tanstack/react-virtual": "3.13.22",
     "@uiw/codemirror-theme-copilot": "4.23.11",
@@ -231,7 +231,6 @@
     "ts-jest": "29.4.6",
     "ts-node": "^10.2.1",
     "typescript-plugin-css-modules": "5.2.0",
-    "use-sync-external-store": "1.6.0",
     "vite-plugin-checker": "0.12.0",
     "vite-plugin-compression": "0.5.1",
     "vite-plugin-image-optimizer": "2.0.3",
@@ -267,4 +266,4 @@
     "tmp": "0.2.4",
     "vite": "npm:rolldown-vite@7.3.1"
   }
-}
+}

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

@@ -1,399 +0,0 @@
-/**
- * ! 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

@@ -2781,6 +2781,10 @@ export interface DashboardtypesDashboardDTO {
 	 * @type string
 	 */
 	org_id?: string;
+	/**
+	 * @type string
+	 */
+	source?: string;
 	/**
 	 * @type string
 	 * @format date-time
@@ -2823,9 +2827,12 @@ export interface DashboardtypesPostablePublicDashboardDTO {
 	timeRangeEnabled?: boolean;
 }
 
-export interface DashboardtypesStorableDashboardDataDTO {
+/**
+ * @nullable
+ */
+export type DashboardtypesStorableDashboardDataDTO = {
 	[key: string]: unknown;
-}
+} | null;
 
 export interface DashboardtypesUpdatablePublicDashboardDTO {
 	/**
@@ -3413,170 +3420,6 @@ 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
@@ -7168,41 +7011,6 @@ 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
@@ -7534,6 +7342,39 @@ export type UpdateSpanMapperPathParameters = {
 	groupId: string;
 	mapperId: string;
 };
+export type GetSystemDashboardPathParameters = {
+	source: string;
+};
+export type GetSystemDashboard200 = {
+	data: DashboardtypesDashboardDTO;
+	/**
+	 * @type string
+	 */
+	status: string;
+};
+
+export type UpdateSystemDashboardPathParameters = {
+	source: string;
+};
+export type UpdateSystemDashboard200 = {
+	data: DashboardtypesDashboardDTO;
+	/**
+	 * @type string
+	 */
+	status: string;
+};
+
+export type ResetSystemDashboardPathParameters = {
+	source: string;
+};
+export type ResetSystemDashboard200 = {
+	data: DashboardtypesDashboardDTO;
+	/**
+	 * @type string
+	 */
+	status: string;
+};
+
 export type ListUsersDeprecated200 = {
 	/**
 	 * @type array

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

@@ -0,0 +1,318 @@
+/**
+ * ! 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 {
+	DashboardtypesStorableDashboardDataDTO,
+	GetSystemDashboard200,
+	GetSystemDashboardPathParameters,
+	RenderErrorResponseDTO,
+	ResetSystemDashboard200,
+	ResetSystemDashboardPathParameters,
+	UpdateSystemDashboard200,
+	UpdateSystemDashboardPathParameters,
+} from '../sigNoz.schemas';
+
+import { GeneratedAPIInstance } from '../../../generatedAPIInstance';
+import type { ErrorType, BodyType } from '../../../generatedAPIInstance';
+
+/**
+ * This endpoint returns the system dashboard for the callers org keyed by source (e.g. ai-o11y-overview).
+ * @summary Get system dashboard
+ */
+export const getSystemDashboard = (
+	{ source }: GetSystemDashboardPathParameters,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<GetSystemDashboard200>({
+		url: `/api/v1/system/${source}`,
+		method: 'GET',
+		signal,
+	});
+};
+
+export const getGetSystemDashboardQueryKey = ({
+	source,
+}: GetSystemDashboardPathParameters) => {
+	return [`/api/v1/system/${source}`] as const;
+};
+
+export const getGetSystemDashboardQueryOptions = <
+	TData = Awaited<ReturnType<typeof getSystemDashboard>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(
+	{ source }: GetSystemDashboardPathParameters,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof getSystemDashboard>>,
+			TError,
+			TData
+		>;
+	},
+) => {
+	const { query: queryOptions } = options ?? {};
+
+	const queryKey =
+		queryOptions?.queryKey ?? getGetSystemDashboardQueryKey({ source });
+
+	const queryFn: QueryFunction<
+		Awaited<ReturnType<typeof getSystemDashboard>>
+	> = ({ signal }) => getSystemDashboard({ source }, signal);
+
+	return {
+		queryKey,
+		queryFn,
+		enabled: !!source,
+		...queryOptions,
+	} as UseQueryOptions<
+		Awaited<ReturnType<typeof getSystemDashboard>>,
+		TError,
+		TData
+	> & { queryKey: QueryKey };
+};
+
+export type GetSystemDashboardQueryResult = NonNullable<
+	Awaited<ReturnType<typeof getSystemDashboard>>
+>;
+export type GetSystemDashboardQueryError = ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Get system dashboard
+ */
+
+export function useGetSystemDashboard<
+	TData = Awaited<ReturnType<typeof getSystemDashboard>>,
+	TError = ErrorType<RenderErrorResponseDTO>,
+>(
+	{ source }: GetSystemDashboardPathParameters,
+	options?: {
+		query?: UseQueryOptions<
+			Awaited<ReturnType<typeof getSystemDashboard>>,
+			TError,
+			TData
+		>;
+	},
+): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
+	const queryOptions = getGetSystemDashboardQueryOptions({ source }, options);
+
+	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
+		queryKey: QueryKey;
+	};
+
+	query.queryKey = queryOptions.queryKey;
+
+	return query;
+}
+
+/**
+ * @summary Get system dashboard
+ */
+export const invalidateGetSystemDashboard = async (
+	queryClient: QueryClient,
+	{ source }: GetSystemDashboardPathParameters,
+	options?: InvalidateOptions,
+): Promise<QueryClient> => {
+	await queryClient.invalidateQueries(
+		{ queryKey: getGetSystemDashboardQueryKey({ source }) },
+		options,
+	);
+
+	return queryClient;
+};
+
+/**
+ * This endpoint replaces the system dashboard for the callers org with the provided payload.
+ * @summary Update system dashboard
+ */
+export const updateSystemDashboard = (
+	{ source }: UpdateSystemDashboardPathParameters,
+	dashboardtypesStorableDashboardDataDTO: BodyType<DashboardtypesStorableDashboardDataDTO>,
+) => {
+	return GeneratedAPIInstance<UpdateSystemDashboard200>({
+		url: `/api/v1/system/${source}`,
+		method: 'PUT',
+		headers: { 'Content-Type': 'application/json' },
+		data: dashboardtypesStorableDashboardDataDTO,
+	});
+};
+
+export const getUpdateSystemDashboardMutationOptions = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof updateSystemDashboard>>,
+		TError,
+		{
+			pathParams: UpdateSystemDashboardPathParameters;
+			data: BodyType<DashboardtypesStorableDashboardDataDTO>;
+		},
+		TContext
+	>;
+}): UseMutationOptions<
+	Awaited<ReturnType<typeof updateSystemDashboard>>,
+	TError,
+	{
+		pathParams: UpdateSystemDashboardPathParameters;
+		data: BodyType<DashboardtypesStorableDashboardDataDTO>;
+	},
+	TContext
+> => {
+	const mutationKey = ['updateSystemDashboard'];
+	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 updateSystemDashboard>>,
+		{
+			pathParams: UpdateSystemDashboardPathParameters;
+			data: BodyType<DashboardtypesStorableDashboardDataDTO>;
+		}
+	> = (props) => {
+		const { pathParams, data } = props ?? {};
+
+		return updateSystemDashboard(pathParams, data);
+	};
+
+	return { mutationFn, ...mutationOptions };
+};
+
+export type UpdateSystemDashboardMutationResult = NonNullable<
+	Awaited<ReturnType<typeof updateSystemDashboard>>
+>;
+export type UpdateSystemDashboardMutationBody =
+	BodyType<DashboardtypesStorableDashboardDataDTO>;
+export type UpdateSystemDashboardMutationError =
+	ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Update system dashboard
+ */
+export const useUpdateSystemDashboard = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof updateSystemDashboard>>,
+		TError,
+		{
+			pathParams: UpdateSystemDashboardPathParameters;
+			data: BodyType<DashboardtypesStorableDashboardDataDTO>;
+		},
+		TContext
+	>;
+}): UseMutationResult<
+	Awaited<ReturnType<typeof updateSystemDashboard>>,
+	TError,
+	{
+		pathParams: UpdateSystemDashboardPathParameters;
+		data: BodyType<DashboardtypesStorableDashboardDataDTO>;
+	},
+	TContext
+> => {
+	const mutationOptions = getUpdateSystemDashboardMutationOptions(options);
+
+	return useMutation(mutationOptions);
+};
+/**
+ * This resets edited/updated system dashboard to default system dashboard.
+ * @summary Reset system dashboard to defaults
+ */
+export const resetSystemDashboard = (
+	{ source }: ResetSystemDashboardPathParameters,
+	signal?: AbortSignal,
+) => {
+	return GeneratedAPIInstance<ResetSystemDashboard200>({
+		url: `/api/v1/system/${source}/reset`,
+		method: 'POST',
+		signal,
+	});
+};
+
+export const getResetSystemDashboardMutationOptions = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof resetSystemDashboard>>,
+		TError,
+		{ pathParams: ResetSystemDashboardPathParameters },
+		TContext
+	>;
+}): UseMutationOptions<
+	Awaited<ReturnType<typeof resetSystemDashboard>>,
+	TError,
+	{ pathParams: ResetSystemDashboardPathParameters },
+	TContext
+> => {
+	const mutationKey = ['resetSystemDashboard'];
+	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 resetSystemDashboard>>,
+		{ pathParams: ResetSystemDashboardPathParameters }
+	> = (props) => {
+		const { pathParams } = props ?? {};
+
+		return resetSystemDashboard(pathParams);
+	};
+
+	return { mutationFn, ...mutationOptions };
+};
+
+export type ResetSystemDashboardMutationResult = NonNullable<
+	Awaited<ReturnType<typeof resetSystemDashboard>>
+>;
+
+export type ResetSystemDashboardMutationError =
+	ErrorType<RenderErrorResponseDTO>;
+
+/**
+ * @summary Reset system dashboard to defaults
+ */
+export const useResetSystemDashboard = <
+	TError = ErrorType<RenderErrorResponseDTO>,
+	TContext = unknown,
+>(options?: {
+	mutation?: UseMutationOptions<
+		Awaited<ReturnType<typeof resetSystemDashboard>>,
+		TError,
+		{ pathParams: ResetSystemDashboardPathParameters },
+		TContext
+	>;
+}): UseMutationResult<
+	Awaited<ReturnType<typeof resetSystemDashboard>>,
+	TError,
+	{ pathParams: ResetSystemDashboardPathParameters },
+	TContext
+> => {
+	const mutationOptions = getResetSystemDashboardMutationOptions(options);
+
+	return useMutation(mutationOptions);
+};

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

@@ -1,22 +0,0 @@
-.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

@@ -1,46 +0,0 @@
-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

@@ -1,89 +0,0 @@
-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,7 +46,6 @@ function DeleteMemberDialog({
 				color="destructive"
 				disabled={isDeleting}
 				onClick={onConfirm}
-				loading={isDeleting}
 			>
 				<Trash2 size={12} />
 				{isDeleting ? 'Processing...' : title}
@@ -64,6 +63,7 @@ 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,6 +28,18 @@
 		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;
@@ -36,7 +48,7 @@
 		padding: var(--padding-1) var(--padding-2);
 		border-radius: 2px;
 		background: var(--l2-background);
-		border: 1px solid var(--border);
+		border: 1px solid var(--l1-border);
 		box-sizing: border-box;
 
 		&--disabled {
@@ -53,8 +65,8 @@
 	}
 
 	&__email-text {
-		font-size: var(--paragraph-base-400-font-size);
-		font-weight: var(--paragraph-base-400-font-weight);
+		font-size: var(--font-size-sm);
+		font-weight: var(--font-weight-normal);
 		color: var(--foreground);
 		line-height: var(--line-height-18);
 		letter-spacing: -0.07px;
@@ -166,6 +178,36 @@
 	}
 }
 
+.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);
@@ -222,6 +264,13 @@
 	}
 
 	&__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));
-					void refetchUser();
+					refetchUser();
 				} catch (err) {
 					setSaveErrors((prev) =>
 						prev.map((e) =>
@@ -250,7 +250,7 @@ function EditMemberDrawer({
 				});
 			}
 			setSaveErrors((prev) => prev.filter((e) => e.context !== 'Name update'));
-			void refetchUser();
+			refetchUser();
 		} catch (err) {
 			setSaveErrors((prev) =>
 				prev.map((e) =>
@@ -319,7 +319,7 @@ function EditMemberDrawer({
 								}),
 							];
 						});
-						void refetchUser();
+						refetchUser();
 					},
 				});
 			} else {
@@ -340,7 +340,7 @@ function EditMemberDrawer({
 				onComplete();
 			}
 
-			void refetchUser();
+			refetchUser();
 		} finally {
 			setIsSaving(false);
 		}
@@ -465,6 +465,7 @@ function EditMemberDrawer({
 								prev.filter((err) => err.context !== 'Name update'),
 							);
 						}}
+						className="edit-member-drawer__input"
 						placeholder="Enter name"
 						disabled={isRootUser || isDeleted}
 					/>
@@ -630,7 +631,7 @@ function EditMemberDrawer({
 					</div>
 
 					<div className="edit-member-drawer__footer-right">
-						<Button variant="outlined" color="secondary" onClick={handleClose}>
+						<Button variant="solid" color="secondary" onClick={handleClose}>
 							<X size={14} />
 							Cancel
 						</Button>
@@ -640,7 +641,6 @@ 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,8 +44,9 @@ function ResetLinkDialog({
 						<span className="reset-link-dialog__link-text">{resetLink}</span>
 					</div>
 					<Button
-						variant="link"
+						variant="outlined"
 						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, Plus, Trash2, X } from '@signozhq/icons';
+import { ChevronDown, CircleAlert, Plus, Trash2, X } from '@signozhq/icons';
 import {
 	Button,
 	Callout,
@@ -294,8 +294,10 @@ function InviteMembersModal({
 							type="error"
 							size="small"
 							showIcon
-							title={getValidationErrorMessage()}
-						/>
+							icon={<CircleAlert size={12} />}
+						>
+							{getValidationErrorMessage()}
+						</Callout>
 					</div>
 				)}
 			</div>

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

@@ -87,7 +87,7 @@
 
 			input {
 				color: var(--l1-foreground);
-				font-size: var(--font-size-xs);
+				font-size: var(--font-size-sm);
 			}
 
 			.ant-picker-suffix {
@@ -126,6 +126,12 @@
 	}
 
 	&__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;
 	}
@@ -146,7 +152,6 @@
 		color: var(--foreground);
 		letter-spacing: 0.48px;
 		text-transform: uppercase;
-		margin-bottom: var(--spacing-4);
 	}
 
 	&__footer {

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

@@ -22,8 +22,9 @@ function KeyCreatedPhase({
 				<div className="add-key-modal__key-display">
 					<span className="add-key-modal__key-text">{createdKey.key}</span>
 					<Button
-						variant="link"
+						variant="outlined"
 						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" onClick={onClose}>
+					<Button variant="solid" color="secondary" size="sm" onClick={onClose}>
 						Cancel
 					</Button>
 					<Button
@@ -115,6 +115,7 @@ 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="link" color="destructive" onClick={onRevokeClick}>
+				<Button variant="ghost" 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: var(--font-size-xs);
+				font-size: 13px;
 			}
 
 			.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 { RevokeKeyFooter } from '../RevokeKeyModal';
+import { RevokeKeyContent } from '../RevokeKeyModal';
 import EditKeyForm from './EditKeyForm';
 import type { FormValues } from './types';
 import { DEFAULT_FORM_VALUES, ExpiryMode } from './types';
@@ -158,25 +158,17 @@ function EditKeyModal({ keyItem }: EditKeyModalProps): JSX.Element {
 			}
 			width={isRevokeConfirmOpen ? 'narrow' : 'base'}
 			className={
-				isRevokeConfirmOpen ? 'alert-dialog sa-delete-dialog' : 'edit-key-modal'
+				isRevokeConfirmOpen ? 'alert-dialog delete-dialog' : 'edit-key-modal'
 			}
 			showCloseButton={!isRevokeConfirmOpen}
 			disableOutsideClick={isErrorModalVisible}
-			footer={
-				isRevokeConfirmOpen ? (
-					<RevokeKeyFooter
-						isRevoking={isRevoking}
-						onCancel={(): void => setIsRevokeConfirmOpen(false)}
-						onConfirm={handleRevoke}
-					/>
-				) : undefined
-			}
 		>
 			{isRevokeConfirmOpen ? (
-				<>
-					Revoking this key will permanently invalidate it. Any systems using this
-					key will lose access immediately.
-				</>
+				<RevokeKeyContent
+					isRevoking={isRevoking}
+					onCancel={(): void => setIsRevokeConfirmOpen(false)}
+					onConfirm={handleRevoke}
+				/>
 			) : (
 				<EditKeyForm
 					register={register}

frontend/src/components/ServiceAccountDrawer/OverviewTab.tsx

@@ -72,6 +72,7 @@ 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,32 +17,39 @@ import { parseAsString, useQueryState } from 'nuqs';
 import { useErrorModal } from 'providers/ErrorModalProvider';
 import APIError from 'types/api/error';
 
-export interface RevokeKeyFooterProps {
+export interface RevokeKeyContentProps {
 	isRevoking: boolean;
 	onCancel: () => void;
 	onConfirm: () => void;
 }
 
-export function RevokeKeyFooter({
+export function RevokeKeyContent({
 	isRevoking,
 	onCancel,
 	onConfirm,
-}: RevokeKeyFooterProps): JSX.Element {
+}: RevokeKeyContentProps): JSX.Element {
 	return (
 		<>
-			<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>
+			<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>
 		</>
 	);
 }
@@ -105,19 +112,15 @@ function RevokeKeyModal(): JSX.Element {
 			}}
 			title={`Revoke ${keyName ?? 'key'}?`}
 			width="narrow"
-			className="alert-dialog sa-delete-dialog"
+			className="alert-dialog delete-dialog"
 			showCloseButton={false}
 			disableOutsideClick={isErrorModalVisible}
-			footer={
-				<RevokeKeyFooter
-					isRevoking={isRevoking}
-					onCancel={handleCancel}
-					onConfirm={handleConfirm}
-				/>
-			}
 		>
-			Revoking this key will permanently invalidate it. Any systems using this key
-			will lose access immediately.
+			<RevokeKeyContent
+				isRevoking={isRevoking}
+				onCancel={handleCancel}
+				onConfirm={handleConfirm}
+			/>
 		</DialogWrapper>
 	);
 }

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

@@ -57,8 +57,6 @@
 				color: var(--l1-foreground);
 			}
 		}
-
-		min-width: 220px;
 	}
 
 	&__tab {
@@ -168,6 +166,18 @@
 		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;
@@ -176,7 +186,7 @@
 		padding: 0 var(--padding-2);
 		border-radius: 2px;
 		background: var(--l2-background);
-		border: 1px solid var(--border);
+		border: 1px solid var(--l1-border);
 
 		&--disabled {
 			cursor: not-allowed;
@@ -185,8 +195,8 @@
 	}
 
 	&__input-text {
-		font-size: var(--paragraph-base-400-font-size);
-		font-weight: var(--paragraph-base-400-font-weight);
+		font-size: var(--font-size-sm);
+		font-weight: var(--font-weight-normal);
 		color: var(--foreground);
 		line-height: var(--line-height-18);
 		letter-spacing: -0.07px;

frontend/src/components/ServiceAccountDrawer/ServiceAccountDrawer.tsx

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

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

@@ -78,7 +78,6 @@
 		display: flex;
 		align-items: center;
 		gap: var(--spacing-10);
-		padding-left: 18px;
 	}
 
 	.custom-domain-card-meta-row.workspace-name-hidden {
@@ -125,6 +124,30 @@
 	}
 }
 
+.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,7 +204,6 @@ 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">
@@ -240,7 +239,12 @@ export default function CustomDomainSettings(): JSX.Element {
 								</div>
 							)}
 						>
-							<Button variant="link" color="none">
+							<Button
+								className="workspace-url-trigger"
+								disabled={isFetchingHosts}
+								variant="link"
+								color="none"
+							>
 								<Link2 size={12} />
 								<span>{stripProtocol(activeHost?.url ?? '')}</span>
 								<ChevronDown size={12} />

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

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

frontend/src/container/InfraMonitoringK8s/Base/K8sBaseDetails.tsx

@@ -37,7 +37,10 @@ import {
 	X,
 } from 'lucide-react';
 import { isCustomTimeRange, useGlobalTimeStore } from 'store/globalTime';
-import { NANO_SECOND_MULTIPLIER } from 'store/globalTime/utils';
+import {
+	getAutoRefreshQueryKey,
+	NANO_SECOND_MULTIPLIER,
+} from 'store/globalTime/utils';
 import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import {
 	IBuilderQuery,
@@ -187,19 +190,16 @@ function K8sBaseDetails<T>({
 	);
 
 	const selectedTime = useGlobalTimeStore((s) => s.selectedTime);
-	const lastComputedMinMax = useGlobalTimeStore((s) => s.lastComputedMinMax);
 	const getMinMaxTime = useGlobalTimeStore((s) => s.getMinMaxTime);
-	const getAutoRefreshQueryKey = useGlobalTimeStore(
-		(s) => s.getAutoRefreshQueryKey,
-	);
 
-	const { startMs, endMs } = useMemo(
-		() => ({
-			startMs: Math.floor(lastComputedMinMax.minTime / NANO_SECOND_MULTIPLIER),
-			endMs: Math.floor(lastComputedMinMax.maxTime / NANO_SECOND_MULTIPLIER),
-		}),
-		[lastComputedMinMax],
-	);
+	const { startMs, endMs } = useMemo(() => {
+		const { minTime: startNs, maxTime: endNs } = getMinMaxTime(selectedTime);
+
+		return {
+			startMs: Math.floor(startNs / NANO_SECOND_MULTIPLIER),
+			endMs: Math.floor(endNs / NANO_SECOND_MULTIPLIER),
+		};
+	}, [getMinMaxTime, selectedTime]);
 
 	const [modalTimeRange, setModalTimeRange] = useState(() => ({
 		startTime: startMs,
@@ -246,7 +246,7 @@ function K8sBaseDetails<T>({
 				`${queryKeyPrefix}EntityDetails`,
 				selectedItem,
 			),
-		[getAutoRefreshQueryKey, queryKeyPrefix, selectedItem, selectedTime],
+		[queryKeyPrefix, selectedItem, selectedTime],
 	);
 
 	const {

frontend/src/container/InfraMonitoringK8s/Base/K8sBaseList.tsx

@@ -16,7 +16,10 @@ import { InfraMonitoringEvents } from 'constants/events';
 import { ChevronDown, ChevronRight } from 'lucide-react';
 import { parseAsString, useQueryState } from 'nuqs';
 import { useGlobalTimeStore } from 'store/globalTime';
-import { NANO_SECOND_MULTIPLIER } from 'store/globalTime/utils';
+import {
+	getAutoRefreshQueryKey,
+	NANO_SECOND_MULTIPLIER,
+} from 'store/globalTime/utils';
 import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { buildAbsolutePath, isModifierKeyPressed } from 'utils/app';
 import { openInNewTab } from 'utils/navigation';
@@ -111,9 +114,6 @@ export function K8sBaseList<T>({
 	const refreshInterval = useGlobalTimeStore((s) => s.refreshInterval);
 	const isRefreshEnabled = useGlobalTimeStore((s) => s.isRefreshEnabled);
 	const getMinMaxTime = useGlobalTimeStore((s) => s.getMinMaxTime);
-	const getAutoRefreshQueryKey = useGlobalTimeStore(
-		(s) => s.getAutoRefreshQueryKey,
-	);
 
 	const queryKey = useMemo(() => {
 		return getAutoRefreshQueryKey(
@@ -127,7 +127,6 @@ export function K8sBaseList<T>({
 			JSON.stringify(groupBy),
 		);
 	}, [
-		getAutoRefreshQueryKey,
 		selectedTime,
 		entity,
 		pageSize,

frontend/src/container/InfraMonitoringK8s/Base/K8sExpandedRow.tsx

@@ -11,7 +11,10 @@ import {
 } from 'antd';
 import { CornerDownRight } from 'lucide-react';
 import { useGlobalTimeStore } from 'store/globalTime';
-import { NANO_SECOND_MULTIPLIER } from 'store/globalTime/utils';
+import {
+	getAutoRefreshQueryKey,
+	NANO_SECOND_MULTIPLIER,
+} from 'store/globalTime/utils';
 import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 import { buildAbsolutePath, isModifierKeyPressed } from 'utils/app';
@@ -115,9 +118,6 @@ export function K8sExpandedRow<T>({
 	const refreshInterval = useGlobalTimeStore((s) => s.refreshInterval);
 	const isRefreshEnabled = useGlobalTimeStore((s) => s.isRefreshEnabled);
 	const getMinMaxTime = useGlobalTimeStore((s) => s.getMinMaxTime);
-	const getAutoRefreshQueryKey = useGlobalTimeStore(
-		(s) => s.getAutoRefreshQueryKey,
-	);
 
 	const queryKey = useMemo(() => {
 		return getAutoRefreshQueryKey(selectedTime, [
@@ -126,7 +126,7 @@ export function K8sExpandedRow<T>({
 			JSON.stringify(queryFilters),
 			JSON.stringify(orderBy),
 		]);
-	}, [getAutoRefreshQueryKey, selectedTime, record.key, queryFilters, orderBy]);
+	}, [selectedTime, record.key, queryFilters, orderBy]);
 
 	const { data, isFetching, isLoading, isError } = useQuery({
 		queryKey,

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

@@ -1,346 +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;
-		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/HeroSection/HeroSection.tsx

@@ -0,0 +1,28 @@
+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/AccountActions.style.scss

@@ -117,12 +117,6 @@
 		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/HeroSection/components/AccountActions.tsx

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

frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/HeroSection/components/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 RemoveIntegrationAccount from '../../RemoveAccount/RemoveIntegrationAccount';
-import { RegionSelector } from '../RegionForm/RegionSelector';
-import { CloudAccount } from '../types';
+import logEvent from '../../../../../../api/common/logEvent';
+import { CloudAccount } from '../../types';
+import { RegionSelector } from './RegionSelector';
+import RemoveIntegrationAccount from './RemoveIntegrationAccount';
 
 import './AccountSettingsModal.style.scss';
 
@@ -110,7 +110,11 @@ function AccountSettingsModal({
 		form,
 		selectedRegions,
 		includeAllRegions,
-		account?.providerAccountId,
+		account?.id,
+		handleRemoveIntegrationAccountSuccess,
+		isSaveDisabled,
+		handleSubmit,
+		isLoading,
 		setSelectedRegions,
 		setIncludeAllRegions,
 	]);
@@ -129,7 +133,6 @@ function AccountSettingsModal({
 			<RemoveIntegrationAccount
 				accountId={account?.id}
 				onRemoveIntegrationAccountSuccess={handleRemoveIntegrationAccountSuccess}
-				cloudProvider={INTEGRATION_TYPES.AWS}
 			/>
 
 			<Button

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

@@ -1,8 +1,8 @@
-import { Callout } from '@signozhq/ui';
-import { Spin } from 'antd';
-import { LoaderCircle } from 'lucide-react';
+import { Color } from '@signozhq/design-tokens';
+import { Alert, Spin } from 'antd';
+import { LoaderCircle, TriangleAlert } from 'lucide-react';
 
-import { ModalStateEnum } from '../HeroSection/types';
+import { ModalStateEnum } from '../types';
 
 function AlertMessage({
 	modalState,
@@ -12,13 +12,14 @@ function AlertMessage({
 	switch (modalState) {
 		case ModalStateEnum.WAITING:
 			return (
-				<Callout
-					title={
+				<Alert
+					message={
 						<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"
 									/>
 								}
@@ -27,19 +28,21 @@ function AlertMessage({
 							<span className="retry-time">10</span> secs...
 						</div>
 					}
-					type="info"
-					showIcon={false}
+					className="cloud-account-setup-form__alert"
+					type="warning"
 				/>
 			);
 		case ModalStateEnum.ERROR:
 			return (
-				<Callout
-					title={
+				<Alert
+					message={
 						<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/HeroSection/components/CloudAccountSetupModal.style.scss

@@ -0,0 +1,180 @@
+.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/HeroSection/components/CloudAccountSetupModal.tsx

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

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

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

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

@@ -3,18 +3,15 @@ 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 AlertMessage from '../../AlertMessage';
+import { ModalStateEnum, RegionFormProps } from '../types';
+import AlertMessage from './AlertMessage';
 import {
 	ComplianceNote,
 	MonitoringRegionsSection,
 	RegionDeploymentSection,
-} from '../IntegrateNowFormSections';
+} from './IntegrateNowFormSections';
 import RenderConnectionFields from './RenderConnectionParams';
 
 export function RegionForm({
@@ -79,6 +76,8 @@ export function RegionForm({
 			layout="vertical"
 			onFinish={onSubmit}
 		>
+			<AlertMessage modalState={modalState} />
+
 			<div
 				className={cx(`cloud-account-setup-form__content`, {
 					disabled: isFormDisabled,
@@ -101,10 +100,6 @@ export function RegionForm({
 					isFormDisabled={isFormDisabled}
 				/>
 			</div>
-
-			<div className="cloud-account-setup-form__alert">
-				<AlertMessage modalState={modalState} />
-			</div>
 		</Form>
 	);
 }

frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/HeroSection/components/RemoveIntegrationAccount.scss

@@ -1,16 +1,9 @@
 .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/AmazonWebServices/HeroSection/components/RemoveIntegrationAccount.tsx

@@ -4,21 +4,16 @@ 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,
-	INTEGRATION_TYPES,
-} from 'container/Integrations/constants';
+import { INTEGRATION_TELEMETRY_EVENTS } 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 {
@@ -44,13 +39,12 @@ function RemoveIntegrationAccount({
 			},
 		});
 	const handleOk = (): void => {
-		logEvent(INTEGRATION_TELEMETRY_EVENTS.INTEGRATION_ACCOUNT_REMOVED, {
+		logEvent(INTEGRATION_TELEMETRY_EVENTS.AWS_INTEGRATION_ACCOUNT_REMOVED, {
 			accountId,
-			integration: cloudProvider,
 		});
 		disconnectAccount({
 			pathParams: {
-				cloudProvider,
+				cloudProvider: 'aws',
 				id: accountId,
 			},
 		});
@@ -84,28 +78,13 @@ function RemoveIntegrationAccount({
 					loading: isRemoveIntegrationLoading,
 				}}
 			>
-				{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).
-					</>
-				)}
+				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.
 			</Modal>
 		</div>
 	);

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

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

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

@@ -4,20 +4,15 @@ 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,
-	type,
-}: ServicesListProps): JSX.Element {
+function ServicesList({ cloudAccountId }: ServicesListProps): JSX.Element {
 	const urlQuery = useUrlQuery();
 	const navigate = useNavigate();
 	const hasValidCloudAccountId = Boolean(cloudAccountId);
@@ -27,7 +22,7 @@ function ServicesList({
 
 	const { data: servicesMetadata, isLoading } = useListServicesMetadata(
 		{
-			cloudProvider: type,
+			cloudProvider: 'aws',
 		},
 		serviceQueryParams,
 	);

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

@@ -0,0 +1,29 @@
+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/ServiceDashboards/ServiceDashboards',
+	'container/Integrations/CloudIntegration/AmazonWebServices/ServiceDashboards/ServiceDashboards',
 	() => ({
 		__esModule: true,
 		default: (): JSX.Element => <div data-testid="service-dashboards" />,

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

@@ -1,5 +1,4 @@
 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';
@@ -12,11 +11,10 @@ import { accountsResponse } from './mockData';
 const renderServiceDetails = (
 	_initialConfigLogsS3Buckets: Record<string, string[]> = {},
 	_serviceId = 's3sync',
-	type: IntegrationType = IntegrationType.AWS_SERVICES,
 ): RenderResult =>
 	render(
 		<MockQueryClientProvider>
-			<ServiceDetails type={type} />
+			<ServiceDetails />
 		</MockQueryClientProvider>,
 	);
 

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

@@ -0,0 +1,25 @@
+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

@@ -1,356 +0,0 @@
-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

@@ -1,150 +0,0 @@
-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,15 +1,16 @@
 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 type={type} />
-			<ServicesTabs type={type} />
+			<Header title={type} />
+
+			{type === IntegrationType.AWS_SERVICES && <AWSTabs />}
 		</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({ type }: { type: IntegrationType }): JSX.Element {
+function Header({ title }: { title: IntegrationType }): JSX.Element {
 	return (
 		<div className="cloud-header">
 			<div className="cloud-header__navigation">
@@ -25,30 +25,27 @@ function Header({ type }: { type: IntegrationType }): JSX.Element {
 							),
 						},
 						{
-							title: <div className="cloud-header__breadcrumb-title">{type}</div>,
+							title: <div className="cloud-header__breadcrumb-title">{title}</div>,
 						},
 					]}
 				/>
 			</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 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/ServiceTabs/ServicesTabs.tsx

@@ -1,30 +0,0 @@
-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/mapCloudAccountFromDto.ts

@@ -1,49 +0,0 @@
-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,32 +1,5 @@
-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

@@ -1,33 +0,0 @@
-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,6 +9,53 @@
 		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;
@@ -280,36 +327,6 @@
 			}
 		}
 	}
-
-	.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,5 +1,6 @@
 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';
@@ -54,19 +55,8 @@ function IntegrationDetailPage(): JSX.Element {
 		),
 	);
 
-	if (
-		integrationId === INTEGRATION_TYPES.AWS ||
-		integrationId === INTEGRATION_TYPES.AZURE
-	) {
-		return (
-			<CloudIntegration
-				type={
-					integrationId === INTEGRATION_TYPES.AWS
-						? IntegrationType.AWS_SERVICES
-						: IntegrationType.AZURE_SERVICES
-				}
-			/>
-		);
+	if (integrationId === INTEGRATION_TYPES.AWS) {
+		return <CloudIntegration type={IntegrationType.AWS_SERVICES} />;
 	}
 
 	return (
@@ -95,20 +85,20 @@ function IntegrationDetailPage(): JSX.Element {
 						<div className="error-btns">
 							<Button
 								variant="solid"
-								color="secondary"
+								color="primary"
 								onClick={(): Promise<any> => refetch()}
 								prefix={<RotateCw size={14} />}
 							>
 								Retry
 							</Button>
-							<Button
-								variant="solid"
-								color="secondary"
+							<div
+								className="contact-support"
 								onClick={(): void => handleContactSupport(isCloudUserVal)}
-								suffix={<MoveUpRight size={12} />}
 							>
-								Contact Support
-							</Button>
+								<Typography.Link className="text">Contact Support </Typography.Link>
+
+								<MoveUpRight size={14} color={Color.BG_ROBIN_400} />
+							</div>
 						</div>
 					</div>
 				</div>

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

@@ -22,7 +22,6 @@ 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',
-	INTEGRATION_ACCOUNT_REMOVED:
-		'Integration Detail page: Clicked remove Integration button for integration',
+	AWS_INTEGRATION_ACCOUNT_REMOVED:
+		'AWS 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, AZURE_INTEGRATION];
+export const ONE_CLICK_INTEGRATIONS = [AWS_INTEGRATION];
 
 export const AZURE_REGIONS: AzureRegion[] = [
 	{
@@ -81,7 +81,6 @@ 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',
-	AZURE_SERVICES = 'azure',
+	AWS_SERVICES = 'aws-services',
+	AZURE_SERVICES = 'azure-services',
 }
 
 interface LogField {
@@ -89,7 +89,6 @@ export interface CloudAccount {
 	cloud_account_id: string;
 	config: AzureCloudAccountConfig | AWSCloudAccountConfig;
 	status: AccountStatus | IServiceStatus;
-	providerAccountId: string;
 }
 
 export interface AzureCloudAccountConfig {

frontend/src/container/ListOfDashboard/DashboardsList.tsx

@@ -240,7 +240,7 @@ function DashboardsList(): JSX.Element {
 		isLocked: !!e.locked || false,
 		lastUpdatedBy: e.updatedBy,
 		image: e.data.image || Base64Icons[0],
-		variables: e.data.variables ?? {},
+		variables: e.data.variables,
 		widgets: e.data.widgets,
 		layout: e.data.layout,
 		panelMap: e.data.panelMap,

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

@@ -89,4 +89,25 @@
 			) !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="outlined"
-							color="secondary"
+							variant="dashed"
 							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,7 +196,6 @@ 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;
@@ -209,8 +208,6 @@ 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 }}>
@@ -226,7 +223,6 @@ export const getUplotClickData = ({
 		},
 		record,
 		label,
-		seriesColor,
 	};
 };
 
@@ -241,7 +237,6 @@ export const getPieChartClickData = (
 	queryName: string;
 	filters: FilterData[];
 	label: string | React.ReactNode;
-	seriesColor?: string;
 } | null => {
 	const { metric, queryName } = arc.data.record;
 	if (!queryName || !metric) {
@@ -253,7 +248,6 @@ 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,7 +22,6 @@ export interface AggregateData {
 		endTime: number;
 	};
 	label?: string | React.ReactNode;
-	seriesColor?: string;
 }
 
 const useAggregateDrilldown = ({

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

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

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

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

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

@@ -17,7 +17,7 @@ import dayjs, { Dayjs } from 'dayjs';
 import {
 	useGlobalTimeQueryInvalidate,
 	useIsGlobalTimeQueryRefreshing,
-} from 'store/globalTime';
+} from 'hooks/globalTime';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import useUrlQuery from 'hooks/useUrlQuery';
@@ -101,14 +101,14 @@ function DateTimeSelection({
 	if (modalInitialStartTime !== undefined) {
 		initialModalStartTime = modalInitialStartTime;
 	} else if (searchStartTime) {
-		initialModalStartTime = Number.parseInt(searchStartTime, 10);
+		initialModalStartTime = parseInt(searchStartTime, 10);
 	}
 
 	let initialModalEndTime = 0;
 	if (modalInitialEndTime !== undefined) {
 		initialModalEndTime = modalInitialEndTime;
 	} else if (searchEndTime) {
-		initialModalEndTime = Number.parseInt(searchEndTime, 10);
+		initialModalEndTime = parseInt(searchEndTime, 10);
 	}
 
 	const [modalStartTime, setModalStartTime] = useState<number>(
@@ -159,11 +159,9 @@ function DateTimeSelection({
 	const getTime = useCallback((): [number, number] | undefined => {
 		if (searchEndTime && searchStartTime) {
 			const startDate = dayjs(
-				new Date(Number.parseInt(getTimeString(searchStartTime), 10)),
-			);
-			const endDate = dayjs(
-				new Date(Number.parseInt(getTimeString(searchEndTime), 10)),
+				new Date(parseInt(getTimeString(searchStartTime), 10)),
 			);
+			const endDate = dayjs(new Date(parseInt(getTimeString(searchEndTime), 10)));
 
 			return [startDate.toDate().getTime() || 0, endDate.toDate().getTime() || 0];
 		}

frontend/src/hooks/Integrations/useGetIntegrationStatus.ts

@@ -7,13 +7,6 @@ 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<
@@ -27,5 +20,5 @@ export const useGetIntegrationStatus = ({
 		enabled:
 			!!integrationId &&
 			integrationId !== '' &&
-			!isOneClickIntegration(integrationId),
+			integrationId !== INTEGRATION_TYPES.AWS,
 	});

frontend/src/hooks/dashboard/__test__/useTransformDashboardVariables.test.tsx

@@ -71,7 +71,7 @@ describe('useTransformDashboardVariables', () => {
 
 			const result = transformDashboardVariables(dashboard);
 
-			const orders = Object.values(result.data.variables!).map((v) => v.order);
+			const orders = Object.values(result.data.variables).map((v) => v.order);
 			expect(orders).toContain(0);
 			expect(orders).toContain(1);
 		});
@@ -84,7 +84,7 @@ describe('useTransformDashboardVariables', () => {
 
 			const result = transformDashboardVariables(dashboard);
 
-			expect(result.data.variables!.v1.order).toBe(5);
+			expect(result.data.variables.v1.order).toBe(5);
 		});
 
 		it('assigns unique orders across multiple variables that all lack an order', () => {
@@ -97,7 +97,7 @@ describe('useTransformDashboardVariables', () => {
 
 			const result = transformDashboardVariables(dashboard);
 
-			const orders = Object.values(result.data.variables!).map((v) => v.order);
+			const orders = Object.values(result.data.variables).map((v) => v.order);
 			// All three newly assigned orders must be distinct
 			expect(new Set(orders).size).toBe(3);
 		});
@@ -112,7 +112,7 @@ describe('useTransformDashboardVariables', () => {
 
 			const result = transformDashboardVariables(dashboard);
 
-			expect(result.data.variables!.v1.id).toMatch(
+			expect(result.data.variables.v1.id).toMatch(
 				/^[0-9a-f]{8}-[0-9a-f]{4}-4[0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i,
 			);
 		});
@@ -125,7 +125,7 @@ describe('useTransformDashboardVariables', () => {
 
 			const result = transformDashboardVariables(dashboard);
 
-			expect(result.data.variables!.v1.id).toBe('keep-me');
+			expect(result.data.variables.v1.id).toBe('keep-me');
 		});
 	});
 
@@ -145,7 +145,7 @@ describe('useTransformDashboardVariables', () => {
 
 			const result = transformDashboardVariables(dashboard);
 
-			expect(result.data.variables!.v1.defaultValue).toBe('hello');
+			expect(result.data.variables.v1.defaultValue).toBe('hello');
 		});
 
 		it('does not overwrite an existing defaultValue', () => {
@@ -163,7 +163,7 @@ describe('useTransformDashboardVariables', () => {
 
 			const result = transformDashboardVariables(dashboard);
 
-			expect(result.data.variables!.v1.defaultValue).toBe('keep');
+			expect(result.data.variables.v1.defaultValue).toBe('keep');
 		});
 	});
 
@@ -178,7 +178,7 @@ describe('useTransformDashboardVariables', () => {
 
 			const result = transformDashboardVariables(dashboard);
 
-			expect(result.data.variables!.v1.selectedValue).toBe('staging');
+			expect(result.data.variables.v1.selectedValue).toBe('staging');
 		});
 
 		it('applies localStorage allSelected over DB value', () => {
@@ -196,7 +196,7 @@ describe('useTransformDashboardVariables', () => {
 
 			const result = transformDashboardVariables(dashboard);
 
-			expect(result.data.variables!.v1.allSelected).toBe(true);
+			expect(result.data.variables.v1.allSelected).toBe(true);
 		});
 	});
 
@@ -217,7 +217,7 @@ describe('useTransformDashboardVariables', () => {
 
 			const result = transformDashboardVariables(dashboard);
 
-			expect(result.data.variables!.v1.allSelected).toBe(true);
+			expect(result.data.variables.v1.allSelected).toBe(true);
 		});
 
 		it('sets selectedValue from URL and clears allSelected when showALLOption is true', () => {
@@ -237,8 +237,8 @@ describe('useTransformDashboardVariables', () => {
 
 			const result = transformDashboardVariables(dashboard);
 
-			expect(result.data.variables!.v1.selectedValue).toBe('dev');
-			expect(result.data.variables!.v1.allSelected).toBe(false);
+			expect(result.data.variables.v1.selectedValue).toBe('dev');
+			expect(result.data.variables.v1.allSelected).toBe(false);
 		});
 
 		it('does not set allSelected=false when showALLOption is false', () => {
@@ -258,8 +258,8 @@ describe('useTransformDashboardVariables', () => {
 
 			const result = transformDashboardVariables(dashboard);
 
-			expect(result.data.variables!.v1.selectedValue).toBe('dev');
-			expect(result.data.variables!.v1.allSelected).toBe(true);
+			expect(result.data.variables.v1.selectedValue).toBe('dev');
+			expect(result.data.variables.v1.allSelected).toBe(true);
 		});
 
 		it('normalizes array URL value to single value for single-select variable', () => {
@@ -277,7 +277,7 @@ describe('useTransformDashboardVariables', () => {
 
 			const result = transformDashboardVariables(dashboard);
 
-			expect(result.data.variables!.v1.selectedValue).toBe('prod');
+			expect(result.data.variables.v1.selectedValue).toBe('prod');
 		});
 
 		it('wraps single URL value in array for multi-select variable', () => {
@@ -292,7 +292,7 @@ describe('useTransformDashboardVariables', () => {
 
 			const result = transformDashboardVariables(dashboard);
 
-			expect(result.data.variables!.v1.selectedValue).toStrictEqual(['prod']);
+			expect(result.data.variables.v1.selectedValue).toStrictEqual(['prod']);
 		});
 
 		it('looks up URL variable by variable id when name is absent', () => {
@@ -306,7 +306,7 @@ describe('useTransformDashboardVariables', () => {
 
 			const result = transformDashboardVariables(dashboard);
 
-			expect(result.data.variables!.v1.selectedValue).toBe('fallback');
+			expect(result.data.variables.v1.selectedValue).toBe('fallback');
 		});
 	});
 
@@ -327,11 +327,11 @@ describe('useTransformDashboardVariables', () => {
 			const dashboard = makeDashboard({
 				v1: makeVariable({ id: 'id1', name: 'env', selectedValue: 'prod' }),
 			});
-			const originalValue = dashboard.data.variables!.v1.selectedValue;
+			const originalValue = dashboard.data.variables.v1.selectedValue;
 
 			transformDashboardVariables(dashboard);
 
-			expect(dashboard.data.variables!.v1.selectedValue).toBe(originalValue);
+			expect(dashboard.data.variables.v1.selectedValue).toBe(originalValue);
 		});
 	});
 });

frontend/src/hooks/dashboard/useTransformDashboardVariables.ts

@@ -22,12 +22,11 @@ export function useTransformDashboardVariables(dashboardId: string): Pick<
 		localStorageVariables: any,
 	): Dashboard => {
 		const updatedData = data;
-		const variables = data?.data?.variables;
-		if (data && localStorageVariables && variables) {
-			const updatedVariables = variables;
+		if (data && localStorageVariables) {
+			const updatedVariables = data.data.variables;
 			const variablesFromUrl = getUrlVariables();
-			Object.keys(variables).forEach((variable) => {
-				const variableData = variables[variable];
+			Object.keys(data.data.variables).forEach((variable) => {
+				const variableData = data.data.variables[variable];
 
 				// values from url
 				const urlVariable = variableData?.name
@@ -35,7 +34,7 @@ export function useTransformDashboardVariables(dashboardId: string): Pick<
 					: variablesFromUrl[variableData.id];
 
 				let updatedVariable = {
-					...variables[variable],
+					...data.data.variables[variable],
 					...localStorageVariables[variableData.name as any],
 				};
 

frontend/src/hooks/globalTime/index.ts

@@ -0,0 +1,2 @@
+export { useGlobalTimeQueryInvalidate } from './useGlobalTimeQueryInvalidate';
+export { useIsGlobalTimeQueryRefreshing } from './useIsGlobalTimeQueryRefreshing';

frontend/src/hooks/globalTime/useGlobalTimeQueryInvalidate.ts

@@ -0,0 +1,16 @@
+import { useCallback } from 'react';
+import { useQueryClient } from 'react-query';
+import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
+
+/**
+ * Use when you want to invalida any query tracked by {@link REACT_QUERY_KEY.AUTO_REFRESH_QUERY}
+ */
+export function useGlobalTimeQueryInvalidate(): () => Promise<void> {
+	const queryClient = useQueryClient();
+
+	return useCallback(async () => {
+		return await queryClient.invalidateQueries({
+			queryKey: [REACT_QUERY_KEY.AUTO_REFRESH_QUERY],
+		});
+	}, [queryClient]);
+}

frontend/src/hooks/globalTime/useIsGlobalTimeQueryRefreshing.ts

@@ -0,0 +1,13 @@
+import { useIsFetching } from 'react-query';
+import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
+
+/**
+ * Use when you want to know if any query tracked by {@link REACT_QUERY_KEY.AUTO_REFRESH_QUERY} is refreshing
+ */
+export function useIsGlobalTimeQueryRefreshing(): boolean {
+	return (
+		useIsFetching({
+			queryKey: [REACT_QUERY_KEY.AUTO_REFRESH_QUERY],
+		}) > 0
+	);
+}

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/HeroSection/types';
+} from 'container/Integrations/CloudIntegration/AmazonWebServices/HeroSection/types';
+import { INTEGRATION_TYPES } from 'container/Integrations/constants';
 import useAxiosError from 'hooks/useAxiosError';
 import { regions } from 'utils/regions';
 

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

@@ -1,142 +0,0 @@
-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

@@ -1,188 +0,0 @@
-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/DashboardWidget/index.tsx

@@ -85,7 +85,7 @@ function DashboardWidgetInternal({
 			setDashboardData(updatedDashboardData);
 			setDashboardVariablesStore({
 				dashboardId,
-				variables: updatedDashboardData.data.variables ?? {},
+				variables: updatedDashboardData.data.variables,
 			});
 		},
 	});

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

@@ -4,7 +4,7 @@
 	gap: 8px;
 	padding: 8px;
 	cursor: pointer;
-	color: var(--muted-foreground);
+	color: var(--foreground);
 	font-family: Inter;
 	font-size: var(--font-size-sm);
 	font-weight: 600;
@@ -20,10 +20,13 @@
 	overflow: hidden;
 	text-overflow: ellipsis;
 
-	&:hover,
+	&:hover {
+		background-color: var(--l1-background);
+	}
+
 	&:focus {
 		outline: none;
-		background-color: var(--l2-background-hover);
+		background-color: var(--l1-background);
 	}
 
 	&.disabled {
@@ -44,8 +47,7 @@
 		}
 
 		&:hover {
-			background-color: var(--danger-background);
-			color: var(--l1-foreground);
+			background-color: var(--bg-cherry-100);
 		}
 	}
 
@@ -72,24 +74,73 @@
 }
 
 .context-menu-header {
-	padding: 8px 12px;
-	border-bottom: 1px solid var(--l2-border);
+	padding-bottom: 4px;
+	border-bottom: 1px solid var(--l1-border);
 	color: var(--muted-foreground);
 }
 
+// Target the popover inner specifically for context menu
 .context-menu .ant-popover-inner {
-	padding: 0;
-	border-radius: 6px;
-	max-width: 300px;
-	background: var(--l2-background) !important;
-	border: 1px solid var(--l2-border) !important;
+	padding: 12px 8px !important;
+	// max-height: 254px !important;
+	max-width: 300px !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;
-	inset: 0;
+	top: 0;
+	left: 0;
+	width: 100vw;
+	height: 100vh;
 	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/providers/Dashboard/store/dashboardVariables/__tests__/dashboardVariablesStoreUtils.test.ts

@@ -41,20 +41,6 @@ describe('dashboardVariablesStoreUtils', () => {
 			expect(result).toStrictEqual([]);
 		});
 
-		it('should return empty array when variables is undefined', () => {
-			const result = buildSortedVariablesArray(
-				undefined as unknown as IDashboardVariables,
-			);
-			expect(result).toStrictEqual([]);
-		});
-
-		it('should return empty array when variables is null', () => {
-			const result = buildSortedVariablesArray(
-				null as unknown as IDashboardVariables,
-			);
-			expect(result).toStrictEqual([]);
-		});
-
 		it('should create copies of variables (not references)', () => {
 			const original = createVariable({ name: 'a', order: 0 });
 			const variables: IDashboardVariables = { a: original };

frontend/src/providers/Dashboard/store/dashboardVariables/dashboardVariablesStoreUtils.ts

@@ -17,11 +17,11 @@ import {
  * Build a sorted array of variables by their order property
  */
 export function buildSortedVariablesArray(
-	variables?: IDashboardVariables,
+	variables: IDashboardVariables,
 ): IDashboardVariable[] {
 	const sortedVariablesArray: IDashboardVariable[] = [];
 
-	Object.values(variables ?? {}).forEach((value) => {
+	Object.values(variables).forEach((value) => {
 		sortedVariablesArray.push({ ...value });
 	});
 

frontend/src/store/globalTime/GlobalTimeContext.tsx

@@ -1,71 +0,0 @@
-import {
-	// oxlint-disable-next-line no-restricted-imports
-	createContext,
-	ReactNode,
-	// oxlint-disable-next-line no-restricted-imports
-	useContext,
-	useState,
-} from 'react';
-import { DEFAULT_TIME_RANGE } from 'container/TopNav/DateTimeSelectionV2/constants';
-
-import get from 'api/browser/localstorage/get';
-
-import {
-	createGlobalTimeStore,
-	defaultGlobalTimeStore,
-	GlobalTimeStoreApi,
-} from './globalTimeStore';
-import { GlobalTimeProviderOptions, GlobalTimeSelectedTime } from './types';
-import { usePersistence } from './usePersistence';
-import { useQueryCacheSync } from './useQueryCacheSync';
-import { useUrlSync } from './useUrlSync';
-import { useComputedMinMaxSync } from 'store/globalTime/useComputedMinMaxSync';
-
-export const GlobalTimeContext = createContext<GlobalTimeStoreApi | null>(null);
-
-export function GlobalTimeProvider({
-	children,
-	name,
-	inheritGlobalTime = false,
-	initialTime,
-	enableUrlParams = false,
-	removeQueryParamsOnUnmount = false,
-	localStoragePersistKey,
-	refreshInterval: initialRefreshInterval,
-}: GlobalTimeProviderOptions & { children: ReactNode }): JSX.Element {
-	const parentStore = useContext(GlobalTimeContext);
-	const globalStore = parentStore ?? defaultGlobalTimeStore;
-
-	const resolveInitialTime = (): GlobalTimeSelectedTime => {
-		if (inheritGlobalTime) {
-			return globalStore.getState().selectedTime;
-		}
-		if (localStoragePersistKey) {
-			const stored = get(localStoragePersistKey);
-			if (stored) {
-				return stored as GlobalTimeSelectedTime;
-			}
-		}
-		return initialTime ?? DEFAULT_TIME_RANGE;
-	};
-
-	// Create isolated store (stable reference)
-	const [store] = useState(() =>
-		createGlobalTimeStore({
-			name,
-			selectedTime: resolveInitialTime(),
-			refreshInterval: initialRefreshInterval ?? 0,
-		}),
-	);
-
-	useComputedMinMaxSync(store);
-	useQueryCacheSync(store);
-	useUrlSync(store, enableUrlParams, removeQueryParamsOnUnmount);
-	usePersistence(store, localStoragePersistKey);
-
-	return (
-		<GlobalTimeContext.Provider value={store}>
-			{children}
-		</GlobalTimeContext.Provider>
-	);
-}

frontend/src/store/globalTime/__tests__/GlobalTimeContext.test.tsx

@@ -1,693 +0,0 @@
-import { act, renderHook, waitFor } from '@testing-library/react';
-import { NuqsTestingAdapter } from 'nuqs/adapters/testing';
-import { ReactNode } from 'react';
-import { QueryClient, QueryClientProvider } from 'react-query';
-
-import set from 'api/browser/localstorage/set';
-
-import { GlobalTimeProvider } from '../GlobalTimeContext';
-import { useGlobalTime } from '../hooks';
-import { GlobalTimeProviderOptions } from '../types';
-import { createCustomTimeRange, NANO_SECOND_MULTIPLIER } from '../utils';
-
-jest.mock('api/browser/localstorage/set');
-
-const createTestQueryClient = (): QueryClient =>
-	new QueryClient({
-		defaultOptions: {
-			queries: {
-				retry: false,
-			},
-		},
-	});
-
-const createWrapper = (
-	providerProps: GlobalTimeProviderOptions,
-	nuqsProps?: { searchParams?: string },
-) => {
-	const queryClient = createTestQueryClient();
-
-	return function Wrapper({ children }: { children: ReactNode }): JSX.Element {
-		return (
-			<QueryClientProvider client={queryClient}>
-				<NuqsTestingAdapter searchParams={nuqsProps?.searchParams}>
-					<GlobalTimeProvider {...providerProps}>{children}</GlobalTimeProvider>
-				</NuqsTestingAdapter>
-			</QueryClientProvider>
-		);
-	};
-};
-
-describe('GlobalTimeProvider', () => {
-	describe('name prop', () => {
-		it('should pass name to store when provided', () => {
-			const wrapper = createWrapper({ name: 'test-drawer' });
-
-			const { result } = renderHook(() => useGlobalTime((s) => s.name), {
-				wrapper,
-			});
-
-			expect(result.current).toBe('test-drawer');
-		});
-
-		it('should have undefined name when not provided', () => {
-			const wrapper = createWrapper({});
-
-			const { result } = renderHook(() => useGlobalTime((s) => s.name), {
-				wrapper,
-			});
-
-			expect(result.current).toBeUndefined();
-		});
-	});
-
-	describe('store isolation', () => {
-		it('should create isolated store for each provider', () => {
-			const wrapper1 = createWrapper({ initialTime: '1h' });
-			const wrapper2 = createWrapper({ initialTime: '15m' });
-
-			const { result: result1 } = renderHook(
-				() => useGlobalTime((s) => s.selectedTime),
-				{ wrapper: wrapper1 },
-			);
-			const { result: result2 } = renderHook(
-				() => useGlobalTime((s) => s.selectedTime),
-				{ wrapper: wrapper2 },
-			);
-
-			expect(result1.current).toBe('1h');
-			expect(result2.current).toBe('15m');
-		});
-	});
-
-	describe('inheritGlobalTime', () => {
-		it('should inherit time from parent store when inheritGlobalTime is true', () => {
-			const queryClient = createTestQueryClient();
-
-			const NestedWrapper = ({
-				children,
-			}: {
-				children: React.ReactNode;
-			}): JSX.Element => (
-				<QueryClientProvider client={queryClient}>
-					<NuqsTestingAdapter>
-						<GlobalTimeProvider initialTime="6h">
-							<GlobalTimeProvider inheritGlobalTime>{children}</GlobalTimeProvider>
-						</GlobalTimeProvider>
-					</NuqsTestingAdapter>
-				</QueryClientProvider>
-			);
-
-			const { result } = renderHook(() => useGlobalTime((s) => s.selectedTime), {
-				wrapper: NestedWrapper,
-			});
-
-			// Should inherit '6h' from parent provider
-			expect(result.current).toBe('6h');
-		});
-
-		it('should use initialTime when inheritGlobalTime is false', () => {
-			const queryClient = createTestQueryClient();
-
-			const NestedWrapper = ({
-				children,
-			}: {
-				children: React.ReactNode;
-			}): JSX.Element => (
-				<QueryClientProvider client={queryClient}>
-					<NuqsTestingAdapter>
-						<GlobalTimeProvider initialTime="6h">
-							<GlobalTimeProvider inheritGlobalTime={false} initialTime="15m">
-								{children}
-							</GlobalTimeProvider>
-						</GlobalTimeProvider>
-					</NuqsTestingAdapter>
-				</QueryClientProvider>
-			);
-
-			const { result } = renderHook(() => useGlobalTime((s) => s.selectedTime), {
-				wrapper: NestedWrapper,
-			});
-
-			// Should use its own initialTime, not parent's
-			expect(result.current).toBe('15m');
-		});
-
-		it('should prefer URL params over inheritGlobalTime when both are present', async () => {
-			const queryClient = createTestQueryClient();
-
-			const NestedWrapper = ({
-				children,
-			}: {
-				children: React.ReactNode;
-			}): JSX.Element => (
-				<QueryClientProvider client={queryClient}>
-					<NuqsTestingAdapter searchParams="?relativeTime=1h">
-						<GlobalTimeProvider initialTime="6h">
-							<GlobalTimeProvider inheritGlobalTime enableUrlParams>
-								{children}
-							</GlobalTimeProvider>
-						</GlobalTimeProvider>
-					</NuqsTestingAdapter>
-				</QueryClientProvider>
-			);
-
-			const { result } = renderHook(() => useGlobalTime((s) => s.selectedTime), {
-				wrapper: NestedWrapper,
-			});
-
-			// inheritGlobalTime sets initial value to '6h', but URL sync updates it to '1h'
-			await waitFor(() => {
-				expect(result.current).toBe('1h');
-			});
-		});
-
-		it('should use inherited time when URL params are empty', async () => {
-			const queryClient = createTestQueryClient();
-
-			const NestedWrapper = ({
-				children,
-			}: {
-				children: React.ReactNode;
-			}): JSX.Element => (
-				<QueryClientProvider client={queryClient}>
-					<NuqsTestingAdapter searchParams="">
-						<GlobalTimeProvider initialTime="6h">
-							<GlobalTimeProvider inheritGlobalTime enableUrlParams>
-								{children}
-							</GlobalTimeProvider>
-						</GlobalTimeProvider>
-					</NuqsTestingAdapter>
-				</QueryClientProvider>
-			);
-
-			const { result } = renderHook(() => useGlobalTime((s) => s.selectedTime), {
-				wrapper: NestedWrapper,
-			});
-
-			// No URL params, should keep inherited value
-			expect(result.current).toBe('6h');
-		});
-
-		it('should prefer custom time URL params over inheritGlobalTime', async () => {
-			const queryClient = createTestQueryClient();
-			const startTime = 1700000000000;
-			const endTime = 1700003600000;
-
-			const NestedWrapper = ({
-				children,
-			}: {
-				children: React.ReactNode;
-			}): JSX.Element => (
-				<QueryClientProvider client={queryClient}>
-					<NuqsTestingAdapter
-						searchParams={`?startTime=${startTime}&endTime=${endTime}`}
-					>
-						<GlobalTimeProvider initialTime="6h">
-							<GlobalTimeProvider inheritGlobalTime enableUrlParams>
-								{children}
-							</GlobalTimeProvider>
-						</GlobalTimeProvider>
-					</NuqsTestingAdapter>
-				</QueryClientProvider>
-			);
-
-			const { result } = renderHook(() => useGlobalTime(), {
-				wrapper: NestedWrapper,
-			});
-
-			// URL custom time params should override inherited time
-			await waitFor(() => {
-				const { minTime, maxTime } = result.current.getMinMaxTime();
-				expect(minTime).toBe(startTime * NANO_SECOND_MULTIPLIER);
-				expect(maxTime).toBe(endTime * NANO_SECOND_MULTIPLIER);
-			});
-		});
-	});
-
-	describe('URL sync', () => {
-		it('should read relativeTime from URL on mount', async () => {
-			const wrapper = createWrapper(
-				{ enableUrlParams: true },
-				{ searchParams: '?relativeTime=1h' },
-			);
-
-			const { result } = renderHook(() => useGlobalTime((s) => s.selectedTime), {
-				wrapper,
-			});
-
-			await waitFor(() => {
-				expect(result.current).toBe('1h');
-			});
-		});
-
-		it('should read custom time from URL on mount', async () => {
-			const startTime = 1700000000000;
-			const endTime = 1700003600000;
-			const wrapper = createWrapper(
-				{ enableUrlParams: true },
-				{ searchParams: `?startTime=${startTime}&endTime=${endTime}` },
-			);
-
-			const { result } = renderHook(() => useGlobalTime(), { wrapper });
-
-			await waitFor(() => {
-				const { minTime, maxTime } = result.current.getMinMaxTime();
-				expect(minTime).toBe(startTime * NANO_SECOND_MULTIPLIER);
-				expect(maxTime).toBe(endTime * NANO_SECOND_MULTIPLIER);
-			});
-		});
-
-		it('should use custom URL keys when provided', async () => {
-			const wrapper = createWrapper(
-				{
-					enableUrlParams: {
-						relativeTimeKey: 'modalTime',
-					},
-				},
-				{ searchParams: '?modalTime=3h' },
-			);
-
-			const { result } = renderHook(() => useGlobalTime((s) => s.selectedTime), {
-				wrapper,
-			});
-
-			await waitFor(() => {
-				expect(result.current).toBe('3h');
-			});
-		});
-
-		it('should use custom startTimeKey and endTimeKey when provided', async () => {
-			const startTime = 1700000000000;
-			const endTime = 1700003600000;
-			const wrapper = createWrapper(
-				{
-					enableUrlParams: {
-						startTimeKey: 'customStart',
-						endTimeKey: 'customEnd',
-					},
-				},
-				{ searchParams: `?customStart=${startTime}&customEnd=${endTime}` },
-			);
-
-			const { result } = renderHook(() => useGlobalTime(), { wrapper });
-
-			await waitFor(() => {
-				const { minTime, maxTime } = result.current.getMinMaxTime();
-				expect(minTime).toBe(startTime * NANO_SECOND_MULTIPLIER);
-				expect(maxTime).toBe(endTime * NANO_SECOND_MULTIPLIER);
-			});
-		});
-
-		it('should NOT read from URL when enableUrlParams is false', async () => {
-			const wrapper = createWrapper(
-				{ enableUrlParams: false, initialTime: '15m' },
-				{ searchParams: '?relativeTime=1h' },
-			);
-
-			const { result } = renderHook(() => useGlobalTime((s) => s.selectedTime), {
-				wrapper,
-			});
-
-			// Should use initialTime, not URL value
-			expect(result.current).toBe('15m');
-		});
-
-		it('should prefer startTime/endTime over relativeTime when both present in URL', async () => {
-			const startTime = 1700000000000;
-			const endTime = 1700003600000;
-			const wrapper = createWrapper(
-				{ enableUrlParams: true },
-				{
-					searchParams: `?relativeTime=15m&startTime=${startTime}&endTime=${endTime}`,
-				},
-			);
-
-			const { result } = renderHook(() => useGlobalTime(), { wrapper });
-
-			await waitFor(() => {
-				const { minTime, maxTime } = result.current.getMinMaxTime();
-				// Should use startTime/endTime, not relativeTime
-				expect(minTime).toBe(startTime * NANO_SECOND_MULTIPLIER);
-				expect(maxTime).toBe(endTime * NANO_SECOND_MULTIPLIER);
-			});
-		});
-
-		it('should use initialTime when URL has invalid time values', async () => {
-			const wrapper = createWrapper(
-				{ enableUrlParams: true, initialTime: '15m' },
-				{ searchParams: '?startTime=invalid&endTime=also-invalid' },
-			);
-
-			const { result } = renderHook(() => useGlobalTime((s) => s.selectedTime), {
-				wrapper,
-			});
-
-			// parseAsInteger returns null for invalid values, so should fallback to initialTime
-			expect(result.current).toBe('15m');
-		});
-
-		it('should update store when custom time is set from URL with only startTime and endTime', async () => {
-			const startTime = 1700000000000;
-			const endTime = 1700003600000;
-			const wrapper = createWrapper(
-				{ enableUrlParams: true },
-				{ searchParams: `?startTime=${startTime}&endTime=${endTime}` },
-			);
-
-			const { result } = renderHook(() => useGlobalTime(), { wrapper });
-
-			await waitFor(() => {
-				// Verify selectedTime is a custom time range string
-				expect(result.current.selectedTime).toContain('||_||');
-			});
-		});
-
-		describe('removeQueryParamsOnUnmount', () => {
-			const createUnmountTestWrapper = (
-				getQueryString: () => string,
-				setQueryString: (qs: string) => void,
-			) => {
-				return function TestWrapper({
-					children,
-				}: {
-					children: React.ReactNode;
-				}): JSX.Element {
-					const queryClient = createTestQueryClient();
-					return (
-						<QueryClientProvider client={queryClient}>
-							<NuqsTestingAdapter
-								searchParams={getQueryString()}
-								onUrlUpdate={(event): void => {
-									setQueryString(event.queryString);
-								}}
-							>
-								{children}
-							</NuqsTestingAdapter>
-						</QueryClientProvider>
-					);
-				};
-			};
-
-			it('should remove URL params when provider unmounts with removeQueryParamsOnUnmount=true', async () => {
-				let currentQueryString = 'relativeTime=1h';
-				const TestWrapper = createUnmountTestWrapper(
-					() => currentQueryString,
-					(qs) => {
-						currentQueryString = qs;
-					},
-				);
-
-				const { unmount } = renderHook(() => useGlobalTime((s) => s.selectedTime), {
-					wrapper: ({ children }) => (
-						<TestWrapper>
-							<GlobalTimeProvider enableUrlParams removeQueryParamsOnUnmount>
-								{children}
-							</GlobalTimeProvider>
-						</TestWrapper>
-					),
-				});
-
-				// Verify initial URL params are present
-				expect(currentQueryString).toContain('relativeTime=1h');
-
-				// Unmount the provider
-				unmount();
-
-				// URL params should be removed
-				await waitFor(() => {
-					expect(currentQueryString).not.toContain('relativeTime');
-					expect(currentQueryString).not.toContain('startTime');
-					expect(currentQueryString).not.toContain('endTime');
-				});
-			});
-
-			it('should NOT remove URL params when provider unmounts with removeQueryParamsOnUnmount=false', async () => {
-				let currentQueryString = 'relativeTime=1h';
-				const TestWrapper = createUnmountTestWrapper(
-					() => currentQueryString,
-					(qs) => {
-						currentQueryString = qs;
-					},
-				);
-
-				const { unmount } = renderHook(() => useGlobalTime((s) => s.selectedTime), {
-					wrapper: ({ children }) => (
-						<TestWrapper>
-							<GlobalTimeProvider enableUrlParams removeQueryParamsOnUnmount={false}>
-								{children}
-							</GlobalTimeProvider>
-						</TestWrapper>
-					),
-				});
-
-				// Verify initial URL params are present
-				expect(currentQueryString).toContain('relativeTime=1h');
-
-				// Unmount the provider
-				unmount();
-
-				// Wait a tick to ensure cleanup effects would have run
-				await waitFor(() => {
-					// URL params should still be present
-					expect(currentQueryString).toContain('relativeTime=1h');
-				});
-			});
-
-			it('should remove custom time URL params on unmount', async () => {
-				const startTime = 1700000000000;
-				const endTime = 1700003600000;
-				let currentQueryString = `startTime=${startTime}&endTime=${endTime}`;
-				const TestWrapper = createUnmountTestWrapper(
-					() => currentQueryString,
-					(qs) => {
-						currentQueryString = qs;
-					},
-				);
-
-				const { unmount } = renderHook(() => useGlobalTime(), {
-					wrapper: ({ children }) => (
-						<TestWrapper>
-							<GlobalTimeProvider enableUrlParams removeQueryParamsOnUnmount>
-								{children}
-							</GlobalTimeProvider>
-						</TestWrapper>
-					),
-				});
-
-				// Verify initial URL params are present
-				expect(currentQueryString).toContain('startTime');
-				expect(currentQueryString).toContain('endTime');
-
-				// Unmount the provider
-				unmount();
-
-				// URL params should be removed
-				await waitFor(() => {
-					expect(currentQueryString).not.toContain('startTime');
-					expect(currentQueryString).not.toContain('endTime');
-				});
-			});
-
-			it('should remove custom URL key params on unmount', async () => {
-				let currentQueryString = 'modalTime=3h';
-				const TestWrapper = createUnmountTestWrapper(
-					() => currentQueryString,
-					(qs) => {
-						currentQueryString = qs;
-					},
-				);
-
-				const { unmount } = renderHook(() => useGlobalTime((s) => s.selectedTime), {
-					wrapper: ({ children }) => (
-						<TestWrapper>
-							<GlobalTimeProvider
-								enableUrlParams={{
-									relativeTimeKey: 'modalTime',
-								}}
-								removeQueryParamsOnUnmount
-							>
-								{children}
-							</GlobalTimeProvider>
-						</TestWrapper>
-					),
-				});
-
-				// Verify initial URL params are present
-				expect(currentQueryString).toContain('modalTime=3h');
-
-				// Unmount the provider
-				unmount();
-
-				// URL params should be removed
-				await waitFor(() => {
-					expect(currentQueryString).not.toContain('modalTime');
-				});
-			});
-
-			it('should NOT remove URL params when enableUrlParams is false', async () => {
-				let currentQueryString = 'relativeTime=1h';
-				const TestWrapper = createUnmountTestWrapper(
-					() => currentQueryString,
-					(qs) => {
-						currentQueryString = qs;
-					},
-				);
-
-				const { unmount } = renderHook(() => useGlobalTime((s) => s.selectedTime), {
-					wrapper: ({ children }) => (
-						<TestWrapper>
-							<GlobalTimeProvider enableUrlParams={false} removeQueryParamsOnUnmount>
-								{children}
-							</GlobalTimeProvider>
-						</TestWrapper>
-					),
-				});
-
-				// Verify initial URL params are present
-				expect(currentQueryString).toContain('relativeTime=1h');
-
-				// Unmount the provider
-				unmount();
-
-				// Wait a tick
-				await waitFor(() => {
-					// URL params should still be present (enableUrlParams is false)
-					expect(currentQueryString).toContain('relativeTime=1h');
-				});
-			});
-		});
-	});
-
-	describe('localStorage persistence', () => {
-		const mockSet = set as jest.MockedFunction<typeof set>;
-
-		beforeEach(() => {
-			localStorage.clear();
-			mockSet.mockClear();
-			mockSet.mockReturnValue(true);
-		});
-
-		it('should read from localStorage on mount', () => {
-			localStorage.setItem('test-time-key', '6h');
-
-			const wrapper = createWrapper({ localStoragePersistKey: 'test-time-key' });
-			const { result } = renderHook(() => useGlobalTime((s) => s.selectedTime), {
-				wrapper,
-			});
-
-			expect(result.current).toBe('6h');
-		});
-
-		it('should write to localStorage on selectedTime change', async () => {
-			const wrapper = createWrapper({
-				localStoragePersistKey: 'test-persist-key',
-			});
-			const { result } = renderHook(() => useGlobalTime(), { wrapper });
-
-			mockSet.mockClear();
-
-			act(() => {
-				result.current.setSelectedTime('12h');
-			});
-
-			await waitFor(() => {
-				expect(mockSet).toHaveBeenCalledWith('test-persist-key', '12h');
-			});
-		});
-
-		it('should NOT write to localStorage when persistKey is undefined', async () => {
-			const wrapper = createWrapper({ initialTime: '15m' });
-			const { result } = renderHook(() => useGlobalTime(), { wrapper });
-
-			mockSet.mockClear();
-
-			act(() => {
-				result.current.setSelectedTime('1h');
-			});
-
-			// Wait a tick to ensure any async operations complete
-			await waitFor(() => {
-				expect(result.current.selectedTime).toBe('1h');
-			});
-
-			expect(mockSet).not.toHaveBeenCalled();
-		});
-
-		it('should only write to localStorage when selectedTime changes, not other state', async () => {
-			const wrapper = createWrapper({
-				localStoragePersistKey: 'test-key',
-				initialTime: '15m',
-			});
-			const { result } = renderHook(() => useGlobalTime(), { wrapper });
-
-			mockSet.mockClear();
-
-			// Change refreshInterval (not selectedTime)
-			act(() => {
-				result.current.setRefreshInterval(5000);
-			});
-
-			// Wait to ensure subscription handler had a chance to run
-			await waitFor(() => {
-				expect(result.current.refreshInterval).toBe(5000);
-			});
-
-			// Should NOT have written to localStorage for refreshInterval change
-			expect(mockSet).not.toHaveBeenCalled();
-
-			// Now change selectedTime
-			act(() => {
-				result.current.setSelectedTime('1h');
-			});
-
-			await waitFor(() => {
-				expect(mockSet).toHaveBeenCalledWith('test-key', '1h');
-			});
-		});
-
-		it('should fallback to initialTime when localStorage contains empty string', () => {
-			localStorage.setItem('test-key', '');
-
-			const wrapper = createWrapper({
-				localStoragePersistKey: 'test-key',
-				initialTime: '15m',
-			});
-			const { result } = renderHook(() => useGlobalTime((s) => s.selectedTime), {
-				wrapper,
-			});
-
-			// Empty string is falsy, should use initialTime
-			expect(result.current).toBe('15m');
-		});
-
-		it('should write custom time range to localStorage', async () => {
-			const wrapper = createWrapper({
-				localStoragePersistKey: 'test-custom-key',
-				initialTime: '15m',
-			});
-			const { result } = renderHook(() => useGlobalTime(), { wrapper });
-
-			mockSet.mockClear();
-
-			const customTime = createCustomTimeRange(1000000000, 2000000000);
-			act(() => {
-				result.current.setSelectedTime(customTime);
-			});
-
-			await waitFor(() => {
-				expect(mockSet).toHaveBeenCalledWith('test-custom-key', customTime);
-			});
-		});
-	});
-
-	describe('refreshInterval', () => {
-		it('should initialize with provided refreshInterval', () => {
-			const wrapper = createWrapper({ refreshInterval: 5000 });
-			const { result } = renderHook(() => useGlobalTime(), { wrapper });
-
-			expect(result.current.refreshInterval).toBe(5000);
-			expect(result.current.isRefreshEnabled).toBe(true);
-		});
-	});
-});

frontend/src/store/globalTime/__tests__/createGlobalTimeStore.test.ts

@@ -1,148 +0,0 @@
-import { act } from '@testing-library/react';
-import { REACT_QUERY_KEY } from 'constants/reactQueryKeys';
-import { DEFAULT_TIME_RANGE } from 'container/TopNav/DateTimeSelectionV2/constants';
-
-import {
-	createGlobalTimeStore,
-	defaultGlobalTimeStore,
-} from '../globalTimeStore';
-import { createCustomTimeRange } from '../utils';
-
-describe('createGlobalTimeStore', () => {
-	describe('factory function', () => {
-		it('should create independent store instances', () => {
-			const store1 = createGlobalTimeStore();
-			const store2 = createGlobalTimeStore();
-
-			store1.getState().setSelectedTime('1h');
-
-			expect(store1.getState().selectedTime).toBe('1h');
-			expect(store2.getState().selectedTime).toBe(DEFAULT_TIME_RANGE);
-		});
-
-		it('should accept initial state', () => {
-			const store = createGlobalTimeStore({
-				selectedTime: '15m',
-				refreshInterval: 5000,
-			});
-
-			expect(store.getState().selectedTime).toBe('15m');
-			expect(store.getState().refreshInterval).toBe(5000);
-			expect(store.getState().isRefreshEnabled).toBe(true);
-		});
-
-		it('should compute isRefreshEnabled correctly for custom time', () => {
-			const customTime = createCustomTimeRange(1000000000, 2000000000);
-			const store = createGlobalTimeStore({
-				selectedTime: customTime,
-				refreshInterval: 5000,
-			});
-
-			expect(store.getState().isRefreshEnabled).toBe(false);
-		});
-	});
-
-	describe('defaultGlobalTimeStore', () => {
-		it('should be a singleton', () => {
-			expect(defaultGlobalTimeStore).toBeDefined();
-			expect(defaultGlobalTimeStore.getState().selectedTime).toBeDefined();
-		});
-	});
-
-	describe('setRefreshInterval', () => {
-		it('should update refresh interval and enable refresh', () => {
-			const store = createGlobalTimeStore();
-
-			act(() => {
-				store.getState().setRefreshInterval(10000);
-			});
-
-			expect(store.getState().refreshInterval).toBe(10000);
-			expect(store.getState().isRefreshEnabled).toBe(true);
-		});
-
-		it('should disable refresh when interval is 0', () => {
-			const store = createGlobalTimeStore({ refreshInterval: 5000 });
-
-			act(() => {
-				store.getState().setRefreshInterval(0);
-			});
-
-			expect(store.getState().refreshInterval).toBe(0);
-			expect(store.getState().isRefreshEnabled).toBe(false);
-		});
-
-		it('should not enable refresh for custom time range', () => {
-			const customTime = createCustomTimeRange(1000000000, 2000000000);
-			const store = createGlobalTimeStore({ selectedTime: customTime });
-
-			act(() => {
-				store.getState().setRefreshInterval(10000);
-			});
-
-			expect(store.getState().refreshInterval).toBe(10000);
-			expect(store.getState().isRefreshEnabled).toBe(false);
-		});
-	});
-
-	describe('store name', () => {
-		it('should store name when provided', () => {
-			const store = createGlobalTimeStore({ name: 'drawer' });
-			expect(store.getState().name).toBe('drawer');
-		});
-
-		it('should have undefined name when not provided', () => {
-			const store = createGlobalTimeStore();
-			expect(store.getState().name).toBeUndefined();
-		});
-	});
-
-	describe('getAutoRefreshQueryKey', () => {
-		it('should generate key without name for unnamed store', () => {
-			const store = createGlobalTimeStore();
-			const key = store
-				.getState()
-				.getAutoRefreshQueryKey('15m', 'MY_QUERY', 'param1');
-
-			expect(key).toStrictEqual([
-				REACT_QUERY_KEY.AUTO_REFRESH_QUERY,
-				'MY_QUERY',
-				'param1',
-				'15m',
-			]);
-		});
-
-		it('should generate key with name for named store', () => {
-			const store = createGlobalTimeStore({ name: 'drawer' });
-			const key = store
-				.getState()
-				.getAutoRefreshQueryKey('15m', 'MY_QUERY', 'param1');
-
-			expect(key).toStrictEqual([
-				REACT_QUERY_KEY.AUTO_REFRESH_QUERY,
-				'drawer',
-				'MY_QUERY',
-				'param1',
-				'15m',
-			]);
-		});
-
-		it('should handle no query parts for named store', () => {
-			const store = createGlobalTimeStore({ name: 'test' });
-			const key = store.getState().getAutoRefreshQueryKey('1h');
-
-			expect(key).toStrictEqual([
-				REACT_QUERY_KEY.AUTO_REFRESH_QUERY,
-				'test',
-				'1h',
-			]);
-		});
-
-		it('should handle no query parts for unnamed store', () => {
-			const store = createGlobalTimeStore();
-			const key = store.getState().getAutoRefreshQueryKey('1h');
-
-			expect(key).toStrictEqual([REACT_QUERY_KEY.AUTO_REFRESH_QUERY, '1h']);
-		});
-	});
-});