chore: temp commit

docs/api/openapi.yml

@@ -2396,26 +2396,6 @@ components:
         repeatVariable:
           type: string
       type: object
-    DashboardLink:
-      properties:
-        name:
-          type: string
-        renderVariables:
-          type: boolean
-        targetBlank:
-          type: boolean
-        tooltip:
-          type: string
-        url:
-          type: string
-      type: object
-    DashboardPanelDisplay:
-      properties:
-        description:
-          type: string
-        name:
-          type: string
-      type: object
     DashboardTextVariableSpec:
       properties:
         constant:
@@ -2546,7 +2526,7 @@ components:
           type: array
         links:
           items:
-            $ref: '#/components/schemas/DashboardLink'
+            $ref: '#/components/schemas/V1Link'
           type: array
         panels:
           additionalProperties:
@@ -2707,8 +2687,8 @@ components:
       type: object
     DashboardtypesLayout:
       oneOf:
-      - $ref: '#/components/schemas/DashboardtypesLayoutEnvelopeGithubComPersesSpecGoDashboardGridLayoutSpec'
-    DashboardtypesLayoutEnvelopeGithubComPersesSpecGoDashboardGridLayoutSpec:
+      - $ref: '#/components/schemas/DashboardtypesLayoutEnvelopeGithubComPersesPersesPkgModelApiV1DashboardGridLayoutSpec'
+    DashboardtypesLayoutEnvelopeGithubComPersesPersesPkgModelApiV1DashboardGridLayoutSpec:
       properties:
         kind:
           enum:
@@ -2791,7 +2771,7 @@ components:
     DashboardtypesPanel:
       properties:
         kind:
-          $ref: '#/components/schemas/DashboardtypesPanelKind'
+          type: string
         spec:
           $ref: '#/components/schemas/DashboardtypesPanelSpec'
       type: object
@@ -2802,10 +2782,6 @@ components:
         unit:
           type: string
       type: object
-    DashboardtypesPanelKind:
-      enum:
-      - Panel
-      type: string
     DashboardtypesPanelPlugin:
       oneOf:
       - $ref: '#/components/schemas/DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTimeSeriesPanelSpec'
@@ -2912,10 +2888,10 @@ components:
     DashboardtypesPanelSpec:
       properties:
         display:
-          $ref: '#/components/schemas/DashboardPanelDisplay'
+          $ref: '#/components/schemas/V1PanelDisplay'
         links:
           items:
-            $ref: '#/components/schemas/DashboardLink'
+            $ref: '#/components/schemas/V1Link'
           type: array
         plugin:
           $ref: '#/components/schemas/DashboardtypesPanelPlugin'
@@ -2988,7 +2964,7 @@ components:
     DashboardtypesQuery:
       properties:
         kind:
-          $ref: '#/components/schemas/Querybuildertypesv5RequestType'
+          type: string
         spec:
           $ref: '#/components/schemas/DashboardtypesQuerySpec'
       type: object
@@ -3256,8 +3232,8 @@ components:
     DashboardtypesVariable:
       oneOf:
       - $ref: '#/components/schemas/DashboardtypesVariableEnvelopeGithubComSigNozSignozPkgTypesDashboardtypesListVariableSpec'
-      - $ref: '#/components/schemas/DashboardtypesVariableEnvelopeGithubComPersesSpecGoDashboardTextVariableSpec'
-    DashboardtypesVariableEnvelopeGithubComPersesSpecGoDashboardTextVariableSpec:
+      - $ref: '#/components/schemas/DashboardtypesVariableEnvelopeGithubComPersesPersesPkgModelApiV1DashboardTextVariableSpec'
+    DashboardtypesVariableEnvelopeGithubComPersesPersesPkgModelApiV1DashboardTextVariableSpec:
       properties:
         kind:
           enum:
@@ -7275,6 +7251,26 @@ components:
       required:
       - id
       type: object
+    V1Link:
+      properties:
+        name:
+          type: string
+        renderVariables:
+          type: boolean
+        targetBlank:
+          type: boolean
+        tooltip:
+          type: string
+        url:
+          type: string
+      type: object
+    V1PanelDisplay:
+      properties:
+        description:
+          type: string
+        name:
+          type: string
+      type: object
     VariableDefaultValue:
       type: object
     VariableDisplay:
@@ -8166,80 +8162,6 @@ paths:
       tags:
       - cloudintegration
   /api/v1/cloud_integrations/{cloud_provider}/accounts/{id}/services/{service_id}:
-    get:
-      deprecated: false
-      description: This endpoint gets a service and its configuration for the specified
-        cloud integration account
-      operationId: GetAccountService
-      parameters:
-      - in: path
-        name: cloud_provider
-        required: true
-        schema:
-          type: string
-      - in: path
-        name: id
-        required: true
-        schema:
-          type: string
-      - in: path
-        name: service_id
-        required: true
-        schema:
-          type: string
-      responses:
-        "200":
-          content:
-            application/json:
-              schema:
-                properties:
-                  data:
-                    $ref: '#/components/schemas/CloudintegrationtypesService'
-                  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
-        "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: Get service for account
-      tags:
-      - cloudintegration
     put:
       deprecated: false
       description: This endpoint updates a service for the specified cloud provider

frontend/src/api/billing/getUsage.ts

@@ -3,36 +3,13 @@ import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
 import { AxiosError } from 'axios';
 import { ErrorResponse, SuccessResponse } from 'types/api';
 
-export interface DayBreakdownEntry {
-	timestamp: number;
-	total: number;
-	quantity: number;
-	count: number;
-	size: number;
-}
-
-export interface TierEntry {
-	quantity: number;
-	unitPrice: number;
-	tierCost: number;
-}
-
-export interface BreakdownEntry {
-	type: string;
-	unit: string;
-	dayWiseBreakdown: {
-		breakdown: DayBreakdownEntry[];
-	};
-	tiers?: TierEntry[];
-}
-
 export interface UsageResponsePayloadProps {
-	billingPeriodStart: number;
-	billingPeriodEnd: number;
+	billingPeriodStart: Date;
+	billingPeriodEnd: Date;
 	details: {
 		total: number;
 		baseFee: number;
-		breakdown: BreakdownEntry[];
+		breakdown: [];
 		billTotal: number;
 	};
 	discount: number;

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

@@ -31,8 +31,6 @@ import type {
 	DisconnectAccountPathParameters,
 	GetAccount200,
 	GetAccountPathParameters,
-	GetAccountService200,
-	GetAccountServicePathParameters,
 	GetConnectionCredentials200,
 	GetConnectionCredentialsPathParameters,
 	GetService200,
@@ -745,117 +743,6 @@ export const invalidateListAccountServicesMetadata = async (
 	return queryClient;
 };
 
-/**
- * This endpoint gets a service and its configuration for the specified cloud integration account
- * @summary Get service for account
- */
-export const getAccountService = (
-	{ cloudProvider, id, serviceId }: GetAccountServicePathParameters,
-	signal?: AbortSignal,
-) => {
-	return GeneratedAPIInstance<GetAccountService200>({
-		url: `/api/v1/cloud_integrations/${cloudProvider}/accounts/${id}/services/${serviceId}`,
-		method: 'GET',
-		signal,
-	});
-};
-
-export const getGetAccountServiceQueryKey = ({
-	cloudProvider,
-	id,
-	serviceId,
-}: GetAccountServicePathParameters) => {
-	return [
-		`/api/v1/cloud_integrations/${cloudProvider}/accounts/${id}/services/${serviceId}`,
-	] as const;
-};
-
-export const getGetAccountServiceQueryOptions = <
-	TData = Awaited<ReturnType<typeof getAccountService>>,
-	TError = ErrorType<RenderErrorResponseDTO>,
->(
-	{ cloudProvider, id, serviceId }: GetAccountServicePathParameters,
-	options?: {
-		query?: UseQueryOptions<
-			Awaited<ReturnType<typeof getAccountService>>,
-			TError,
-			TData
-		>;
-	},
-) => {
-	const { query: queryOptions } = options ?? {};
-
-	const queryKey =
-		queryOptions?.queryKey ??
-		getGetAccountServiceQueryKey({ cloudProvider, id, serviceId });
-
-	const queryFn: QueryFunction<
-		Awaited<ReturnType<typeof getAccountService>>
-	> = ({ signal }) =>
-		getAccountService({ cloudProvider, id, serviceId }, signal);
-
-	return {
-		queryKey,
-		queryFn,
-		enabled: !!(cloudProvider && id && serviceId),
-		...queryOptions,
-	} as UseQueryOptions<
-		Awaited<ReturnType<typeof getAccountService>>,
-		TError,
-		TData
-	> & { queryKey: QueryKey };
-};
-
-export type GetAccountServiceQueryResult = NonNullable<
-	Awaited<ReturnType<typeof getAccountService>>
->;
-export type GetAccountServiceQueryError = ErrorType<RenderErrorResponseDTO>;
-
-/**
- * @summary Get service for account
- */
-
-export function useGetAccountService<
-	TData = Awaited<ReturnType<typeof getAccountService>>,
-	TError = ErrorType<RenderErrorResponseDTO>,
->(
-	{ cloudProvider, id, serviceId }: GetAccountServicePathParameters,
-	options?: {
-		query?: UseQueryOptions<
-			Awaited<ReturnType<typeof getAccountService>>,
-			TError,
-			TData
-		>;
-	},
-): UseQueryResult<TData, TError> & { queryKey: QueryKey } {
-	const queryOptions = getGetAccountServiceQueryOptions(
-		{ cloudProvider, id, serviceId },
-		options,
-	);
-
-	const query = useQuery(queryOptions) as UseQueryResult<TData, TError> & {
-		queryKey: QueryKey;
-	};
-
-	return { ...query, queryKey: queryOptions.queryKey };
-}
-
-/**
- * @summary Get service for account
- */
-export const invalidateGetAccountService = async (
-	queryClient: QueryClient,
-	{ cloudProvider, id, serviceId }: GetAccountServicePathParameters,
-	options?: InvalidateOptions,
-): Promise<QueryClient> => {
-	await queryClient.invalidateQueries(
-		{ queryKey: getGetAccountServiceQueryKey({ cloudProvider, id, serviceId }) },
-		options,
-	);
-
-	return queryClient;
-};
-
 /**
  * This endpoint updates a service for the specified cloud provider
  * @summary Update service

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

@@ -3104,40 +3104,6 @@ export interface DashboardGridLayoutSpecDTO {
 	repeatVariable?: string;
 }
 
-export interface DashboardLinkDTO {
-	/**
-	 * @type string
-	 */
-	name?: string;
-	/**
-	 * @type boolean
-	 */
-	renderVariables?: boolean;
-	/**
-	 * @type boolean
-	 */
-	targetBlank?: boolean;
-	/**
-	 * @type string
-	 */
-	tooltip?: string;
-	/**
-	 * @type string
-	 */
-	url?: string;
-}
-
-export interface DashboardPanelDisplayDTO {
-	/**
-	 * @type string
-	 */
-	description?: string;
-	/**
-	 * @type string
-	 */
-	name?: string;
-}
-
 export interface VariableDisplayDTO {
 	/**
 	 * @type string
@@ -3839,9 +3805,40 @@ export type DashboardtypesDashboardSpecDTODatasources = {
 	[key: string]: DashboardtypesDatasourceSpecDTO;
 };
 
-export enum DashboardtypesPanelKindDTO {
-	Panel = 'Panel',
+export interface V1PanelDisplayDTO {
+	/**
+	 * @type string
+	 */
+	description?: string;
+	/**
+	 * @type string
+	 */
+	name?: string;
 }
+
+export interface V1LinkDTO {
+	/**
+	 * @type string
+	 */
+	name?: string;
+	/**
+	 * @type boolean
+	 */
+	renderVariables?: boolean;
+	/**
+	 * @type boolean
+	 */
+	targetBlank?: boolean;
+	/**
+	 * @type string
+	 */
+	tooltip?: string;
+	/**
+	 * @type string
+	 */
+	url?: string;
+}
+
 export enum DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesTimeSeriesPanelSpecDTOKind {
 	'signoz/TimeSeriesPanel' = 'signoz/TimeSeriesPanel',
 }
@@ -4083,13 +4080,6 @@ export type DashboardtypesPanelPluginDTO =
 	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesHistogramPanelSpecDTO
 	| DashboardtypesPanelPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesListPanelSpecDTO;
 
-export enum Querybuildertypesv5RequestTypeDTO {
-	scalar = 'scalar',
-	time_series = 'time_series',
-	raw = 'raw',
-	raw_stream = 'raw_stream',
-	trace = 'trace',
-}
 export enum DashboardtypesQueryPluginVariantGithubComSigNozSignozPkgTypesDashboardtypesBuilderQuerySpecDTOKind {
 	'signoz/BuilderQuery' = 'signoz/BuilderQuery',
 }
@@ -4394,16 +4384,19 @@ export interface DashboardtypesQuerySpecDTO {
 }
 
 export interface DashboardtypesQueryDTO {
-	kind?: Querybuildertypesv5RequestTypeDTO;
+	/**
+	 * @type string
+	 */
+	kind?: string;
 	spec?: DashboardtypesQuerySpecDTO;
 }
 
 export interface DashboardtypesPanelSpecDTO {
-	display?: DashboardPanelDisplayDTO;
+	display?: V1PanelDisplayDTO;
 	/**
 	 * @type array
 	 */
-	links?: DashboardLinkDTO[];
+	links?: V1LinkDTO[];
 	plugin?: DashboardtypesPanelPluginDTO;
 	/**
 	 * @type array
@@ -4412,7 +4405,10 @@ export interface DashboardtypesPanelSpecDTO {
 }
 
 export interface DashboardtypesPanelDTO {
-	kind?: DashboardtypesPanelKindDTO;
+	/**
+	 * @type string
+	 */
+	kind?: string;
 	spec?: DashboardtypesPanelSpecDTO;
 }
 
@@ -4426,20 +4422,20 @@ export type DashboardtypesDashboardSpecDTOPanelsAnyOf = {
 export type DashboardtypesDashboardSpecDTOPanels =
 	DashboardtypesDashboardSpecDTOPanelsAnyOf | null;
 
-export enum DashboardtypesLayoutEnvelopeGithubComPersesSpecGoDashboardGridLayoutSpecDTOKind {
+export enum DashboardtypesLayoutEnvelopeGithubComPersesPersesPkgModelApiV1DashboardGridLayoutSpecDTOKind {
 	Grid = 'Grid',
 }
-export interface DashboardtypesLayoutEnvelopeGithubComPersesSpecGoDashboardGridLayoutSpecDTO {
+export interface DashboardtypesLayoutEnvelopeGithubComPersesPersesPkgModelApiV1DashboardGridLayoutSpecDTO {
 	/**
 	 * @enum Grid
 	 * @type string
 	 */
-	kind: DashboardtypesLayoutEnvelopeGithubComPersesSpecGoDashboardGridLayoutSpecDTOKind;
+	kind: DashboardtypesLayoutEnvelopeGithubComPersesPersesPkgModelApiV1DashboardGridLayoutSpecDTOKind;
 	spec: DashboardGridLayoutSpecDTO;
 }
 
 export type DashboardtypesLayoutDTO =
-	DashboardtypesLayoutEnvelopeGithubComPersesSpecGoDashboardGridLayoutSpecDTO;
+	DashboardtypesLayoutEnvelopeGithubComPersesPersesPkgModelApiV1DashboardGridLayoutSpecDTO;
 
 export enum DashboardtypesVariableEnvelopeGithubComSigNozSignozPkgTypesDashboardtypesListVariableSpecDTOKind {
 	ListVariable = 'ListVariable',
@@ -4543,21 +4539,21 @@ export interface DashboardtypesVariableEnvelopeGithubComSigNozSignozPkgTypesDash
 	spec: DashboardtypesListVariableSpecDTO;
 }
 
-export enum DashboardtypesVariableEnvelopeGithubComPersesSpecGoDashboardTextVariableSpecDTOKind {
+export enum DashboardtypesVariableEnvelopeGithubComPersesPersesPkgModelApiV1DashboardTextVariableSpecDTOKind {
 	TextVariable = 'TextVariable',
 }
-export interface DashboardtypesVariableEnvelopeGithubComPersesSpecGoDashboardTextVariableSpecDTO {
+export interface DashboardtypesVariableEnvelopeGithubComPersesPersesPkgModelApiV1DashboardTextVariableSpecDTO {
 	/**
 	 * @enum TextVariable
 	 * @type string
 	 */
-	kind: DashboardtypesVariableEnvelopeGithubComPersesSpecGoDashboardTextVariableSpecDTOKind;
+	kind: DashboardtypesVariableEnvelopeGithubComPersesPersesPkgModelApiV1DashboardTextVariableSpecDTOKind;
 	spec: DashboardTextVariableSpecDTO;
 }
 
 export type DashboardtypesVariableDTO =
 	| DashboardtypesVariableEnvelopeGithubComSigNozSignozPkgTypesDashboardtypesListVariableSpecDTO
-	| DashboardtypesVariableEnvelopeGithubComPersesSpecGoDashboardTextVariableSpecDTO;
+	| DashboardtypesVariableEnvelopeGithubComPersesPersesPkgModelApiV1DashboardTextVariableSpecDTO;
 
 export interface DashboardtypesDashboardSpecDTO {
 	/**
@@ -4576,7 +4572,7 @@ export interface DashboardtypesDashboardSpecDTO {
 	/**
 	 * @type array
 	 */
-	links?: DashboardLinkDTO[];
+	links?: V1LinkDTO[];
 	/**
 	 * @type object,null
 	 */
@@ -6958,6 +6954,13 @@ export type Querybuildertypesv5QueryRangeRequestDTOVariables = {
 	[key: string]: Querybuildertypesv5VariableItemDTO;
 };
 
+export enum Querybuildertypesv5RequestTypeDTO {
+	scalar = 'scalar',
+	time_series = 'time_series',
+	raw = 'raw',
+	raw_stream = 'raw_stream',
+	trace = 'trace',
+}
 /**
  * Request body for the v5 query range endpoint. Supports builder queries (traces, logs, metrics), formulas, joins, trace operators, PromQL, and ClickHouse SQL queries.
  */
@@ -8704,19 +8707,6 @@ export type ListAccountServicesMetadata200 = {
 	status: string;
 };
 
-export type GetAccountServicePathParameters = {
-	cloudProvider: string;
-	id: string;
-	serviceId: string;
-};
-export type GetAccountService200 = {
-	data: CloudintegrationtypesServiceDTO;
-	/**
-	 * @type string
-	 */
-	status: string;
-};
-
 export type UpdateServicePathParameters = {
 	cloudProvider: string;
 	id: string;

frontend/src/components/RefreshPaymentStatus/RefreshPaymentStatus.tsx

@@ -1,17 +1,17 @@
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { Button, Tooltip } from 'antd';
 import refreshPaymentStatus from 'api/v3/licenses/put';
-import { Button } from '@signozhq/ui/button';
-import { TooltipSimple } from '@signozhq/ui/tooltip';
+import cx from 'classnames';
 import { RefreshCcw } from '@signozhq/icons';
 import { useAppContext } from 'providers/App/App';
 
 function RefreshPaymentStatus({
+	btnShape,
 	type,
-	className,
 }: {
+	btnShape?: 'default' | 'round' | 'circle';
 	type?: 'button' | 'text' | 'tooltip';
-	className?: string;
 }): JSX.Element {
 	const { t } = useTranslation(['failedPayment']);
 	const { activeLicenseRefetch } = useAppContext();
@@ -31,33 +31,26 @@ function RefreshPaymentStatus({
 		setIsLoading(false);
 	};
 
-	const button = (
-		<Button
-			variant="link"
-			color={type === 'text' ? 'none' : 'secondary'}
-			size="md"
-			className={className}
-			onClick={handleRefreshPaymentStatus}
-			prefix={<RefreshCcw size={14} />}
-			loading={isLoading}
-		>
-			{type !== 'tooltip' ? t('refreshPaymentStatus') : ''}
-		</Button>
-	);
-
 	return (
 		<span className="refresh-payment-status-btn-wrapper">
-			{type === 'tooltip' ? (
-				<TooltipSimple title={t('refreshPaymentStatus')}>{button}</TooltipSimple>
-			) : (
-				button
-			)}
+			<Tooltip title={type === 'tooltip' ? t('refreshPaymentStatus') : ''}>
+				<Button
+					type={type === 'text' ? 'text' : 'default'}
+					shape={btnShape}
+					className={cx('periscope-btn', { text: type === 'text' })}
+					onClick={handleRefreshPaymentStatus}
+					icon={<RefreshCcw size={14} />}
+					loading={isLoading}
+				>
+					{type !== 'tooltip' ? t('refreshPaymentStatus') : ''}
+				</Button>
+			</Tooltip>
 		</span>
 	);
 }
 RefreshPaymentStatus.defaultProps = {
+	btnShape: 'default',
 	type: 'button',
-	className: undefined,
 };
 
 export default RefreshPaymentStatus;

frontend/src/container/BillingContainer/BillingContainer.module.scss

@@ -1,199 +0,0 @@
-.billingContainer {
-	margin-bottom: var(--spacing-20);
-	padding-top: 36px;
-	width: 90%;
-	margin: 0 auto;
-
-	.pageHeader {
-		margin-bottom: var(--spacing-8);
-
-		.pageHeaderTitle {
-			font-weight: var(--label-medium-500-font-weight);
-			font-size: var(--label-medium-500-font-size);
-			line-height: 32px;
-			letter-spacing: -0.08px;
-			color: var(--l1-foreground);
-		}
-
-		.pageHeaderSubtitle {
-			font-size: var(--font-size-sm);
-			line-height: var(--line-height-20);
-			letter-spacing: -0.07px;
-			color: var(--l2-foreground);
-		}
-	}
-
-	.pageInfoTitle {
-		margin: 0;
-		font-size: var(--font-size-sm);
-		font-weight: var(--font-weight-medium);
-		line-height: var(--line-height-20);
-		letter-spacing: -0.07px;
-		color: var(--l1-foreground);
-	}
-
-	.pageInfoSubtitle {
-		margin: 0;
-		font-size: var(--font-size-sm);
-		font-weight: var(--font-weight-normal);
-		line-height: var(--line-height-18);
-		letter-spacing: -0.07px;
-		color: var(--l2-foreground);
-	}
-
-	.pageInfo {
-		:global(.ant-card) {
-			padding: var(--padding-3);
-		}
-
-		.billingManageBtn {
-			background: var(--l3-background);
-
-			&:hover {
-				background: var(--l3-background-hover);
-			}
-		}
-	}
-
-	.billingSummary {
-		margin: var(--spacing-12) var(--spacing-4);
-	}
-
-	.billingDetails {
-		margin: var(--spacing-12) 0;
-		border: 1px solid var(--l1-border);
-		border-radius: 2px;
-		overflow: hidden;
-
-		:global {
-			.ant-table {
-				background: var(--l2-background);
-			}
-
-			.ant-table-thead > tr > th {
-				height: 52px;
-				padding: 0 var(--padding-4);
-				color: var(--l3-foreground);
-				font-size: var(--font-size-xs);
-				font-weight: var(--font-weight-medium);
-				letter-spacing: 0.48px;
-				text-transform: uppercase;
-			}
-
-			.ant-table-tbody > tr > td {
-				height: 52px;
-				padding: 0 var(--padding-4);
-				background: var(--l2-background);
-				border-bottom: 1px solid var(--l1-border);
-				color: var(--l2-foreground);
-				font-size: var(--font-size-sm);
-
-				&:first-child {
-					color: var(--l1-foreground);
-				}
-
-				&:not(:first-child) {
-					font-feature-settings:
-						'zero' 1,
-						'lnum' 1,
-						'tnum' 1;
-				}
-			}
-
-			.ant-table-tbody > tr:last-child > td {
-				border-bottom: none;
-			}
-
-			.ant-table-tbody > tr:hover > td {
-				background: var(--l2-background) !important;
-			}
-		}
-
-		.billingDetailsHeaderCell {
-			position: relative;
-			background: var(--l2-background) !important;
-			border: none !important;
-			border-bottom: 1px solid var(--l1-border) !important;
-			box-shadow: none !important;
-
-			&::after {
-				content: '';
-				position: absolute;
-				inset-block: 0;
-				inset-inline-end: 0;
-				width: 2px;
-				background: var(--l2-background);
-				z-index: 1;
-			}
-		}
-	}
-
-	.upgradePlanBenefits {
-		margin: 0 var(--spacing-4);
-		border: 1px solid var(--l1-border);
-		border-radius: 5px;
-		padding: 0 var(--padding-12);
-
-		.planBenefits {
-			.planBenefit {
-				display: flex;
-				align-items: center;
-				gap: var(--spacing-8);
-				margin: var(--spacing-8) 0;
-			}
-		}
-	}
-
-	.billingGraphSection {
-		border: 1px solid var(--l1-border);
-		border-radius: 4px;
-		overflow: hidden;
-		margin-bottom: var(--spacing-4);
-
-		.billingGraphFooter {
-			display: flex;
-			gap: var(--spacing-4);
-			padding: var(--padding-3) var(--padding-4);
-			border-top: 1px solid var(--l1-border);
-			background: var(--l2-background);
-
-			.billingFooterBtn {
-				background: var(--l3-background);
-
-				&:hover {
-					background: var(--l3-background-hover);
-				}
-			}
-		}
-	}
-
-	.emptyGraphCard {
-		:global(.ant-card-body) {
-			height: 40vh;
-			display: flex;
-			justify-content: center;
-			align-items: center;
-		}
-	}
-
-	.billingUpdateNote {
-		margin-top: var(--spacing-8);
-		font-family: var(--font-family-inter);
-		font-size: var(--font-size-sm);
-		font-style: normal;
-		font-weight: var(--font-weight-normal);
-		line-height: 22px;
-		letter-spacing: -0.07px;
-	}
-
-	:global {
-		.ant-skeleton.ant-skeleton-element.ant-skeleton-active {
-			width: 100%;
-			min-width: 100%;
-		}
-
-		.ant-skeleton.ant-skeleton-element .ant-skeleton-input {
-			min-width: 100% !important;
-		}
-	}
-}

frontend/src/container/BillingContainer/BillingContainer.styles.scss

@@ -0,0 +1,70 @@
+.billing-container {
+	margin-bottom: 40px;
+	padding-top: 36px;
+	width: 90%;
+	margin: 0 auto;
+
+	.billing-summary {
+		margin: 24px 8px;
+	}
+
+	.billing-details {
+		margin: 24px 0px;
+
+		.ant-table-title {
+			color: var(--l2-foreground);
+			background-color: var(--l3-background);
+		}
+
+		.ant-table-cell {
+			background-color: var(--l1-background);
+			border-color: var(--l1-border);
+		}
+
+		.ant-table-tbody {
+			td {
+				border-color: var(--l1-border);
+			}
+		}
+	}
+
+	.upgrade-plan-benefits {
+		margin: 0px 8px;
+		border: 1px solid var(--l1-border);
+		border-radius: 5px;
+		padding: 0 48px;
+		.plan-benefits {
+			.plan-benefit {
+				display: flex;
+				align-items: center;
+				gap: 16px;
+				margin: 16px 0;
+			}
+		}
+	}
+
+	.empty-graph-card {
+		.ant-card-body {
+			height: 40vh;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+		}
+	}
+
+	.billing-update-note {
+		text-align: left;
+		font-size: 13px;
+		color: var(--l2-foreground);
+		margin-top: 16px;
+	}
+}
+
+.ant-skeleton.ant-skeleton-element.ant-skeleton-active {
+	width: 100%;
+	min-width: 100%;
+}
+
+.ant-skeleton.ant-skeleton-element .ant-skeleton-input {
+	min-width: 100% !important;
+}

frontend/src/container/BillingContainer/BillingContainer.test.tsx

@@ -38,7 +38,7 @@ describe('BillingContainer', () => {
 		});
 		expect(pricePerUnit).toBeInTheDocument();
 		const cost = await screen.findByRole('columnheader', {
-			name: /cost/i,
+			name: /cost \(billing period to date\)/i,
 		});
 		expect(cost).toBeInTheDocument();
 

frontend/src/container/BillingContainer/BillingContainer.tsx

@@ -1,11 +1,12 @@
-import { Callout } from '@signozhq/ui/callout';
-import { Button } from '@signozhq/ui/button';
 import { Typography } from '@signozhq/ui/typography';
-import React, { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useMutation, useQuery } from 'react-query';
-import { CircleCheck, Landmark, MonitorDown } from '@signozhq/icons';
+import { CircleCheck, CloudDownload } from '@signozhq/icons';
+import { Color } from '@signozhq/design-tokens';
 import {
+	Alert,
+	Button,
 	Card,
 	Col,
 	Flex,
@@ -15,10 +16,7 @@ import {
 	TableColumnsType as ColumnsType,
 } from 'antd';
 import { Badge } from '@signozhq/ui/badge';
-import getUsage, {
-	BreakdownEntry,
-	UsageResponsePayloadProps,
-} from 'api/billing/getUsage';
+import getUsage, { UsageResponsePayloadProps } from 'api/billing/getUsage';
 import logEvent from 'api/common/logEvent';
 import updateCreditCardApi from 'api/v1/checkout/create';
 import manageCreditCardApi from 'api/v1/portal/create';
@@ -31,7 +29,7 @@ import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
 import { useNotifications } from 'hooks/useNotifications';
 import { isEmpty, pick } from 'lodash-es';
 import { useAppContext } from 'providers/App/App';
-import { ErrorResponse, SuccessResponse, SuccessResponseV2 } from 'types/api';
+import { SuccessResponseV2 } from 'types/api';
 import { CheckoutSuccessPayloadProps } from 'types/api/billing/checkout';
 import { getBaseUrl } from 'utils/basePath';
 import { getFormattedDate, getRemainingDays } from 'utils/timeUtils';
@@ -40,7 +38,7 @@ import CancelSubscriptionBanner from './CancelSubscriptionBanner';
 import { BillingUsageGraph } from './BillingUsageGraph/BillingUsageGraph';
 import { prepareCsvData } from './BillingUsageGraph/utils';
 
-import styles from './BillingContainer.module.scss';
+import './BillingContainer.styles.scss';
 import { LicenseState } from 'types/api/licensesV3/getActive';
 
 interface DataType {
@@ -117,7 +115,7 @@ const dummyColumns: ColumnsType<DataType> = [
 		render: renderSkeletonInput,
 	},
 	{
-		title: 'Cost',
+		title: 'Cost (Billing period to date)',
 		dataIndex: 'cost',
 		key: 'cost',
 		render: renderSkeletonInput,
@@ -132,7 +130,7 @@ export default function BillingContainer(): JSX.Element {
 	const [billAmount, setBillAmount] = useState(0);
 	const [daysRemaining, setDaysRemaining] = useState(0);
 	const [isFreeTrial, setIsFreeTrial] = useState(false);
-	const [data, setData] = useState<DataType[]>([]);
+	const [data, setData] = useState<any[]>([]);
 	const [apiResponse, setApiResponse] = useState<
 		Partial<UsageResponsePayloadProps>
 	>({});
@@ -152,7 +150,7 @@ export default function BillingContainer(): JSX.Element {
 	const { isCloudUser: isCloudUserVal } = useGetTenantLicense();
 
 	const processUsageData = useCallback(
-		(data: SuccessResponse<UsageResponsePayloadProps> | ErrorResponse): void => {
+		(data: any): void => {
 			if (isEmpty(data?.payload)) {
 				return;
 			}
@@ -160,23 +158,27 @@ export default function BillingContainer(): JSX.Element {
 				details: { breakdown = [], billTotal },
 				billingPeriodStart,
 				billingPeriodEnd,
-			} = (data as SuccessResponse<UsageResponsePayloadProps>).payload;
-			const formattedUsageData: DataType[] = [];
+			} = data?.payload || {};
+			const formattedUsageData: any[] = [];
 
 			if (breakdown && Array.isArray(breakdown)) {
 				for (let index = 0; index < breakdown.length; index += 1) {
-					const element: BreakdownEntry = breakdown[index];
+					const element = breakdown[index];
 
-					element?.tiers?.forEach((tier, i: number) => {
-						formattedUsageData.push({
-							key: `${index}${i}`,
-							name: i === 0 ? element?.type : '',
-							unit: element?.unit ?? '',
-							dataIngested: `${tier.quantity} ${element?.unit}`,
-							pricePerUnit: String(tier.unitPrice),
-							cost: `$ ${tier.tierCost}`,
-						});
-					});
+					element?.tiers.forEach(
+						(
+							tier: { quantity: number; unitPrice: number; tierCost: number },
+							i: number,
+						) => {
+							formattedUsageData.push({
+								key: `${index}${i}`,
+								name: i === 0 ? element?.type : '',
+								dataIngested: `${tier.quantity} ${element?.unit}`,
+								pricePerUnit: tier.unitPrice,
+								cost: `$ ${tier.tierCost}`,
+							});
+						},
+					);
 				}
 			}
 
@@ -249,19 +251,16 @@ export default function BillingContainer(): JSX.Element {
 			title: 'Data Ingested',
 			dataIndex: 'dataIngested',
 			key: 'dataIngested',
-			align: 'right',
 		},
 		{
 			title: 'Price per Unit',
 			dataIndex: 'pricePerUnit',
 			key: 'pricePerUnit',
-			align: 'right',
 		},
 		{
-			title: 'Cost',
+			title: 'Cost (Billing period to date)',
 			dataIndex: 'cost',
 			key: 'cost',
-			align: 'right',
 		},
 	];
 
@@ -346,6 +345,23 @@ export default function BillingContainer(): JSX.Element {
 		updateCreditCard,
 	]);
 
+	const BillingUsageGraphCallback = useCallback(
+		() =>
+			!isLoading && !isFetchingBillingData ? (
+				<>
+					<BillingUsageGraph data={apiResponse} billAmount={billAmount} />
+					<div className="billing-update-note">
+						Note: Billing metrics are updated once every 24 hours.
+					</div>
+				</>
+			) : (
+				<Card className="empty-graph-card" bordered={false}>
+					<Spinner size="large" tip="Loading..." height="35vh" />
+				</Card>
+			),
+		[apiResponse, billAmount, isLoading, isFetchingBillingData],
+	);
+
 	const subscriptionPastDueMessage = (): JSX.Element => (
 		<Typography>
 			{`We were not able to process payments for your account. Please update your card details `}
@@ -399,12 +415,12 @@ export default function BillingContainer(): JSX.Element {
 		trialInfo?.gracePeriodEnd;
 
 	return (
-		<div className={styles.billingContainer}>
-			<Flex vertical gap={4} className={styles.pageHeader}>
-				<Typography.Text className={styles.pageHeaderTitle}>
+		<div className="billing-container">
+			<Flex vertical style={{ marginBottom: 16 }}>
+				<Typography.Text style={{ fontWeight: 500, fontSize: 18 }}>
 					{t('billing')}
 				</Typography.Text>
-				<Typography.Text className={styles.pageHeaderSubtitle}>
+				<Typography.Text color="muted">
 					{t('manage_billing_and_costs')}
 				</Typography.Text>
 			</Flex>
@@ -412,36 +428,50 @@ export default function BillingContainer(): JSX.Element {
 			<Card
 				bordered={false}
 				style={{ minHeight: 150, marginBottom: 16 }}
-				className={styles.pageInfo}
+				className="page-info"
 			>
 				<Flex justify="space-between" align="center">
-					<Flex vertical gap={8}>
-						<p className={styles.pageInfoTitle}>
+					<Flex vertical>
+						<Typography.Title level={5} style={{ marginTop: 2, fontWeight: 500 }}>
 							{isCloudUserVal ? t('teams_cloud') : t('teams')}{' '}
 							{isFreeTrial ? <Badge color="success"> Free Trial </Badge> : ''}
-						</p>
+						</Typography.Title>
 
 						{!isLoading && !isFetchingBillingData && !showGracePeriodMessage ? (
-							<p className={styles.pageInfoSubtitle}>
+							<Typography.Text style={{ fontSize: 12, color: Color.BG_VANILLA_400 }}>
 								{daysRemaining} {daysRemainingStr}
-							</p>
+							</Typography.Text>
 						) : null}
 					</Flex>
-					<Button
-						testId="header-billing-button"
-						variant="solid"
-						color="secondary"
-						size="md"
-						loading={isLoadingBilling || isLoadingManageBilling}
-						disabled={isLoading}
-						onClick={handleBilling}
-						prefix={<Landmark size={14} />}
-						className={styles.billingManageBtn}
-					>
-						{trialInfo?.trialConvertedToSubscription
-							? t('manage_billing')
-							: t('upgrade_plan')}
-					</Button>
+					<Flex gap={8}>
+						<Button
+							type="default"
+							size="middle"
+							loading={isLoadingBilling || isLoadingManageBilling}
+							disabled={isLoading || isFetchingBillingData}
+							onClick={handleCsvDownload}
+							className="periscope-btn"
+						>
+							<Flex align="center" justify="center" gap={4}>
+								<CloudDownload size="md" />
+								Download CSV
+							</Flex>
+						</Button>
+						<Button
+							data-testid="header-billing-button"
+							type="primary"
+							size="middle"
+							loading={isLoadingBilling || isLoadingManageBilling}
+							disabled={isLoading}
+							onClick={handleBilling}
+						>
+							{trialInfo?.trialConvertedToSubscription
+								? t('manage_billing')
+								: t('upgrade_plan')}
+						</Button>
+
+						<RefreshPaymentStatus type="tooltip" />
+					</Flex>
 				</Flex>
 
 				{trialInfo?.onTrial && trialInfo?.trialConvertedToSubscription && (
@@ -455,8 +485,8 @@ export default function BillingContainer(): JSX.Element {
 
 				{!isLoading && !isFetchingBillingData && !showGracePeriodMessage
 					? headerText && (
-							<Callout
-								title={headerText}
+							<Alert
+								message={headerText}
 								type="info"
 								showIcon
 								style={{ marginTop: 12 }}
@@ -473,8 +503,8 @@ export default function BillingContainer(): JSX.Element {
 				billingData &&
 				trialInfo?.gracePeriodEnd &&
 				showGracePeriodMessage ? (
-					<Callout
-						title={`Your data is safe with us until ${getFormattedDate(
+					<Alert
+						message={`Your data is safe with us until ${getFormattedDate(
 							trialInfo?.gracePeriodEnd || Date.now(),
 						)}. Please upgrade plan now to retain your data.`}
 						type="info"
@@ -485,69 +515,26 @@ export default function BillingContainer(): JSX.Element {
 
 				{isSubscriptionPastDue &&
 					(!isLoading && !isFetchingBillingData ? (
-						<Callout type="error" showIcon style={{ marginTop: 12 }}>
-							{subscriptionPastDueMessage()}
-						</Callout>
+						<Alert
+							message={subscriptionPastDueMessage()}
+							type="error"
+							showIcon
+							style={{ marginTop: 12 }}
+						/>
 					) : (
 						<Skeleton.Input active style={{ height: 20, marginTop: 20 }} />
 					))}
 			</Card>
 
-			<div className={styles.billingGraphSection}>
-				{!isLoading && !isFetchingBillingData ? (
-					<BillingUsageGraph data={apiResponse} billAmount={billAmount} />
-				) : (
-					<Card className={styles.emptyGraphCard} bordered={false}>
-						<Spinner size="large" tip="Loading..." height="35vh" />
-					</Card>
-				)}
-				{!isLoading && !isFetchingBillingData && (
-					<div className={styles.billingGraphFooter}>
-						<Button
-							variant="outlined"
-							color="secondary"
-							size="md"
-							onClick={handleCsvDownload}
-							prefix={<MonitorDown size={14} />}
-							testId="download-csv-button"
-							className={styles.billingFooterBtn}
-						>
-							Download CSV
-						</Button>
-						<RefreshPaymentStatus type="button" className={styles.billingFooterBtn} />
-					</div>
-				)}
-			</div>
-			{!isLoading && !isFetchingBillingData && (
-				<Callout type="info" size="small" className={styles.billingUpdateNote}>
-					Billing metrics are updated once every 24 hours.
-				</Callout>
-			)}
+			<BillingUsageGraphCallback />
 
-			<div className={styles.billingDetails}>
+			<div className="billing-details">
 				{!isLoading && !isFetchingBillingData && (
 					<Table
 						columns={columns}
 						dataSource={data}
 						pagination={false}
 						bordered={false}
-						components={{
-							header: {
-								cell: ({
-									style,
-									...props
-								}: React.ThHTMLAttributes<HTMLTableCellElement>): JSX.Element => {
-									const { background: _, boxShadow: __, ...safeStyle } = style ?? {};
-									return (
-										<th
-											{...props}
-											style={safeStyle}
-											className={`${props.className ?? ''} ${styles.billingDetailsHeaderCell}`}
-										/>
-									);
-								},
-							},
-						}}
 					/>
 				)}
 
@@ -559,7 +546,7 @@ export default function BillingContainer(): JSX.Element {
 			)}
 
 			{!trialInfo?.trialConvertedToSubscription && (
-				<div className={styles.upgradePlanBenefits}>
+				<div className="upgrade-plan-benefits">
 					<Row
 						justify="space-between"
 						align="middle"
@@ -568,16 +555,16 @@ export default function BillingContainer(): JSX.Element {
 						}}
 						gutter={[16, 16]}
 					>
-						<Col span={20} className={styles.planBenefits}>
-							<Typography.Text className={styles.planBenefit}>
+						<Col span={20} className="plan-benefits">
+							<Typography.Text className="plan-benefit">
 								<CircleCheck size="md" />
 								{t('upgrade_now_text')}
 							</Typography.Text>
-							<Typography.Text className={styles.planBenefit}>
+							<Typography.Text className="plan-benefit">
 								<CircleCheck size="md" />
 								{t('Your billing will start only after the trial period')}
 							</Typography.Text>
-							<Typography.Text className={styles.planBenefit}>
+							<Typography.Text className="plan-benefit">
 								<CircleCheck size="md" />
 								<span>
 									{t('checkout_plans')} &nbsp;
@@ -596,10 +583,9 @@ export default function BillingContainer(): JSX.Element {
 						</Col>
 						<Col span={4} style={{ display: 'flex', justifyContent: 'flex-end' }}>
 							<Button
-								testId="upgrade-plan-button"
-								variant="solid"
-								color="primary"
-								size="md"
+								data-testid="upgrade-plan-button"
+								type="primary"
+								size="middle"
 								loading={isLoadingBilling || isLoadingManageBilling}
 								onClick={handleBilling}
 							>

frontend/src/container/BillingContainer/BillingUsageGraph/BillingBarChartTooltip.module.scss

@@ -1,9 +0,0 @@
-.headerRow {
-	padding: var(--spacing-8);
-}
-
-.itemList {
-	overflow-y: auto;
-	max-height: 300px;
-	padding: var(--padding-3);
-}

frontend/src/container/BillingContainer/BillingUsageGraph/BillingBarChartTooltip.tsx

@@ -1,95 +0,0 @@
-import { useMemo } from 'react';
-import cx from 'classnames';
-import TooltipHeader from 'lib/uPlotV2/components/Tooltip/components/TooltipHeader/TooltipHeader';
-import TooltipItem from 'lib/uPlotV2/components/Tooltip/components/TooltipItem/TooltipItem';
-import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
-import { getToolTipValue } from 'components/Graph/yAxisConfig';
-import { buildTooltipContent } from 'lib/uPlotV2/components/Tooltip/utils';
-import {
-	TooltipContentItem,
-	TooltipRenderArgs,
-} from 'lib/uPlotV2/components/types';
-import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
-
-import TooltipStyles from 'lib/uPlotV2/components/Tooltip/Tooltip.module.scss';
-import Styles from './BillingBarChartTooltip.module.scss';
-
-interface BillingBarChartTooltipProps extends TooltipRenderArgs {
-	billingApiResponse: MetricRangePayloadProps;
-}
-
-const CURRENCY_SYMBOL = '$';
-
-export function BillingBarChartTooltip({
-	billingApiResponse,
-	uPlotInstance,
-	dataIndexes,
-	seriesIndex,
-	isPinned,
-}: BillingBarChartTooltipProps): JSX.Element {
-	const content = useMemo((): TooltipContentItem[] => {
-		const baseItems = buildTooltipContent({
-			data: uPlotInstance.data,
-			series: uPlotInstance.series,
-			dataIndexes,
-			activeSeriesIndex: seriesIndex,
-			uPlotInstance,
-			yAxisUnit: '',
-			isStackedBarChart: true,
-		});
-
-		return baseItems.map((item) => {
-			const match = billingApiResponse.data.result.find(
-				(r) => (r.legend || r.queryName) === item.label,
-			);
-
-			if (!match) {
-				return item;
-			}
-
-			const seriesIdx = uPlotInstance.series.findIndex(
-				(s) => s.label === item.label,
-			);
-			if (seriesIdx === -1) {
-				return item;
-			}
-
-			const dataIndex = dataIndexes[seriesIdx];
-			const quantity = dataIndex != null ? match.quantity?.[dataIndex] : null;
-			const unit = match.unit ?? '';
-			const quantityStr =
-				quantity != null ? ` - ${getToolTipValue(quantity)} ${unit}` : '';
-
-			return {
-				...item,
-				tooltipValue: `${CURRENCY_SYMBOL}${getToolTipValue(item.value, '')}${quantityStr}`,
-			};
-		});
-	}, [uPlotInstance, seriesIndex, dataIndexes, billingApiResponse]);
-
-	const activeItem = content.find((item) => item.isActive) ?? null;
-
-	return (
-		<div
-			className={cx(TooltipStyles.container, {
-				[TooltipStyles.pinned]: isPinned,
-			})}
-			data-testid="uplot-tooltip-container"
-		>
-			<TooltipHeader
-				uPlotInstance={uPlotInstance}
-				showTooltipHeader
-				isPinned={isPinned}
-				activeItem={null}
-				headerRowClassName={Styles.headerRow}
-				dateFormat={DATE_TIME_FORMATS.MONTH_DATE}
-			/>
-			{activeItem != null && <span className={TooltipStyles.divider} />}
-			<div className={Styles.itemList} data-testid="uplot-tooltip-list">
-				{content.map((item) => (
-					<TooltipItem key={item.label} item={item} isItemActive={item.isActive} />
-				))}
-			</div>
-		</div>
-	);
-}

frontend/src/container/BillingContainer/BillingUsageGraph/BillingUsageGraph.module.scss

@@ -1,37 +0,0 @@
-.graphContainer {
-	height: 100%;
-}
-
-.billingGraphCard {
-	:global {
-		.uplot-no-data {
-			display: flex;
-			align-items: center;
-			justify-content: center;
-		}
-
-		.ant-card-body {
-			height: 40vh;
-
-			.uplot-graph-container {
-				padding: 8px;
-			}
-		}
-	}
-
-	.totalSpent {
-		font-family: 'SF Mono', monospace;
-		font-size: 16px;
-		font-style: normal;
-		font-weight: 600;
-		line-height: 24px;
-	}
-
-	.totalSpentTitle {
-		font-size: 12px;
-		font-weight: 500;
-		line-height: 22px;
-		letter-spacing: 0.48px;
-		color: var(--l2-foreground);
-	}
-}

frontend/src/container/BillingContainer/BillingUsageGraph/BillingUsageGraph.styles.scss

@@ -0,0 +1,23 @@
+.billing-graph-card {
+	.ant-card-body {
+		height: 40vh;
+		.uplot-graph-container {
+			padding: 8px;
+		}
+	}
+	.total-spent {
+		font-family: 'SF Mono' monospace;
+		font-size: 16px;
+		font-style: normal;
+		font-weight: 600;
+		line-height: 24px;
+	}
+
+	.total-spent-title {
+		font-size: 12px;
+		font-weight: 500;
+		line-height: 22px;
+		letter-spacing: 0.48px;
+		color: var(--l2-foreground);
+	}
+}

frontend/src/container/BillingContainer/BillingUsageGraph/BillingUsageGraph.tsx

@@ -1,146 +1,221 @@
-import { useCallback, useMemo, useRef } from 'react';
+import { useMemo, useRef } from 'react';
+import { Color } from '@signozhq/design-tokens';
 import { Card, Flex } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
-import BarChart from 'container/DashboardContainer/visualization/charts/BarChart/BarChart';
+import Uplot from 'components/Uplot';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useResizeObserver } from 'hooks/useDimensions';
-import { prepareChartData } from 'lib/uPlotV2/utils/dataUtils';
-import {
-	LegendPosition,
-	TooltipRenderArgs,
-} from 'lib/uPlotV2/components/types';
-import type { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
-import type uPlot from 'uplot';
-import type { UsageResponsePayloadProps } from 'api/billing/getUsage';
+import tooltipPlugin from 'lib/uPlotLib/plugins/tooltipPlugin';
+import getAxes from 'lib/uPlotLib/utils/getAxes';
+import getRenderer from 'lib/uPlotLib/utils/getRenderer';
+import { getUPlotChartData } from 'lib/uPlotLib/utils/getUplotChartData';
+import { getXAxisScale } from 'lib/uPlotLib/utils/getXAxisScale';
+import { getYAxisScale } from 'lib/uPlotLib/utils/getYAxisScale';
+import uPlot from 'uplot';
 
-import { BillingBarChartTooltip } from './BillingBarChartTooltip';
-import { prepareBillingBarConfig } from './prepareBillingBarConfig';
 import {
-	calculateStartEndTime,
 	convertDataToMetricRangePayload,
 	fillMissingValuesForQuantities,
 } from './utils';
 
-import styles from './BillingUsageGraph.module.scss';
+import './BillingUsageGraph.styles.scss';
+import '../../../lib/uPlotLib/uPlotLib.styles.scss';
 
 interface BillingUsageGraphProps {
-	data: Partial<UsageResponsePayloadProps>;
+	data: any;
 	billAmount: number;
 }
+const paths = (
+	u: any,
+	seriesIdx: number,
+	idx0: number,
+	idx1: number,
+	extendGap: boolean,
+	buildClip: boolean,
+): uPlot.Series.PathBuilder => {
+	const s = u.series[seriesIdx];
+	const style = s.drawStyle;
+	const interp = s.lineInterpolation;
 
-const numberFormatter = new Intl.NumberFormat('en-US');
+	const renderer = getRenderer(style, interp);
+
+	return renderer(u, seriesIdx, idx0, idx1, extendGap, buildClip);
+};
+
+const calculateStartEndTime = (
+	data: any,
+): { startTime: number; endTime: number } => {
+	const timestamps: number[] = [];
+	data?.details?.breakdown?.forEach((breakdown: any) => {
+		breakdown?.dayWiseBreakdown?.breakdown?.forEach((entry: any) => {
+			timestamps.push(entry?.timestamp);
+		});
+	});
+	const billingTime = [data?.billingPeriodStart, data?.billingPeriodEnd];
+	const startTime: number = Math.min(...timestamps, ...billingTime);
+	const endTime: number = Math.max(...timestamps, ...billingTime);
+	return { startTime, endTime };
+};
 
 export function BillingUsageGraph(props: BillingUsageGraphProps): JSX.Element {
 	const { data, billAmount } = props;
-
+	// Added this to fix the issue where breakdown with one day data are causing the bars to spread across multiple days
+	data?.details?.breakdown?.forEach((breakdown: any) => {
+		if (breakdown?.dayWiseBreakdown?.breakdown?.length === 1) {
+			const currentDay = breakdown.dayWiseBreakdown.breakdown[0];
+			const nextDay = {
+				...currentDay,
+				timestamp: currentDay.timestamp + 86400,
+				count: 0,
+				size: 0,
+				quantity: 0,
+				total: 0,
+			};
+			breakdown.dayWiseBreakdown.breakdown.push(nextDay);
+		}
+	});
+	const graphCompatibleData = useMemo(
+		() => convertDataToMetricRangePayload(data),
+		[data],
+	);
+	const chartData = getUPlotChartData(graphCompatibleData);
 	const graphRef = useRef<HTMLDivElement>(null);
 	const isDarkMode = useIsDarkMode();
 	const containerDimensions = useResizeObserver(graphRef);
 
-	// Single-day data causes bars to span multiple days — add a synthetic
-	// zero-value next-day entry so uPlot renders a correctly-sized single-day bar.
-	const normalizedData = useMemo(() => {
-		if (!data?.details?.breakdown) {
-			return data;
-		}
-		return {
-			...data,
-			details: {
-				...data.details,
-				breakdown: data.details.breakdown.map((breakdown) => {
-					if (breakdown?.dayWiseBreakdown?.breakdown?.length !== 1) {
-						return breakdown;
-					}
-					const currentDay = breakdown.dayWiseBreakdown.breakdown[0];
-					const nextDay = {
-						...currentDay,
-						timestamp: currentDay.timestamp + 86400,
-						count: 0,
-						size: 0,
-						quantity: 0,
-						total: 0,
-					};
-					return {
-						...breakdown,
-						dayWiseBreakdown: {
-							...breakdown.dayWiseBreakdown,
-							breakdown: [...breakdown.dayWiseBreakdown.breakdown, nextDay],
-						},
-					};
-				}),
-			},
-		};
-	}, [data]);
-
-	const graphCompatibleData = useMemo(
-		() => convertDataToMetricRangePayload(normalizedData),
-		[normalizedData],
-	);
-
-	const chartData = useMemo(
-		() => prepareChartData(graphCompatibleData) as uPlot.AlignedData,
-		[graphCompatibleData],
-	);
-
-	const filledApiResponse = useMemo(
-		(): MetricRangePayloadProps =>
-			fillMissingValuesForQuantities(
-				graphCompatibleData,
-				chartData[0] as number[],
-			),
-		[graphCompatibleData, chartData],
-	);
-
 	const { startTime, endTime } = useMemo(
-		() =>
-			calculateStartEndTime(normalizedData as Partial<UsageResponsePayloadProps>),
-		[normalizedData],
+		() => calculateStartEndTime(data),
+		[data],
 	);
 
-	const config = useMemo(
-		() =>
-			prepareBillingBarConfig({
-				isDarkMode,
-				// Subtract 86400s (one day) from startTime to add a buffer before first bar
-				minTimeScale: startTime !== undefined ? startTime - 86400 : undefined,
-				maxTimeScale: endTime,
-				apiResponse: graphCompatibleData,
-			}),
-		[isDarkMode, startTime, endTime, graphCompatibleData],
+	const getGraphSeries = (color: string, label: string): any => ({
+		drawStyle: 'bars',
+		paths,
+		lineInterpolation: 'spline',
+		show: true,
+		label,
+		fill: color,
+		stroke: color,
+		width: 2,
+		spanGaps: true,
+		points: {
+			size: 5,
+			show: false,
+			stroke: color,
+		},
+	});
+
+	const uPlotSeries: any = useMemo(
+		() => [
+			{ label: 'Timestamp', stroke: 'purple' },
+			getGraphSeries(
+				'#7CEDBE',
+				graphCompatibleData.data.result[0]?.legend as string,
+			),
+			getGraphSeries(
+				'#4E74F8',
+				graphCompatibleData.data.result[1]?.legend as string,
+			),
+			getGraphSeries(
+				'#F24769',
+				graphCompatibleData.data.result[2]?.legend as string,
+			),
+		],
+		[graphCompatibleData.data.result],
 	);
 
-	const renderBillingTooltip = useCallback(
-		(args: TooltipRenderArgs) => (
-			<BillingBarChartTooltip billingApiResponse={filledApiResponse} {...args} />
-		),
-		[filledApiResponse],
+	const axesOptions = getAxes({ isDarkMode, yAxisUnit: '' });
+
+	const optionsForChart: uPlot.Options = useMemo(
+		() => ({
+			id: 'billing-usage-breakdown',
+			series: uPlotSeries,
+			width: containerDimensions.width,
+			height: containerDimensions.height - 30,
+			axes: [
+				{
+					...axesOptions[0],
+					grid: {
+						...axesOptions.grid,
+						show: false,
+						stroke: isDarkMode ? Color.BG_VANILLA_400 : Color.BG_INK_400,
+					},
+				},
+				{
+					...axesOptions[1],
+					stroke: isDarkMode ? Color.BG_SLATE_200 : Color.BG_INK_400,
+				},
+			],
+			scales: {
+				x: {
+					...getXAxisScale(startTime - 86400, endTime), // Minus 86400 from startTime to decrease a day to have a buffer start
+				},
+				y: {
+					...getYAxisScale({
+						series: graphCompatibleData?.data?.newResult?.data?.result,
+						yAxisUnit: '',
+						softMax: null,
+						softMin: null,
+					}),
+				},
+			},
+			legend: {
+				show: true,
+				live: false,
+				isolate: true,
+			},
+			cursor: {
+				lock: false,
+				focus: {
+					prox: 1e6,
+					bias: 1,
+				},
+			},
+			focus: {
+				alpha: 0.3,
+			},
+			padding: [32, 32, 16, 16],
+			plugins: [
+				tooltipPlugin({
+					apiResponse: fillMissingValuesForQuantities(
+						graphCompatibleData,
+						chartData[0],
+					),
+					yAxisUnit: '',
+					isBillingUsageGraphs: true,
+					isDarkMode,
+				}),
+			],
+		}),
+		[
+			axesOptions,
+			chartData,
+			containerDimensions.height,
+			containerDimensions.width,
+			endTime,
+			graphCompatibleData,
+			isDarkMode,
+			startTime,
+			uPlotSeries,
+		],
 	);
 
+	const numberFormatter = new Intl.NumberFormat('en-US');
+
 	return (
-		<Card bordered={false} className={styles.billingGraphCard}>
+		<Card bordered={false} className="billing-graph-card">
 			<Flex justify="space-between">
 				<Flex vertical gap={6}>
-					<Typography.Text className={styles.totalSpentTitle}>
+					<Typography.Text className="total-spent-title">
 						TOTAL SPENT
 					</Typography.Text>
-					<Typography.Text className={styles.totalSpent}>
+					<Typography.Text className="total-spent">
 						${numberFormatter.format(billAmount)}
 					</Typography.Text>
 				</Flex>
 			</Flex>
-			<div ref={graphRef} className={styles.graphContainer}>
-				{containerDimensions.width > 0 && containerDimensions.height > 0 && (
-					<BarChart
-						config={config}
-						data={chartData}
-						isStackedBarChart
-						legendConfig={{ position: LegendPosition.BOTTOM }}
-						customTooltip={renderBillingTooltip}
-						width={containerDimensions.width}
-						height={containerDimensions.height - 30}
-						canPinTooltip
-					/>
-				)}
+			<div ref={graphRef} style={{ height: '100%', paddingBottom: 48 }}>
+				<Uplot data={chartData} options={optionsForChart} />
 			</div>
 		</Card>
 	);

frontend/src/container/BillingContainer/BillingUsageGraph/__tests__/BillingBarChartTooltip.test.tsx

@@ -1,165 +0,0 @@
-import React from 'react';
-import { render, screen } from 'tests/test-utils';
-import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
-import uPlot from 'uplot';
-
-import { BillingBarChartTooltip } from '../BillingBarChartTooltip';
-
-// Mock buildTooltipContent so tests don't depend on uPlot stacking math
-jest.mock('lib/uPlotV2/components/Tooltip/utils', () => ({
-	buildTooltipContent: jest.fn().mockReturnValue([
-		{
-			label: 'Logs',
-			value: 100,
-			tooltipValue: '$100.00',
-			color: '#7CEDBE',
-			isActive: true,
-			isHighlighted: false,
-		},
-		{
-			label: 'Traces',
-			value: 50,
-			tooltipValue: '$50.00',
-			color: '#4E74F8',
-			isActive: false,
-			isHighlighted: false,
-		},
-	]),
-}));
-
-jest.mock('hooks/useDarkMode', () => ({
-	useIsDarkMode: jest.fn().mockReturnValue(false),
-}));
-
-function makeUPlotInstance(seriesLabels: string[]): uPlot {
-	return {
-		data: [
-			[1000, 2000],
-			[100, 200],
-			[50, 80],
-		],
-		cursor: { idx: 0 },
-		series: [
-			{ label: 'Timestamp', show: true, stroke: '#000' },
-			...seriesLabels.map((label) => ({
-				label,
-				show: true,
-				stroke: '#aabbcc',
-			})),
-		],
-	} as unknown as uPlot;
-}
-
-function makeBillingApiResponse(
-	entries: { legend: string; quantity: (number | null)[]; unit: string }[],
-): MetricRangePayloadProps {
-	return {
-		data: {
-			result: entries.map((e) => ({
-				legend: e.legend,
-				queryName: e.legend,
-				metric: {},
-				values: [[1000, '10']] as [number, string][],
-				quantity: e.quantity as number[],
-				unit: e.unit,
-			})),
-			resultType: '',
-			newResult: { data: { result: [], resultType: '' } },
-		},
-	};
-}
-
-const baseTooltipArgs = {
-	isPinned: false,
-	dismiss: jest.fn(),
-	viaSync: false,
-	seriesIndex: 1,
-	dataIndexes: [null, 0, 0],
-};
-
-describe('BillingBarChartTooltip', () => {
-	it('augments tooltipValue with quantity and unit for each series', () => {
-		const uPlotInstance = makeUPlotInstance(['Logs', 'Traces']);
-		const billingApiResponse = makeBillingApiResponse([
-			{ legend: 'Logs', quantity: [1.5, 2.0], unit: 'GB' },
-			{ legend: 'Traces', quantity: [500, 800], unit: 'spans' },
-		]);
-
-		render(
-			<BillingBarChartTooltip
-				{...baseTooltipArgs}
-				uPlotInstance={uPlotInstance}
-				billingApiResponse={billingApiResponse}
-			/>,
-		);
-
-		expect(screen.getAllByText(/1\.5 GB/i).length).toBeGreaterThan(0);
-		expect(screen.getAllByText(/500 spans/i).length).toBeGreaterThan(0);
-	});
-
-	it('omits quantity line when quantity at dataIndex is null', () => {
-		const uPlotInstance = makeUPlotInstance(['Logs', 'Traces']);
-		const billingApiResponse = makeBillingApiResponse([
-			{ legend: 'Logs', quantity: [null, null], unit: 'GB' },
-			{ legend: 'Traces', quantity: [null, null], unit: 'spans' },
-		]);
-
-		render(
-			<BillingBarChartTooltip
-				{...baseTooltipArgs}
-				uPlotInstance={uPlotInstance}
-				billingApiResponse={billingApiResponse}
-			/>,
-		);
-
-		expect(screen.queryByText(/null GB/i)).not.toBeInTheDocument();
-		expect(screen.queryByText(/null spans/i)).not.toBeInTheDocument();
-		expect(screen.getByTestId('uplot-tooltip-container')).toBeInTheDocument();
-	});
-
-	it('formats dollar value via getToolTipValue — strips trailing zeros (0.3076 → $0.3)', () => {
-		const uPlotInstance = makeUPlotInstance(['Logs']);
-		const { buildTooltipContent } = jest.requireMock(
-			'lib/uPlotV2/components/Tooltip/utils',
-		) as { buildTooltipContent: jest.Mock };
-		buildTooltipContent.mockReturnValueOnce([
-			{
-				label: 'Logs',
-				value: 0.3076171875,
-				tooltipValue: '$0.31',
-				color: '#7CEDBE',
-				isActive: true,
-				isHighlighted: false,
-			},
-		]);
-		const billingApiResponse = makeBillingApiResponse([
-			{ legend: 'Logs', quantity: [1.23], unit: 'GB' },
-		]);
-
-		render(
-			<BillingBarChartTooltip
-				{...baseTooltipArgs}
-				uPlotInstance={uPlotInstance}
-				billingApiResponse={billingApiResponse}
-			/>,
-		);
-
-		expect(screen.getAllByText(/\$0\.3 -/i).length).toBeGreaterThan(0);
-	});
-
-	it('passes through base tooltipValue when series is not in billingApiResponse', () => {
-		const uPlotInstance = makeUPlotInstance(['Logs', 'Traces']);
-		const billingApiResponse = makeBillingApiResponse([]);
-
-		render(
-			<BillingBarChartTooltip
-				{...baseTooltipArgs}
-				uPlotInstance={uPlotInstance}
-				billingApiResponse={billingApiResponse}
-			/>,
-		);
-
-		expect(screen.getAllByText('$100.00').length).toBeGreaterThan(0);
-		expect(screen.getAllByText('$50.00').length).toBeGreaterThan(0);
-	});
-});

frontend/src/container/BillingContainer/BillingUsageGraph/__tests__/prepareBillingBarConfig.test.ts

@@ -1,101 +0,0 @@
-import { Color } from '@signozhq/design-tokens';
-import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
-
-import { prepareBillingBarConfig } from '../prepareBillingBarConfig';
-
-const makeApiResponse = (legends: string[]): MetricRangePayloadProps => ({
-	data: {
-		result: legends.map((legend) => ({
-			legend,
-			queryName: legend,
-			metric: {},
-			values: [[1000, '10']],
-		})),
-		resultType: '',
-		newResult: { data: { result: [], resultType: '' } },
-	},
-});
-
-describe('prepareBillingBarConfig', () => {
-	const baseProps = { isDarkMode: false };
-
-	it('returns a builder with no series when apiResponse is undefined', () => {
-		const builder = prepareBillingBarConfig(baseProps);
-		const config = builder.getConfig();
-		expect(config.series).toHaveLength(1);
-	});
-
-	it('returns a builder with no series when result is empty', () => {
-		const builder = prepareBillingBarConfig({
-			...baseProps,
-			apiResponse: makeApiResponse([]),
-		});
-		const config = builder.getConfig();
-		expect(config.series).toHaveLength(1);
-	});
-
-	it('adds one series per result entry with correct labels and colors', () => {
-		const builder = prepareBillingBarConfig({
-			...baseProps,
-			apiResponse: makeApiResponse(['Logs', 'Traces', 'Metrics']),
-		});
-		const config = builder.getConfig();
-		expect(config.series).toHaveLength(4);
-		expect(config.series?.[1]?.label).toBe('Logs');
-		expect(config.series?.[1]?.stroke).toBe(Color.BG_FOREST_300);
-		expect(config.series?.[2]?.label).toBe('Traces');
-		expect(config.series?.[2]?.stroke).toBe(Color.BG_ROBIN_500);
-		expect(config.series?.[3]?.label).toBe('Metrics');
-		expect(config.series?.[3]?.stroke).toBe(Color.BG_SAKURA_500);
-	});
-
-	it('assigns fallback color (Amber500) for signals beyond the 3-color palette', () => {
-		const builder = prepareBillingBarConfig({
-			...baseProps,
-			apiResponse: makeApiResponse(['A', 'B', 'C', 'D']),
-		});
-		const config = builder.getConfig();
-		expect(config.series?.[4]?.stroke).toBe(Color.BG_AMBER_500);
-	});
-
-	it('sets stacking bands, padding, and focus alpha for behavioral parity', () => {
-		const builder = prepareBillingBarConfig({
-			...baseProps,
-			apiResponse: makeApiResponse(['Logs', 'Traces', 'Metrics']),
-		});
-		const config = builder.getConfig();
-		expect(config.bands).toStrictEqual([{ series: [1, 2] }, { series: [2, 3] }]);
-		expect(config.padding).toStrictEqual([32, 32, 16, 16]);
-		expect(config.focus).toStrictEqual({ alpha: 0.3 });
-	});
-
-	it('sets no bands when result is empty', () => {
-		const builder = prepareBillingBarConfig({
-			...baseProps,
-			apiResponse: makeApiResponse([]),
-		});
-		const config = builder.getConfig();
-		expect(config.bands).toBeUndefined();
-	});
-
-	it('uses queryName as label when legend is undefined', () => {
-		const apiResponse: MetricRangePayloadProps = {
-			data: {
-				result: [
-					{
-						legend: undefined as any,
-						queryName: 'Logs',
-						metric: {},
-						values: [[1000, '10']],
-					},
-				],
-				resultType: '',
-				newResult: { data: { result: [], resultType: '' } },
-			},
-		};
-		const builder = prepareBillingBarConfig({ isDarkMode: false, apiResponse });
-		const config = builder.getConfig();
-		expect(config.series?.[1]?.label).toBe('Logs');
-		expect(config.series?.[1]?.stroke).toBe(Color.BG_FOREST_300);
-	});
-});

frontend/src/container/BillingContainer/BillingUsageGraph/__tests__/utils.test.ts

@@ -1,145 +0,0 @@
-import {
-	calculateStartEndTime,
-	convertDataToMetricRangePayload,
-} from '../utils';
-
-const makeData = (
-	timestamps: number[],
-	billingPeriodStart?: number,
-	billingPeriodEnd?: number,
-) => ({
-	billingPeriodStart,
-	billingPeriodEnd,
-	details: {
-		total: 0,
-		baseFee: 0,
-		billTotal: 0,
-		breakdown: [
-			{
-				type: 'Logs',
-				unit: 'GB',
-				dayWiseBreakdown: {
-					breakdown: timestamps.map((timestamp) => ({
-						timestamp,
-						total: 0,
-						quantity: 0,
-						count: 0,
-						size: 0,
-					})),
-				},
-			},
-		],
-	},
-});
-
-describe('convertDataToMetricRangePayload', () => {
-	it('returns empty result when all dayWiseBreakdown.breakdown are null', () => {
-		const data = {
-			billingPeriodStart: 1778763678,
-			billingPeriodEnd: 1781442078,
-			details: {
-				total: 0,
-				baseFee: 49,
-				billTotal: 49,
-				breakdown: [
-					{
-						type: 'Metrics',
-						unit: 'Million',
-						tiers: [],
-						dayWiseBreakdown: { type: '', breakdown: null },
-					},
-					{
-						type: 'Traces',
-						unit: 'GB',
-						tiers: [],
-						dayWiseBreakdown: { type: '', breakdown: null },
-					},
-					{
-						type: 'Logs',
-						unit: 'GB',
-						tiers: [],
-						dayWiseBreakdown: { type: '', breakdown: null },
-					},
-				],
-			},
-		};
-		const result = convertDataToMetricRangePayload(data);
-		expect(result.data.result).toHaveLength(0);
-	});
-
-	it('includes only series that have day-wise data', () => {
-		const data = {
-			details: {
-				breakdown: [
-					{
-						type: 'Metrics',
-						unit: 'Million',
-						dayWiseBreakdown: { breakdown: null },
-					},
-					{
-						type: 'Logs',
-						unit: 'GB',
-						dayWiseBreakdown: {
-							breakdown: [
-								{ timestamp: 1000, total: 5, quantity: 10, count: 0, size: 0 },
-							],
-						},
-					},
-				],
-			},
-		};
-		const result = convertDataToMetricRangePayload(data);
-		expect(result.data.result).toHaveLength(1);
-		expect(result.data.result[0].legend).toBe('Logs');
-	});
-});
-
-describe('calculateStartEndTime', () => {
-	it('returns min/max of all breakdown timestamps', () => {
-		const data = makeData([1000, 3000, 2000]);
-		expect(calculateStartEndTime(data)).toStrictEqual({
-			startTime: 1000,
-			endTime: 3000,
-		});
-	});
-
-	it('includes billingPeriodStart and billingPeriodEnd in the range', () => {
-		const data = makeData([2000, 3000], 500, 4000);
-		expect(calculateStartEndTime(data)).toStrictEqual({
-			startTime: 500,
-			endTime: 4000,
-		});
-	});
-
-	it('returns undefined when there are no timestamps and no billing period', () => {
-		expect(calculateStartEndTime({})).toStrictEqual({
-			startTime: undefined,
-			endTime: undefined,
-		});
-	});
-
-	it('returns undefined when breakdown is empty', () => {
-		const data = makeData([]);
-		expect(calculateStartEndTime(data)).toStrictEqual({
-			startTime: undefined,
-			endTime: undefined,
-		});
-	});
-
-	it('filters out non-finite billingPeriod values', () => {
-		const data = makeData([1000], NaN, Infinity);
-		expect(calculateStartEndTime(data)).toStrictEqual({
-			startTime: 1000,
-			endTime: 1000,
-		});
-	});
-
-	it('works when details is missing', () => {
-		expect(
-			calculateStartEndTime({ billingPeriodStart: 100, billingPeriodEnd: 200 }),
-		).toStrictEqual({
-			startTime: 100,
-			endTime: 200,
-		});
-	});
-});

frontend/src/container/BillingContainer/BillingUsageGraph/prepareBillingBarConfig.ts

@@ -1,71 +0,0 @@
-import { Color } from '@signozhq/design-tokens';
-import type { Timezone } from 'components/CustomTimePicker/timezoneUtils';
-import { PANEL_TYPES } from 'constants/queryBuilder';
-import { getInitialStackedBands } from 'container/DashboardContainer/visualization/charts/utils/stackSeriesUtils';
-import { buildBaseConfig } from 'container/DashboardContainer/visualization/panels/utils/baseConfigBuilder';
-import { DrawStyle } from 'lib/uPlotV2/config/types';
-import type { UPlotConfigBuilder } from 'lib/uPlotV2/config/UPlotConfigBuilder';
-import type { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
-
-const BILLING_SERIES_COLORS = [
-	Color.BG_FOREST_300,
-	Color.BG_ROBIN_500,
-	Color.BG_SAKURA_500,
-];
-
-export interface PrepareBillingBarConfigProps {
-	isDarkMode: boolean;
-	timezone?: Timezone;
-	minTimeScale?: number;
-	maxTimeScale?: number;
-	apiResponse?: MetricRangePayloadProps;
-}
-
-export function prepareBillingBarConfig({
-	isDarkMode,
-	timezone,
-	minTimeScale,
-	maxTimeScale,
-	apiResponse,
-}: PrepareBillingBarConfigProps): UPlotConfigBuilder {
-	const builder = buildBaseConfig({
-		id: 'billing-usage-breakdown',
-		isDarkMode,
-		timezone,
-		panelType: PANEL_TYPES.BAR,
-		minTimeScale,
-		maxTimeScale,
-	});
-
-	const results = apiResponse?.data?.result;
-	if (!results?.length) {
-		return builder;
-	}
-
-	const labels = results.map((s) => s.legend || s.queryName || '');
-
-	const colorMapping = labels.reduce<Record<string, string>>(
-		(acc, label, index) => {
-			acc[label] = BILLING_SERIES_COLORS[index] ?? Color.BG_AMBER_500;
-			return acc;
-		},
-		{},
-	);
-
-	labels.forEach((label) => {
-		builder.addSeries({
-			scaleKey: 'y',
-			drawStyle: DrawStyle.Bar,
-			label,
-			colorMapping,
-			isDarkMode,
-			metric: {},
-		});
-	});
-
-	builder.setBands(getInitialStackedBands(results.length));
-	builder.setPadding([32, 32, 16, 16]);
-	builder.setFocus({ alpha: 0.3 });
-
-	return builder;
-}

frontend/src/container/BillingContainer/BillingUsageGraph/utils.ts

@@ -1,7 +1,7 @@
 import { UsageResponsePayloadProps } from 'api/billing/getUsage';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import dayjs from 'dayjs';
-import { prepareChartData } from 'lib/uPlotV2/utils/dataUtils';
+import { getUPlotChartData } from 'lib/uPlotLib/utils/getUplotChartData';
 import { isEmpty, isNull } from 'lodash-es';
 import { unparse } from 'papaparse';
 import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
@@ -29,25 +29,23 @@ export const convertDataToMetricRangePayload = (
 		return emptyStateData;
 	}
 
-	const payload = breakdown
-		.map((info: any) => {
-			const metric = info.type;
-			const sortedBreakdownData = (info?.dayWiseBreakdown?.breakdown || []).sort(
-				(a: any, b: any) => a.timestamp - b.timestamp,
-			);
-			const values = (sortedBreakdownData || []).map((categoryInfo: any) => [
-				categoryInfo.timestamp,
-				categoryInfo.total,
-			]);
-			const queryName = info.type;
-			const legend = info.type;
-			const { unit } = info;
-			const quantity = sortedBreakdownData.map(
-				(categoryInfo: any) => categoryInfo.quantity,
-			);
-			return { metric, values, queryName, legend, quantity, unit };
-		})
-		.filter((series: any) => series.values.length > 0);
+	const payload = breakdown.map((info: any) => {
+		const metric = info.type;
+		const sortedBreakdownData = (info?.dayWiseBreakdown?.breakdown || []).sort(
+			(a: any, b: any) => a.timestamp - b.timestamp,
+		);
+		const values = (sortedBreakdownData || []).map((categoryInfo: any) => [
+			categoryInfo.timestamp,
+			categoryInfo.total,
+		]);
+		const queryName = info.type;
+		const legend = info.type;
+		const { unit } = info;
+		const quantity = sortedBreakdownData.map(
+			(categoryInfo: any) => categoryInfo.quantity,
+		);
+		return { metric, values, queryName, legend, quantity, unit };
+	});
 
 	const sortedData = payload.sort((a: any, b: any) => {
 		const sumA = a.values.reduce((acc: any, val: any) => acc + val[1], 0);
@@ -122,40 +120,11 @@ export function prepareCsvData(data: Partial<UsageResponsePayloadProps>): {
 	fileName: string;
 } {
 	const graphCompatibleData = convertDataToMetricRangePayload(data);
-	const chartData = prepareChartData(graphCompatibleData);
-	const quantityMapArr = quantityDataArr(
-		graphCompatibleData,
-		chartData[0] as number[],
-	);
+	const chartData = getUPlotChartData(graphCompatibleData);
+	const quantityMapArr = quantityDataArr(graphCompatibleData, chartData[0]);
 
 	return {
 		csvData: unparse(generateCsvData(quantityMapArr)),
 		fileName: csvFileName(quantityMapArr),
 	};
 }
-
-export function calculateStartEndTime(
-	data: Partial<UsageResponsePayloadProps>,
-): { startTime: number | undefined; endTime: number | undefined } {
-	const timestamps: number[] = [];
-	data?.details?.breakdown?.forEach((breakdown) => {
-		breakdown?.dayWiseBreakdown?.breakdown?.forEach((entry) => {
-			timestamps.push(entry.timestamp);
-		});
-	});
-
-	const billingTime: number[] = [
-		data?.billingPeriodStart,
-		data?.billingPeriodEnd,
-	].filter((t): t is number => typeof t === 'number' && Number.isFinite(t));
-
-	const allTimes = [...timestamps, ...billingTime];
-	if (allTimes.length === 0) {
-		return { startTime: undefined, endTime: undefined };
-	}
-
-	return {
-		startTime: Math.min(...allTimes),
-		endTime: Math.max(...allTimes),
-	};
-}

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

@@ -9,9 +9,8 @@ import { Skeleton } from 'antd';
 import logEvent from 'api/common/logEvent';
 import {
 	getListAccountServicesMetadataQueryKey,
-	invalidateGetAccountService,
+	invalidateGetService,
 	invalidateListAccountServicesMetadata,
-	useGetAccountService,
 	useGetService,
 	useUpdateService,
 } from 'api/generated/services/cloudintegration';
@@ -119,50 +118,30 @@ function ServiceDetails({
 	const cloudAccountId = urlQuery.get('cloudAccountId');
 	const serviceId = urlQuery.get('service');
 	const isReadOnly = !cloudAccountId;
+	const serviceQueryParams = cloudAccountId
+		? { cloud_integration_id: cloudAccountId }
+		: undefined;
 
 	const {
-		queryKey: _accountServiceQueryKey,
-		data: accountServiceData,
-		isLoading: isAccountServiceLoading,
-	} = useGetAccountService(
-		{
-			cloudProvider: type,
-			id: cloudAccountId || '',
-			serviceId: serviceId || '',
-		},
-		{
-			query: {
-				enabled: !!serviceId && !!cloudAccountId,
-				select: (response): ServiceDetailsData => response.data,
-			},
-		},
-	);
-
-	const {
-		queryKey: _readOnlyServiceQueryKey,
-		data: readOnlyServiceData,
-		isLoading: isReadOnlyServiceLoading,
+		queryKey: _queryKey,
+		data: serviceDetailsData,
+		isLoading: isServiceDetailsLoading,
 	} = useGetService(
 		{
 			cloudProvider: type,
 			serviceId: serviceId || '',
 		},
-		undefined,
+		{
+			...serviceQueryParams,
+		},
 		{
 			query: {
-				enabled: !!serviceId && !cloudAccountId,
+				enabled: !!serviceId,
 				select: (response): ServiceDetailsData => response.data,
 			},
 		},
 	);
 
-	const serviceDetailsData = cloudAccountId
-		? accountServiceData
-		: readOnlyServiceData;
-	const isServiceDetailsLoading = cloudAccountId
-		? isAccountServiceLoading
-		: isReadOnlyServiceLoading;
-
 	const integrationConfig =
 		type === IntegrationType.AWS_SERVICES
 			? serviceDetailsData?.cloudIntegrationService?.config?.aws
@@ -289,11 +268,16 @@ function ServiceDetails({
 								},
 							);
 
-							invalidateGetAccountService(queryClient, {
-								cloudProvider: type,
-								id: cloudAccountId,
-								serviceId,
-							});
+							invalidateGetService(
+								queryClient,
+								{
+									cloudProvider: type,
+									serviceId,
+								},
+								{
+									cloud_integration_id: cloudAccountId,
+								},
+							);
 
 							invalidateListAccountServicesMetadata(queryClient, {
 								cloudProvider: type,

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

@@ -64,7 +64,7 @@ describe('ServiceDetails for S3 Sync service', () => {
 				(_req, res, ctx) => res(ctx.json(accountsResponse)),
 			),
 			rest.get(
-				'http://localhost/api/v1/cloud_integrations/aws/accounts/:accountId/services/:serviceId',
+				'http://localhost/api/v1/cloud_integrations/aws/services/:serviceId',
 				(req, res, ctx) =>
 					res(
 						ctx.json(

frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/__tests__/mockData.ts

@@ -32,7 +32,7 @@ const accountsResponse: ListAccounts200 = {
 	},
 };
 
-/** Response shape for GET /cloud_integrations/aws/accounts/:accountId/services/:serviceId (used by ServiceDetails). */
+/** Response shape for GET /cloud_integrations/aws/services/:serviceId (used by ServiceDetails). */
 const buildServiceDetailsResponse = (
 	serviceId: string,
 	initialConfigLogsS3Buckets: Record<string, string[]> = {},

frontend/src/lib/uPlotV2/components/Tooltip/components/TooltipHeader/TooltipHeader.tsx

@@ -18,8 +18,6 @@ interface TooltipHeaderProps {
 	showTooltipHeader: boolean;
 	isPinned: boolean;
 	activeItem: TooltipContentItem | null;
-	headerRowClassName?: string;
-	dateFormat?: string;
 }
 
 export default function TooltipHeader({
@@ -28,8 +26,6 @@ export default function TooltipHeader({
 	showTooltipHeader,
 	isPinned,
 	activeItem,
-	headerRowClassName,
-	dateFormat = DATE_TIME_FORMATS.MONTH_DATETIME_SECONDS,
 }: TooltipHeaderProps): JSX.Element {
 	const { timezone: userTimezone } = useTimezone();
 	const resolvedTimezone = timezone?.value ?? userTimezone.value;
@@ -48,13 +44,12 @@ export default function TooltipHeader({
 		}
 		return dayjs(timestamp * 1000)
 			.tz(resolvedTimezone)
-			.format(dateFormat);
+			.format(DATE_TIME_FORMATS.MONTH_DATETIME_SECONDS);
 	}, [
 		resolvedTimezone,
 		uPlotInstance.data,
 		uPlotInstance.cursor.idx,
 		showTooltipHeader,
-		dateFormat,
 	]);
 
 	return (
@@ -63,7 +58,7 @@ export default function TooltipHeader({
 			data-testid="uplot-tooltip-header-container"
 		>
 			{showTooltipHeader && headerTitle && (
-				<div className={cx(Styles.headerRow, headerRowClassName)}>
+				<div className={Styles.headerRow}>
 					<span>{headerTitle}</span>
 					{isPinned && (
 						<div className={cx(Styles.status)} data-testid="uplot-tooltip-status">

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/Panel.tsx

@@ -6,10 +6,6 @@ import { EllipsisVertical } from '@signozhq/icons';
 import type { DashboardtypesPanelDTO } from 'api/generated/services/sigNoz.schemas';
 import cx from 'classnames';
 
-import type { DashboardSection } from '../../utils';
-import type { DeletePanelArgs } from './hooks/useDeletePanel';
-import type { MovePanelArgs } from './hooks/useMovePanelToSection';
-import PanelActionsMenu from './PanelActionsMenu/PanelActionsMenu';
 import styles from './Panel.module.scss';
 
 interface Props {
@@ -21,22 +17,9 @@ interface Props {
 	 * data. Currently unused on purpose.
 	 */
 	isVisible?: boolean;
-	/** Section actions — present only in editable sectioned mode. */
-	currentLayoutIndex?: number;
-	sections?: DashboardSection[];
-	onMovePanel?: (args: MovePanelArgs) => void;
-	onDeletePanel?: (args: DeletePanelArgs) => void;
 }
 
-function Panel({
-	panel,
-	panelId,
-	isVisible,
-	currentLayoutIndex,
-	sections,
-	onMovePanel,
-	onDeletePanel,
-}: Props): JSX.Element {
+function Panel({ panel, panelId, isVisible }: Props): JSX.Element {
 	const name = panel?.spec?.display?.name || `Panel ${panelId.slice(0, 6)}`;
 	const description = panel?.spec?.display?.description;
 	const kind = panel?.spec?.plugin?.kind?.replace(/^signoz\//, '') ?? 'unknown';
@@ -65,17 +48,7 @@ function Panel({
 					</Typography.Text>
 					<Badge className={styles.badge}>{kind}</Badge>
 				</div>
-				{currentLayoutIndex !== undefined && (onMovePanel || onDeletePanel) ? (
-					<PanelActionsMenu
-						panelId={panelId}
-						currentLayoutIndex={currentLayoutIndex}
-						sections={sections ?? []}
-						onMovePanel={onMovePanel}
-						onDeletePanel={onDeletePanel}
-					/>
-				) : (
-					<EllipsisVertical size={14} />
-				)}
+				<EllipsisVertical size={14} />
 			</div>
 
 			<div className={styles.body}>

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelActionsMenu/PanelActionsMenu.module.scss

@@ -1,16 +0,0 @@
-.trigger {
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-	padding: 2px;
-	background: transparent;
-	border: none;
-	border-radius: 2px;
-	color: var(--bg-vanilla-400, #8993ae);
-	cursor: pointer;
-
-	&:hover {
-		color: var(--bg-vanilla-100, #fff);
-		background: var(--bg-slate-400, #1d212d);
-	}
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelActionsMenu/PanelActionsMenu.tsx

@@ -1,95 +0,0 @@
-import { useMemo } from 'react';
-import { EllipsisVertical, FolderInput, Trash2 } from '@signozhq/icons';
-import { DropdownMenuSimple } from '@signozhq/ui/dropdown-menu';
-import type { MenuItem } from '@signozhq/ui/dropdown-menu';
-
-import type { DashboardSection } from '../../../utils';
-import type { DeletePanelArgs } from '../hooks/useDeletePanel';
-import type { MovePanelArgs } from '../hooks/useMovePanelToSection';
-import styles from './PanelActionsMenu.module.scss';
-
-interface Props {
-	panelId: string;
-	currentLayoutIndex: number;
-	sections: DashboardSection[];
-	onMovePanel?: (args: MovePanelArgs) => void;
-	onDeletePanel?: (args: DeletePanelArgs) => void;
-}
-
-function PanelActionsMenu({
-	panelId,
-	currentLayoutIndex,
-	sections,
-	onMovePanel,
-	onDeletePanel,
-}: Props): JSX.Element {
-	const items = useMemo<MenuItem[]>(() => {
-		const result: MenuItem[] = [];
-
-		if (onMovePanel) {
-			const targets = sections.filter(
-				(s) => s.title && s.layoutIndex !== currentLayoutIndex,
-			);
-			if (targets.length === 0) {
-				result.push({
-					key: 'move',
-					label: 'Move to section',
-					icon: <FolderInput size={14} />,
-					disabled: true,
-				});
-			} else {
-				result.push({
-					key: 'move',
-					label: 'Move to section',
-					icon: <FolderInput size={14} />,
-					children: targets.map((s) => ({
-						key: `move-${s.layoutIndex}`,
-						label: s.title,
-						onClick: (): void =>
-							onMovePanel({
-								panelId,
-								fromLayoutIndex: currentLayoutIndex,
-								toLayoutIndex: s.layoutIndex,
-							}),
-					})),
-				});
-			}
-		}
-
-		if (onDeletePanel) {
-			if (result.length > 0) {
-				result.push({ type: 'divider' });
-			}
-			result.push({
-				key: 'delete-panel',
-				danger: true,
-				icon: <Trash2 size={14} />,
-				label: 'Delete panel',
-				onClick: (): void =>
-					onDeletePanel({ panelId, layoutIndex: currentLayoutIndex }),
-			});
-		}
-
-		return result;
-	}, [sections, currentLayoutIndex, panelId, onMovePanel, onDeletePanel]);
-
-	return (
-		<DropdownMenuSimple menu={{ items }}>
-			<button
-				type="button"
-				className={styles.trigger}
-				aria-label="Panel actions"
-				data-testid={`panel-actions-${panelId}`}
-				// Stop pointer/mouse down from reaching the RGL drag handle this
-				// button lives inside, so opening the menu never starts a panel drag.
-				onPointerDown={(e): void => e.stopPropagation()}
-				onMouseDown={(e): void => e.stopPropagation()}
-				onClick={(e): void => e.stopPropagation()}
-			>
-				<EllipsisVertical size={14} />
-			</button>
-		</DropdownMenuSimple>
-	);
-}
-
-export default PanelActionsMenu;

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelTypeSelectionModal/PanelTypeSelectionModal.module.scss

@@ -1,22 +0,0 @@
-.grid {
-	display: grid;
-	grid-template-columns: repeat(2, 1fr);
-	gap: 8px;
-}
-
-.typeButton {
-	display: flex;
-	align-items: center;
-	gap: 8px;
-	padding: 12px;
-	background: var(--bg-ink-400, #0b0c0e);
-	border: 1px solid var(--bg-slate-400, #1d212d);
-	border-radius: 4px;
-	color: var(--bg-vanilla-100, #fff);
-	cursor: pointer;
-	text-align: left;
-
-	&:hover {
-		border-color: var(--bg-robin-500);
-	}
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/PanelTypeSelectionModal/PanelTypeSelectionModal.tsx

@@ -1,82 +0,0 @@
-import { Modal } from 'antd';
-import {
-	BarChart,
-	ChartLine,
-	ChartPie,
-	Hash,
-	List,
-	Table,
-} from '@signozhq/icons';
-
-import styles from './PanelTypeSelectionModal.module.scss';
-
-interface PanelType {
-	pluginKind: string;
-	label: string;
-	icon: JSX.Element;
-}
-
-const PANEL_TYPES: PanelType[] = [
-	{
-		pluginKind: 'signoz/TimeSeriesPanel',
-		label: 'Time Series',
-		icon: <ChartLine size={16} />,
-	},
-	{ pluginKind: 'signoz/NumberPanel', label: 'Value', icon: <Hash size={16} /> },
-	{ pluginKind: 'signoz/TablePanel', label: 'Table', icon: <Table size={16} /> },
-	{
-		pluginKind: 'signoz/BarChartPanel',
-		label: 'Bar Chart',
-		icon: <BarChart size={16} />,
-	},
-	{
-		pluginKind: 'signoz/PieChartPanel',
-		label: 'Pie Chart',
-		icon: <ChartPie size={16} />,
-	},
-	{
-		pluginKind: 'signoz/HistogramPanel',
-		label: 'Histogram',
-		icon: <BarChart size={16} />,
-	},
-	{ pluginKind: 'signoz/ListPanel', label: 'List', icon: <List size={16} /> },
-];
-
-interface Props {
-	open: boolean;
-	onClose: () => void;
-	onSelect: (pluginKind: string) => void;
-}
-
-function PanelTypeSelectionModal({
-	open,
-	onClose,
-	onSelect,
-}: Props): JSX.Element {
-	return (
-		<Modal
-			open={open}
-			title="Select a panel type"
-			onCancel={onClose}
-			footer={null}
-			destroyOnClose
-		>
-			<div className={styles.grid}>
-				{PANEL_TYPES.map((type) => (
-					<button
-						key={type.pluginKind}
-						type="button"
-						className={styles.typeButton}
-						data-testid={`panel-type-${type.pluginKind}`}
-						onClick={(): void => onSelect(type.pluginKind)}
-					>
-						{type.icon}
-						{type.label}
-					</button>
-				))}
-			</div>
-		</Modal>
-	);
-}
-
-export default PanelTypeSelectionModal;

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/hooks/useAddPanelToSection.ts

@@ -1,76 +0,0 @@
-import { useCallback } from 'react';
-import { v4 as uuid } from 'uuid';
-
-import { patchDashboardV2 } from 'api/generated/services/dashboard';
-import { useErrorModal } from 'providers/ErrorModalProvider';
-import APIError from 'types/api/error';
-
-import {
-	addPanelToSectionOps,
-	createDefaultPanel,
-	panelRef,
-} from '../../../patchOps';
-import { useDashboardStore } from '../../../store/useDashboardStore';
-import type { DashboardSection } from '../../../utils';
-
-interface Params {
-	sections: DashboardSection[];
-}
-
-export interface AddPanelArgs {
-	layoutIndex: number;
-	pluginKind: string;
-}
-
-/**
- * Creates a new panel and places its item ref at the bottom of the target
- * section, as one atomic patch. Structure-only: the panel is a valid minimal
- * placeholder (its query is filled in once the panel editor lands).
- */
-export function useAddPanelToSection({
-	sections,
-}: Params): (args: AddPanelArgs) => Promise<void> {
-	const dashboardId = useDashboardStore((s) => s.dashboardId);
-	const refetch = useDashboardStore((s) => s.refetch);
-	const { showErrorModal } = useErrorModal();
-
-	return useCallback(
-		async ({ layoutIndex, pluginKind }: AddPanelArgs): Promise<void> => {
-			if (!dashboardId) {
-				return;
-			}
-			const target = sections.find((s) => s.layoutIndex === layoutIndex);
-			if (!target) {
-				return;
-			}
-
-			const panelId = uuid();
-			const nextY = target.items.reduce(
-				(max, i) => Math.max(max, i.y + i.height),
-				0,
-			);
-
-			try {
-				await patchDashboardV2(
-					{ id: dashboardId },
-					addPanelToSectionOps({
-						panelId,
-						panel: createDefaultPanel(pluginKind),
-						layoutIndex,
-						item: {
-							x: 0,
-							y: nextY,
-							width: 6,
-							height: 6,
-							content: { $ref: panelRef(panelId) },
-						},
-					}),
-				);
-				refetch();
-			} catch (error) {
-				showErrorModal(error as APIError);
-			}
-		},
-		[sections, dashboardId, refetch, showErrorModal],
-	);
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/hooks/useDeletePanel.ts

@@ -1,54 +0,0 @@
-import { useCallback } from 'react';
-
-import { patchDashboardV2 } from 'api/generated/services/dashboard';
-import { useErrorModal } from 'providers/ErrorModalProvider';
-import APIError from 'types/api/error';
-
-import { removePanelOp, replaceSectionItemsOp } from '../../../patchOps';
-import { useDashboardStore } from '../../../store/useDashboardStore';
-import type { DashboardSection } from '../../../utils';
-
-interface Params {
-	sections: DashboardSection[];
-}
-
-export interface DeletePanelArgs {
-	panelId: string;
-	layoutIndex: number;
-}
-
-/**
- * Removes a panel: drops its item ref from the section's items and deletes the
- * panel from `spec.panels`, as one atomic patch.
- */
-export function useDeletePanel({
-	sections,
-}: Params): (args: DeletePanelArgs) => Promise<void> {
-	const dashboardId = useDashboardStore((s) => s.dashboardId);
-	const refetch = useDashboardStore((s) => s.refetch);
-	const { showErrorModal } = useErrorModal();
-
-	return useCallback(
-		async ({ panelId, layoutIndex }: DeletePanelArgs): Promise<void> => {
-			if (!dashboardId) {
-				return;
-			}
-			const section = sections.find((s) => s.layoutIndex === layoutIndex);
-			if (!section) {
-				return;
-			}
-
-			const nextItems = section.items.filter((i) => i.id !== panelId);
-			try {
-				await patchDashboardV2({ id: dashboardId }, [
-					replaceSectionItemsOp(layoutIndex, nextItems),
-					removePanelOp(panelId),
-				]);
-				refetch();
-			} catch (error) {
-				showErrorModal(error as APIError);
-			}
-		},
-		[sections, dashboardId, refetch, showErrorModal],
-	);
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Panel/hooks/useMovePanelToSection.ts

@@ -1,79 +0,0 @@
-import { useCallback } from 'react';
-
-import { patchDashboardV2 } from 'api/generated/services/dashboard';
-import { useErrorModal } from 'providers/ErrorModalProvider';
-import APIError from 'types/api/error';
-
-import { movePanelBetweenSectionsOps } from '../../../patchOps';
-import { useDashboardStore } from '../../../store/useDashboardStore';
-import type { DashboardSection } from '../../../utils';
-
-export interface MovePanelArgs {
-	panelId: string;
-	fromLayoutIndex: number;
-	toLayoutIndex: number;
-}
-
-interface Params {
-	sections: DashboardSection[];
-}
-
-/**
- * Relocates a panel's item ref from one section to another. The panel itself
- * stays in `spec.panels`; only the grid item moves, dropped into a free row at
- * the bottom of the target section. Persisted as one atomic patch.
- */
-export function useMovePanelToSection({
-	sections,
-}: Params): (args: MovePanelArgs) => Promise<void> {
-	const dashboardId = useDashboardStore((s) => s.dashboardId);
-	const refetch = useDashboardStore((s) => s.refetch);
-	const { showErrorModal } = useErrorModal();
-
-	return useCallback(
-		async ({
-			panelId,
-			fromLayoutIndex,
-			toLayoutIndex,
-		}: MovePanelArgs): Promise<void> => {
-			if (!dashboardId || fromLayoutIndex === toLayoutIndex) {
-				return;
-			}
-
-			const source = sections.find((s) => s.layoutIndex === fromLayoutIndex);
-			const target = sections.find((s) => s.layoutIndex === toLayoutIndex);
-			if (!source || !target) {
-				return;
-			}
-
-			const moved = source.items.find((i) => i.id === panelId);
-			if (!moved) {
-				return;
-			}
-
-			const sourceItems = source.items.filter((i) => i.id !== panelId);
-			// Place at a fresh row at the bottom of the target section.
-			const nextY = target.items.reduce(
-				(max, i) => Math.max(max, i.y + i.height),
-				0,
-			);
-			const targetItems = [...target.items, { ...moved, x: 0, y: nextY }];
-
-			try {
-				await patchDashboardV2(
-					{ id: dashboardId },
-					movePanelBetweenSectionsOps({
-						sourceIndex: fromLayoutIndex,
-						sourceItems,
-						targetIndex: toLayoutIndex,
-						targetItems,
-					}),
-				);
-				refetch();
-			} catch (error) {
-				showErrorModal(error as APIError);
-			}
-		},
-		[sections, dashboardId, refetch, showErrorModal],
-	);
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/AddSectionControl/AddSectionControl.module.scss

@@ -1,17 +0,0 @@
-.addButton {
-	display: inline-flex;
-	align-items: center;
-	gap: 6px;
-	margin-top: 8px;
-	padding: 8px 12px;
-	background: transparent;
-	border: 1px dashed var(--bg-slate-400, #1d212d);
-	border-radius: 4px;
-	color: var(--bg-vanilla-400, #8993ae);
-	cursor: pointer;
-
-	&:hover {
-		border-color: var(--bg-robin-500);
-		color: var(--bg-vanilla-100, #fff);
-	}
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/AddSectionControl/AddSectionControl.tsx

@@ -1,67 +0,0 @@
-import { useState } from 'react';
-import { Plus } from '@signozhq/icons';
-import type { DashboardtypesLayoutDTO } from 'api/generated/services/sigNoz.schemas';
-
-import type { DashboardSection } from '../../../utils';
-import { useAddSection } from '../hooks/useAddSection';
-import { useFirstSectionMigration } from '../hooks/useFirstSectionMigration';
-import FirstSectionMigrationModal from '../FirstSectionMigrationModal';
-import styles from './AddSectionControl.module.scss';
-
-const DEFAULT_SECTION_TITLE = 'New section';
-
-interface Props {
-	sections: DashboardSection[];
-	layouts: DashboardtypesLayoutDTO[] | undefined | null;
-	isSectioned: boolean;
-}
-
-function AddSectionControl({
-	sections,
-	layouts,
-	isSectioned,
-}: Props): JSX.Element {
-	const [isMigrationOpen, setIsMigrationOpen] = useState(false);
-	const { addSection } = useAddSection({ layouts });
-	const { migrate, isSaving } = useFirstSectionMigration({ sections });
-
-	// Free-flowing dashboard with existing panels → must migrate before sections
-	// can coexist (every panel must belong to a section once any exists).
-	const needsMigration =
-		!isSectioned && sections.some((s) => s.items.length > 0);
-
-	const handleClick = (): void => {
-		if (needsMigration) {
-			setIsMigrationOpen(true);
-			return;
-		}
-		void addSection(DEFAULT_SECTION_TITLE);
-	};
-
-	const handleConfirmMigration = async (): Promise<void> => {
-		await migrate(DEFAULT_SECTION_TITLE);
-		setIsMigrationOpen(false);
-	};
-
-	return (
-		<>
-			<button
-				type="button"
-				className={styles.addButton}
-				onClick={handleClick}
-				data-testid="add-section"
-			>
-				<Plus size={14} />
-				Add section
-			</button>
-			<FirstSectionMigrationModal
-				open={isMigrationOpen}
-				isSaving={isSaving}
-				onClose={(): void => setIsMigrationOpen(false)}
-				onConfirm={handleConfirmMigration}
-			/>
-		</>
-	);
-}
-
-export default AddSectionControl;

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/FirstSectionMigrationModal.tsx

@@ -1,41 +0,0 @@
-import { Modal } from 'antd';
-import { Typography } from '@signozhq/ui/typography';
-
-interface Props {
-	open: boolean;
-	isSaving: boolean;
-	onClose: () => void;
-	onConfirm: () => void;
-}
-
-/**
- * Shown when the user adds the first section to a free-flowing dashboard that
- * already has panels. Confirms grouping the existing panels into a section
- * before proceeding.
- */
-function FirstSectionMigrationModal({
-	open,
-	isSaving,
-	onClose,
-	onConfirm,
-}: Props): JSX.Element {
-	return (
-		<Modal
-			open={open}
-			title="Group panels into sections?"
-			onCancel={onClose}
-			onOk={onConfirm}
-			okText="Continue"
-			okButtonProps={{ disabled: isSaving, 'data-testid': 'confirm-migration' }}
-			destroyOnClose
-		>
-			<Typography.Text>
-				This dashboard&apos;s panels are currently free-flowing. Adding a section
-				will move the existing panels into their own section, and a new empty
-				section will be added below. You can rename sections afterwards.
-			</Typography.Text>
-		</Modal>
-	);
-}
-
-export default FirstSectionMigrationModal;

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/RenameSectionModal.tsx

@@ -1,64 +0,0 @@
-import { useEffect, useState } from 'react';
-import { Modal } from 'antd';
-import { Input } from '@signozhq/ui/input';
-
-interface Props {
-	open: boolean;
-	initialValue: string;
-	isSaving: boolean;
-	onClose: () => void;
-	onSubmit: (title: string) => void;
-}
-
-function RenameSectionModal({
-	open,
-	initialValue,
-	isSaving,
-	onClose,
-	onSubmit,
-}: Props): JSX.Element {
-	const [value, setValue] = useState<string>(initialValue);
-
-	// Reseed the field each time the modal opens.
-	useEffect(() => {
-		if (open) {
-			setValue(initialValue);
-		}
-	}, [open, initialValue]);
-
-	const submit = (): void => {
-		const trimmed = value.trim();
-		if (trimmed) {
-			onSubmit(trimmed);
-		}
-	};
-
-	return (
-		<Modal
-			open={open}
-			title="Rename section"
-			onCancel={onClose}
-			onOk={submit}
-			okText="Rename"
-			okButtonProps={{ disabled: isSaving || !value.trim() }}
-			destroyOnClose
-		>
-			<Input
-				testId="rename-section-input"
-				autoFocus
-				value={value}
-				maxLength={120}
-				placeholder="Section name"
-				onChange={(e): void => setValue(e.target.value)}
-				onKeyDown={(e): void => {
-					if (e.key === 'Enter') {
-						e.preventDefault();
-						submit();
-					}
-				}}
-			/>
-		</Modal>
-	);
-}
-
-export default RenameSectionModal;

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/Section/Section.tsx

@@ -1,45 +1,17 @@
 import { useRef, useState } from 'react';
-import { Modal } from 'antd';
 
 import { useIntersectionObserver } from 'hooks/useIntersectionObserver';
 
 import type { DashboardSection } from '../../../utils';
-import type { AddPanelArgs } from '../../Panel/hooks/useAddPanelToSection';
-import type { DeletePanelArgs } from '../../Panel/hooks/useDeletePanel';
-import type { MovePanelArgs } from '../../Panel/hooks/useMovePanelToSection';
-import PanelTypeSelectionModal from '../../Panel/PanelTypeSelectionModal/PanelTypeSelectionModal';
-import { useDashboardStore } from '../../../store/useDashboardStore';
-import { useDeleteSection } from '../hooks/useDeleteSection';
-import { useRenameSection } from '../hooks/useRenameSection';
-import { useToggleSectionCollapse } from '../hooks/useToggleSectionCollapse';
-import RenameSectionModal from '../RenameSectionModal';
 import SectionGrid from '../SectionGrid/SectionGrid';
-import SectionHeader, {
-	type SectionDragHandle,
-} from '../SectionHeader/SectionHeader';
+import SectionHeader from '../SectionHeader/SectionHeader';
 import styles from './Section.module.scss';
 
 interface Props {
 	section: DashboardSection;
-	/** Adds a panel to this section; present only in editable sectioned mode. */
-	onAddPanel?: (args: AddPanelArgs) => void;
-	/** All sections + per-panel handlers, for the panel "Move to section" / delete actions. */
-	sections?: DashboardSection[];
-	onMovePanel?: (args: MovePanelArgs) => void;
-	onDeletePanel?: (args: DeletePanelArgs) => void;
-	/** Provided by SortableSection in sectioned mode; absent for untitled/free-flow. */
-	dragHandle?: SectionDragHandle;
 }
 
-function Section({
-	section,
-	onAddPanel,
-	sections,
-	onMovePanel,
-	onDeletePanel,
-	dragHandle,
-}: Props): JSX.Element {
-	const isEditable = useDashboardStore((s) => s.isEditable);
+function Section({ section }: Props): JSX.Element {
 	const containerRef = useRef<HTMLDivElement>(null);
 	// Placeholder signal for lazy panel query-loading (consumed in a later PR):
 	// true once the section scrolls into (or near) the viewport.
@@ -47,48 +19,10 @@ function Section({
 		rootMargin: '200px',
 	});
 
-	const { open, toggle } = useToggleSectionCollapse({ sectionId: section.id });
+	const [open, setOpen] = useState<boolean>(section.open);
+	const toggle = (): void => setOpen((prev) => !prev);
 
-	const [isRenaming, setIsRenaming] = useState(false);
-	const { rename, isSaving } = useRenameSection({
-		layoutIndex: section.layoutIndex,
-	});
-
-	const handleRenameSubmit = async (title: string): Promise<void> => {
-		const ok = await rename(title);
-		if (ok) {
-			setIsRenaming(false);
-		}
-	};
-
-	const [isAddingPanel, setIsAddingPanel] = useState(false);
-	const handleSelectPanelType = (pluginKind: string): void => {
-		onAddPanel?.({ layoutIndex: section.layoutIndex, pluginKind });
-		setIsAddingPanel(false);
-	};
-
-	const { deleteSection } = useDeleteSection({ section });
-	const confirmDeleteSection = (): void => {
-		Modal.confirm({
-			title: `Delete section "${section.title ?? ''}"?`,
-			content: 'Panels in this section will be removed.',
-			okText: 'Delete',
-			okButtonProps: { danger: true },
-			centered: true,
-			onOk: () => deleteSection(),
-		});
-	};
-
-	const grid = (
-		<SectionGrid
-			items={section.items}
-			layoutIndex={section.layoutIndex}
-			isVisible={isVisible}
-			sections={sections}
-			onMovePanel={onMovePanel}
-			onDeletePanel={onDeletePanel}
-		/>
-	);
+	const grid = <SectionGrid items={section.items} isVisible={isVisible} />;
 
 	if (!section.title) {
 		// Untitled section — just the grid (no header chrome), but still observed
@@ -117,26 +51,8 @@ function Section({
 				open={open}
 				onToggle={toggle}
 				repeatVariable={section.repeatVariable}
-				dragHandle={dragHandle}
-				onRename={isEditable ? (): void => setIsRenaming(true) : undefined}
-				onAddPanel={
-					isEditable && onAddPanel ? (): void => setIsAddingPanel(true) : undefined
-				}
-				onDeleteSection={isEditable ? confirmDeleteSection : undefined}
 			/>
 			{open ? grid : null}
-			<RenameSectionModal
-				open={isRenaming}
-				initialValue={section.title}
-				isSaving={isSaving}
-				onClose={(): void => setIsRenaming(false)}
-				onSubmit={handleRenameSubmit}
-			/>
-			<PanelTypeSelectionModal
-				open={isAddingPanel}
-				onClose={(): void => setIsAddingPanel(false)}
-				onSelect={handleSelectPanelType}
-			/>
 		</div>
 	);
 }

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/SectionActionsMenu/SectionActionsMenu.module.scss

@@ -1,16 +0,0 @@
-.trigger {
-	display: inline-flex;
-	align-items: center;
-	justify-content: center;
-	padding: 2px;
-	background: transparent;
-	border: none;
-	border-radius: 2px;
-	color: var(--bg-vanilla-400, #8993ae);
-	cursor: pointer;
-
-	&:hover {
-		color: var(--bg-vanilla-100, #fff);
-		background: var(--bg-slate-400, #1d212d);
-	}
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/SectionActionsMenu/SectionActionsMenu.tsx

@@ -1,68 +0,0 @@
-import { useMemo } from 'react';
-import { EllipsisVertical, PenLine, Plus, Trash2 } from '@signozhq/icons';
-import { DropdownMenuSimple } from '@signozhq/ui/dropdown-menu';
-import type { MenuItem } from '@signozhq/ui/dropdown-menu';
-
-import styles from './SectionActionsMenu.module.scss';
-
-interface Props {
-	sectionId: string;
-	onAddPanel?: () => void;
-	onRename?: () => void;
-	onDeleteSection?: () => void;
-}
-
-function SectionActionsMenu({
-	sectionId,
-	onAddPanel,
-	onRename,
-	onDeleteSection,
-}: Props): JSX.Element {
-	const items = useMemo<MenuItem[]>(() => {
-		const result: MenuItem[] = [];
-		if (onAddPanel) {
-			result.push({
-				key: 'add-panel',
-				icon: <Plus size={14} />,
-				label: 'Add panel',
-				onClick: onAddPanel,
-			});
-		}
-		if (onRename) {
-			result.push({
-				key: 'rename',
-				icon: <PenLine size={14} />,
-				label: 'Rename section',
-				onClick: onRename,
-			});
-		}
-		if (onDeleteSection) {
-			result.push(
-				{ type: 'divider' },
-				{
-					key: 'delete-section',
-					danger: true,
-					icon: <Trash2 size={14} />,
-					label: 'Delete section',
-					onClick: onDeleteSection,
-				},
-			);
-		}
-		return result;
-	}, [onAddPanel, onRename, onDeleteSection]);
-
-	return (
-		<DropdownMenuSimple menu={{ items }}>
-			<button
-				type="button"
-				className={styles.trigger}
-				aria-label="Section actions"
-				data-testid={`dashboard-section-actions-${sectionId}`}
-			>
-				<EllipsisVertical size={14} />
-			</button>
-		</DropdownMenuSimple>
-	);
-}
-
-export default SectionActionsMenu;

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/SectionDragPreview/SectionDragPreview.module.scss

@@ -1,7 +0,0 @@
-.preview {
-	border: 1px solid var(--bg-robin-500);
-	border-radius: 4px;
-	background: var(--bg-ink-400, #0b0c0e);
-	box-shadow: 0 8px 24px rgb(0 0 0 / 40%);
-	cursor: grabbing;
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/SectionDragPreview/SectionDragPreview.tsx

@@ -1,32 +0,0 @@
-import type { DashboardSection } from '../../../utils';
-import SectionHeader from '../SectionHeader/SectionHeader';
-import styles from './SectionDragPreview.module.scss';
-
-interface Props {
-	section: DashboardSection;
-}
-
-/**
- * Lightweight preview rendered inside the DragOverlay while a section is being
- * dragged. Deliberately header-only (no react-grid-layout) so the overlay is
- * cheap and never triggers RGL width re-measurement.
- */
-function SectionDragPreview({ section }: Props): JSX.Element {
-	const panelCount = section.items.length;
-	const title = `${section.title ?? ''} · ${panelCount} ${
-		panelCount === 1 ? 'panel' : 'panels'
-	}`;
-
-	return (
-		<div className={styles.preview}>
-			<SectionHeader
-				sectionId={`${section.id}-preview`}
-				title={title}
-				open={false}
-				onToggle={(): void => undefined}
-			/>
-		</div>
-	);
-}
-
-export default SectionDragPreview;

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/SectionGrid/SectionGrid.tsx

@@ -2,35 +2,18 @@ import { useMemo } from 'react';
 import GridLayout, { WidthProvider, type Layout } from 'react-grid-layout';
 
 import type { DashboardSection } from '../../../utils';
-import type { DeletePanelArgs } from '../../Panel/hooks/useDeletePanel';
-import type { MovePanelArgs } from '../../Panel/hooks/useMovePanelToSection';
 import Panel from '../../Panel/Panel';
-import { useDashboardStore } from '../../../store/useDashboardStore';
-import { usePersistLayout } from '../hooks/usePersistLayout';
 import styles from './SectionGrid.module.scss';
 
 const ResponsiveGridLayout = WidthProvider(GridLayout);
 
 interface Props {
 	items: DashboardSection['items'];
-	layoutIndex: number;
 	/** Forwarded to panels — true when the parent section is in the viewport. */
 	isVisible?: boolean;
-	/** All sections + handlers — present only in editable sectioned mode (panel "Move to section" / delete). */
-	sections?: DashboardSection[];
-	onMovePanel?: (args: MovePanelArgs) => void;
-	onDeletePanel?: (args: DeletePanelArgs) => void;
 }
 
-function SectionGrid({
-	items,
-	layoutIndex,
-	isVisible,
-	sections,
-	onMovePanel,
-	onDeletePanel,
-}: Props): JSX.Element {
-	const isEditable = useDashboardStore((s) => s.isEditable);
+function SectionGrid({ items, isVisible }: Props): JSX.Element {
 	const rglLayout = useMemo<Layout[]>(
 		() =>
 			items.map((item) => ({
@@ -43,8 +26,6 @@ function SectionGrid({
 		[items],
 	);
 
-	const { handleLayoutChange } = usePersistLayout({ layoutIndex, items });
-
 	return (
 		<ResponsiveGridLayout
 			className={styles.grid}
@@ -53,24 +34,13 @@ function SectionGrid({
 			autoSize
 			useCSSTransforms
 			layout={rglLayout}
-			draggableHandle=".panel-drag-handle"
-			isDraggable={isEditable}
-			isResizable={isEditable}
-			onDragStop={handleLayoutChange}
-			onResizeStop={handleLayoutChange}
+			isDraggable={false}
+			isResizable={false}
 			margin={[8, 8]}
 		>
 			{items.map((item) => (
 				<div key={item.id}>
-					<Panel
-						panel={item.panel}
-						panelId={item.id}
-						isVisible={isVisible}
-						currentLayoutIndex={layoutIndex}
-						sections={isEditable ? sections : undefined}
-						onMovePanel={isEditable ? onMovePanel : undefined}
-						onDeletePanel={isEditable ? onDeletePanel : undefined}
-					/>
+					<Panel panel={item.panel} panelId={item.id} isVisible={isVisible} />
 				</div>
 			))}
 		</ResponsiveGridLayout>

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/SectionHeader/SectionHeader.tsx

@@ -1,29 +1,15 @@
-import type { DraggableAttributes } from '@dnd-kit/core';
-import type { SyntheticListenerMap } from '@dnd-kit/core/dist/hooks/utilities';
-import { ChevronDown, ChevronRight, GripVertical } from '@signozhq/icons';
+import { ChevronDown, ChevronRight } from '@signozhq/icons';
 import { Typography } from '@signozhq/ui/typography';
 import cx from 'classnames';
 
-import SectionActionsMenu from '../SectionActionsMenu/SectionActionsMenu';
 import styles from './SectionHeader.module.scss';
 
-export interface SectionDragHandle {
-	attributes: DraggableAttributes;
-	listeners: SyntheticListenerMap | undefined;
-	setActivatorNodeRef: (element: HTMLElement | null) => void;
-}
-
 interface Props {
 	sectionId: string;
 	title: string;
 	open: boolean;
 	onToggle: () => void;
 	repeatVariable?: string;
-	/** Provided by SortableSection in sectioned mode; absent for untitled/free-flow. */
-	dragHandle?: SectionDragHandle;
-	onRename?: () => void;
-	onAddPanel?: () => void;
-	onDeleteSection?: () => void;
 }
 
 function SectionHeader({
@@ -32,27 +18,9 @@ function SectionHeader({
 	open,
 	onToggle,
 	repeatVariable,
-	dragHandle,
-	onRename,
-	onAddPanel,
-	onDeleteSection,
 }: Props): JSX.Element {
-	const hasActions = !!(onAddPanel || onRename || onDeleteSection);
 	return (
 		<div className={cx(styles.header, { [styles.headerOpen]: open })}>
-			{dragHandle ? (
-				<button
-					type="button"
-					className={styles.dragHandle}
-					ref={dragHandle.setActivatorNodeRef}
-					aria-label="Drag to reorder section"
-					data-testid={`dashboard-section-drag-${sectionId}`}
-					{...dragHandle.attributes}
-					{...dragHandle.listeners}
-				>
-					<GripVertical size={14} />
-				</button>
-			) : null}
 			<button
 				type="button"
 				className={styles.toggle}
@@ -67,14 +35,6 @@ function SectionHeader({
 					</Typography.Text>
 				) : null}
 			</button>
-			{hasActions ? (
-				<SectionActionsMenu
-					sectionId={sectionId}
-					onAddPanel={onAddPanel}
-					onRename={onRename}
-					onDeleteSection={onDeleteSection}
-				/>
-			) : null}
 		</div>
 	);
 }

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/SectionList.tsx

@@ -1,102 +0,0 @@
-import { useMemo } from 'react';
-import { closestCenter, DndContext, DragOverlay } from '@dnd-kit/core';
-import {
-	restrictToParentElement,
-	restrictToVerticalAxis,
-} from '@dnd-kit/modifiers';
-import {
-	SortableContext,
-	verticalListSortingStrategy,
-} from '@dnd-kit/sortable';
-import type { DashboardtypesLayoutDTO } from 'api/generated/services/sigNoz.schemas';
-
-import type { DashboardSection } from '../../utils';
-import { useAddPanelToSection } from '../Panel/hooks/useAddPanelToSection';
-import { useDeletePanel } from '../Panel/hooks/useDeletePanel';
-import { useMovePanelToSection } from '../Panel/hooks/useMovePanelToSection';
-import { useDashboardStore } from '../../store/useDashboardStore';
-import { useSectionDragReorder } from './hooks/useSectionDragReorder';
-import Section from './Section/Section';
-import SectionDragPreview from './SectionDragPreview/SectionDragPreview';
-import SortableSection from './SortableSection';
-
-interface Props {
-	sections: DashboardSection[];
-	layouts: DashboardtypesLayoutDTO[] | undefined | null;
-}
-
-function SectionList({ sections, layouts }: Props): JSX.Element {
-	const isEditable = useDashboardStore((s) => s.isEditable);
-
-	const {
-		sensors,
-		orderedSections,
-		activeSection,
-		onDragStart,
-		onDragEnd,
-		onDragCancel,
-	} = useSectionDragReorder({ sections, layouts });
-
-	const onAddPanel = useAddPanelToSection({ sections });
-	const onMovePanel = useMovePanelToSection({ sections });
-	const onDeletePanel = useDeletePanel({ sections });
-
-	// Only titled sections participate in reordering; untitled (free-flow)
-	// blocks render in place without a drag handle.
-	const sortableIds = useMemo(
-		() => orderedSections.filter((s) => s.title).map((s) => s.id),
-		[orderedSections],
-	);
-
-	if (!isEditable) {
-		return (
-			<>
-				{sections.map((section) => (
-					<Section key={section.id} section={section} />
-				))}
-			</>
-		);
-	}
-
-	return (
-		<DndContext
-			sensors={sensors}
-			collisionDetection={closestCenter}
-			modifiers={[restrictToVerticalAxis, restrictToParentElement]}
-			onDragStart={onDragStart}
-			onDragEnd={onDragEnd}
-			onDragCancel={onDragCancel}
-		>
-			<SortableContext items={sortableIds} strategy={verticalListSortingStrategy}>
-				{orderedSections.map((section) =>
-					section.title ? (
-						<SortableSection
-							key={section.id}
-							section={section}
-							sections={sections}
-							onAddPanel={onAddPanel}
-							onMovePanel={onMovePanel}
-							onDeletePanel={onDeletePanel}
-						/>
-					) : (
-						<Section
-							key={section.id}
-							section={section}
-							sections={sections}
-							onAddPanel={onAddPanel}
-							onMovePanel={onMovePanel}
-							onDeletePanel={onDeletePanel}
-						/>
-					),
-				)}
-			</SortableContext>
-			{/* dropAnimation disabled: optimistic reorder already places the section,
-			    so animating the overlay back would cause a visible snap/shake. */}
-			<DragOverlay dropAnimation={null}>
-				{activeSection ? <SectionDragPreview section={activeSection} /> : null}
-			</DragOverlay>
-		</DndContext>
-	);
-}
-
-export default SectionList;

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/SortableSection.tsx

@@ -1,59 +0,0 @@
-import { useSortable } from '@dnd-kit/sortable';
-import { CSS } from '@dnd-kit/utilities';
-
-import type { DashboardSection } from '../../utils';
-import type { AddPanelArgs } from '../Panel/hooks/useAddPanelToSection';
-import type { DeletePanelArgs } from '../Panel/hooks/useDeletePanel';
-import type { MovePanelArgs } from '../Panel/hooks/useMovePanelToSection';
-import Section from './Section/Section';
-
-interface Props {
-	section: DashboardSection;
-	sections: DashboardSection[];
-	onAddPanel: (args: AddPanelArgs) => void;
-	onMovePanel: (args: MovePanelArgs) => void;
-	onDeletePanel: (args: DeletePanelArgs) => void;
-}
-
-function SortableSection({
-	section,
-	sections,
-	onAddPanel,
-	onMovePanel,
-	onDeletePanel,
-}: Props): JSX.Element {
-	const {
-		attributes,
-		listeners,
-		setNodeRef,
-		setActivatorNodeRef,
-		transform,
-		transition,
-		isDragging,
-	} = useSortable({ id: section.id });
-
-	// dnd-kit drives the drag transform per-frame, so this must be an inline
-	// style — there is no static-stylesheet equivalent for a live transform.
-	// While dragging, the original is hidden (the DragOverlay renders the moving
-	// preview); keeping it in place preserves the gap and lets siblings animate.
-	const style: React.CSSProperties = {
-		transform: CSS.Transform.toString(transform),
-		transition,
-		opacity: isDragging ? 0 : undefined,
-	};
-
-	return (
-		<div ref={setNodeRef} style={style}>
-			<Section
-				section={section}
-				sections={sections}
-				onAddPanel={onAddPanel}
-				onMovePanel={onMovePanel}
-				onDeletePanel={onDeletePanel}
-				dragHandle={{ attributes, listeners, setActivatorNodeRef }}
-			/>
-		</div>
-	);
-}
-
-export default SortableSection;

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/hooks/useAddSection.ts

@@ -1,59 +0,0 @@
-import { useCallback, useState } from 'react';
-
-import { patchDashboardV2 } from 'api/generated/services/dashboard';
-import type { DashboardtypesLayoutDTO } from 'api/generated/services/sigNoz.schemas';
-import { useErrorModal } from 'providers/ErrorModalProvider';
-import APIError from 'types/api/error';
-
-import {
-	addSectionOp,
-	newGridLayout,
-	reorderLayoutsOp,
-} from '../../../patchOps';
-import { useDashboardStore } from '../../../store/useDashboardStore';
-
-interface Params {
-	layouts: DashboardtypesLayoutDTO[] | undefined | null;
-}
-
-interface Result {
-	addSection: (title: string) => Promise<void>;
-	isSaving: boolean;
-}
-
-/**
- * Appends an empty titled section. When the dashboard has no layouts yet, the
- * layouts array is created via a `replace` (an `add` to a missing/empty array
- * pointer is unreliable); otherwise a new Grid is appended.
- */
-export function useAddSection({ layouts }: Params): Result {
-	const dashboardId = useDashboardStore((s) => s.dashboardId);
-	const refetch = useDashboardStore((s) => s.refetch);
-	const [isSaving, setIsSaving] = useState(false);
-	const { showErrorModal } = useErrorModal();
-
-	const addSection = useCallback(
-		async (title: string): Promise<void> => {
-			const trimmed = title.trim();
-			if (!dashboardId || !trimmed) {
-				return;
-			}
-			const op =
-				!layouts || layouts.length === 0
-					? reorderLayoutsOp([newGridLayout(trimmed)])
-					: addSectionOp(trimmed);
-			try {
-				setIsSaving(true);
-				await patchDashboardV2({ id: dashboardId }, [op]);
-				refetch();
-			} catch (error) {
-				showErrorModal(error as APIError);
-			} finally {
-				setIsSaving(false);
-			}
-		},
-		[layouts, dashboardId, refetch, showErrorModal],
-	);
-
-	return { addSection, isSaving };
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/hooks/useDeleteSection.ts

@@ -1,51 +0,0 @@
-import { useCallback, useState } from 'react';
-
-import { patchDashboardV2 } from 'api/generated/services/dashboard';
-import type { DashboardtypesJSONPatchOperationDTO } from 'api/generated/services/sigNoz.schemas';
-import { useErrorModal } from 'providers/ErrorModalProvider';
-import APIError from 'types/api/error';
-
-import { removePanelOp, removeSectionOp } from '../../../patchOps';
-import { useDashboardStore } from '../../../store/useDashboardStore';
-import type { DashboardSection } from '../../../utils';
-
-interface Params {
-	section: DashboardSection;
-}
-
-interface Result {
-	deleteSection: () => Promise<void>;
-	isSaving: boolean;
-}
-
-/**
- * Deletes a section: removes its Grid layout and deletes every panel it
- * contained from `spec.panels` (orphan cleanup), as one atomic patch.
- */
-export function useDeleteSection({ section }: Params): Result {
-	const dashboardId = useDashboardStore((s) => s.dashboardId);
-	const refetch = useDashboardStore((s) => s.refetch);
-	const [isSaving, setIsSaving] = useState(false);
-	const { showErrorModal } = useErrorModal();
-
-	const deleteSection = useCallback(async (): Promise<void> => {
-		if (!dashboardId) {
-			return;
-		}
-		const ops: DashboardtypesJSONPatchOperationDTO[] = section.items.map((i) =>
-			removePanelOp(i.id),
-		);
-		ops.push(removeSectionOp(section.layoutIndex));
-		try {
-			setIsSaving(true);
-			await patchDashboardV2({ id: dashboardId }, ops);
-			refetch();
-		} catch (error) {
-			showErrorModal(error as APIError);
-		} finally {
-			setIsSaving(false);
-		}
-	}, [section, dashboardId, refetch, showErrorModal]);
-
-	return { deleteSection, isSaving };
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/hooks/useFirstSectionMigration.ts

@@ -1,64 +0,0 @@
-import { useCallback, useState } from 'react';
-
-import { patchDashboardV2 } from 'api/generated/services/dashboard';
-import type { DashboardtypesJSONPatchOperationDTO } from 'api/generated/services/sigNoz.schemas';
-import { useErrorModal } from 'providers/ErrorModalProvider';
-import APIError from 'types/api/error';
-
-import { addSectionOp, titleUntitledSectionOp } from '../../../patchOps';
-import { useDashboardStore } from '../../../store/useDashboardStore';
-import type { DashboardSection } from '../../../utils';
-
-interface Params {
-	sections: DashboardSection[];
-}
-
-interface Result {
-	migrate: (newSectionTitle: string) => Promise<void>;
-	isSaving: boolean;
-}
-
-/**
- * Converts a free-flowing dashboard into a sectioned one: every existing
- * untitled layout that holds panels is titled in place ("Section 1", "Section
- * 2", …), then the brand-new section the user asked for is appended — all in one
- * atomic patch. Used once the user confirms the migration prompt.
- */
-export function useFirstSectionMigration({ sections }: Params): Result {
-	const dashboardId = useDashboardStore((s) => s.dashboardId);
-	const refetch = useDashboardStore((s) => s.refetch);
-	const [isSaving, setIsSaving] = useState(false);
-	const { showErrorModal } = useErrorModal();
-
-	const migrate = useCallback(
-		async (newSectionTitle: string): Promise<void> => {
-			const trimmed = newSectionTitle.trim();
-			if (!dashboardId || !trimmed) {
-				return;
-			}
-
-			const ops: DashboardtypesJSONPatchOperationDTO[] = [];
-			let counter = 1;
-			sections.forEach((s) => {
-				if (!s.title && s.items.length > 0) {
-					ops.push(titleUntitledSectionOp(s.layoutIndex, `Section ${counter}`));
-					counter += 1;
-				}
-			});
-			ops.push(addSectionOp(trimmed));
-
-			try {
-				setIsSaving(true);
-				await patchDashboardV2({ id: dashboardId }, ops);
-				refetch();
-			} catch (error) {
-				showErrorModal(error as APIError);
-			} finally {
-				setIsSaving(false);
-			}
-		},
-		[sections, dashboardId, refetch, showErrorModal],
-	);
-
-	return { migrate, isSaving };
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/hooks/usePersistLayout.ts

@@ -1,97 +0,0 @@
-import { useCallback, useState } from 'react';
-import type { Layout } from 'react-grid-layout';
-
-import { patchDashboardV2 } from 'api/generated/services/dashboard';
-import { useErrorModal } from 'providers/ErrorModalProvider';
-import APIError from 'types/api/error';
-
-import { replaceSectionItemsOp } from '../../../patchOps';
-import { useDashboardStore } from '../../../store/useDashboardStore';
-import type { GridItem } from '../../../utils';
-
-interface Params {
-	layoutIndex: number;
-	items: GridItem[];
-}
-
-interface Result {
-	handleLayoutChange: (rglLayout: Layout[]) => void;
-	isSaving: boolean;
-}
-
-/** Maps an RGL layout back onto the section's grid items, preserving panel refs. */
-function mergeRglLayout(rglLayout: Layout[], items: GridItem[]): GridItem[] {
-	const byId = new Map(items.map((item) => [item.id, item]));
-	return rglLayout
-		.map((entry) => {
-			const existing = byId.get(entry.i);
-			if (!existing) {
-				return null;
-			}
-			return {
-				...existing,
-				x: entry.x,
-				y: entry.y,
-				width: entry.w,
-				height: entry.h,
-			};
-		})
-		.filter((item): item is GridItem => item !== null);
-}
-
-function hasGeometryChanged(next: GridItem[], prev: GridItem[]): boolean {
-	if (next.length !== prev.length) {
-		return true;
-	}
-	const prevById = new Map(prev.map((item) => [item.id, item]));
-	return next.some((item) => {
-		const before = prevById.get(item.id);
-		if (!before) {
-			return true;
-		}
-		return (
-			before.x !== item.x ||
-			before.y !== item.y ||
-			before.width !== item.width ||
-			before.height !== item.height
-		);
-	});
-}
-
-/**
- * Persists panel geometry within a single section. Call the returned handler
- * from RGL's `onDragStop`/`onResizeStop` (stop events only — not continuous
- * `onLayoutChange`) to limit network churn.
- */
-export function usePersistLayout({ layoutIndex, items }: Params): Result {
-	const dashboardId = useDashboardStore((s) => s.dashboardId);
-	const refetch = useDashboardStore((s) => s.refetch);
-	const [isSaving, setIsSaving] = useState(false);
-	const { showErrorModal } = useErrorModal();
-
-	const handleLayoutChange = useCallback(
-		async (rglLayout: Layout[]): Promise<void> => {
-			if (!dashboardId) {
-				return;
-			}
-			const nextItems = mergeRglLayout(rglLayout, items);
-			if (!hasGeometryChanged(nextItems, items)) {
-				return;
-			}
-			try {
-				setIsSaving(true);
-				await patchDashboardV2({ id: dashboardId }, [
-					replaceSectionItemsOp(layoutIndex, nextItems),
-				]);
-				refetch();
-			} catch (error) {
-				showErrorModal(error as APIError);
-			} finally {
-				setIsSaving(false);
-			}
-		},
-		[dashboardId, items, layoutIndex, refetch, showErrorModal],
-	);
-
-	return { handleLayoutChange, isSaving };
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/hooks/useRenameSection.ts

@@ -1,50 +0,0 @@
-import { useCallback, useState } from 'react';
-
-import { patchDashboardV2 } from 'api/generated/services/dashboard';
-import { useErrorModal } from 'providers/ErrorModalProvider';
-import APIError from 'types/api/error';
-
-import { renameSectionOp } from '../../../patchOps';
-import { useDashboardStore } from '../../../store/useDashboardStore';
-
-interface Params {
-	layoutIndex: number;
-}
-
-interface Result {
-	rename: (title: string) => Promise<boolean>;
-	isSaving: boolean;
-}
-
-/** Renames a section's title via `replace /spec/layouts/<i>/spec/display/title`. */
-export function useRenameSection({ layoutIndex }: Params): Result {
-	const dashboardId = useDashboardStore((s) => s.dashboardId);
-	const refetch = useDashboardStore((s) => s.refetch);
-	const [isSaving, setIsSaving] = useState(false);
-	const { showErrorModal } = useErrorModal();
-
-	const rename = useCallback(
-		async (title: string): Promise<boolean> => {
-			const trimmed = title.trim();
-			if (!dashboardId || !trimmed) {
-				return false;
-			}
-			try {
-				setIsSaving(true);
-				await patchDashboardV2({ id: dashboardId }, [
-					renameSectionOp(layoutIndex, trimmed),
-				]);
-				refetch();
-				return true;
-			} catch (error) {
-				showErrorModal(error as APIError);
-				return false;
-			} finally {
-				setIsSaving(false);
-			}
-		},
-		[dashboardId, layoutIndex, refetch, showErrorModal],
-	);
-
-	return { rename, isSaving };
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/hooks/useSectionDragReorder.ts

@@ -1,125 +0,0 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
-import {
-	type DragEndEvent,
-	type DragStartEvent,
-	KeyboardSensor,
-	PointerSensor,
-	useSensor,
-	useSensors,
-} from '@dnd-kit/core';
-import { arrayMove, sortableKeyboardCoordinates } from '@dnd-kit/sortable';
-
-import { patchDashboardV2 } from 'api/generated/services/dashboard';
-import type { DashboardtypesLayoutDTO } from 'api/generated/services/sigNoz.schemas';
-import { useErrorModal } from 'providers/ErrorModalProvider';
-import APIError from 'types/api/error';
-
-import { reorderLayoutsOp } from '../../../patchOps';
-import { useDashboardStore } from '../../../store/useDashboardStore';
-import type { DashboardSection } from '../../../utils';
-
-interface Params {
-	sections: DashboardSection[];
-	layouts: DashboardtypesLayoutDTO[] | undefined | null;
-}
-
-interface Result {
-	sensors: ReturnType<typeof useSensors>;
-	/** Display order — optimistically reordered on drop so the UI doesn't wait on refetch. */
-	orderedSections: DashboardSection[];
-	/** The section currently being dragged (for the DragOverlay preview), or null. */
-	activeSection: DashboardSection | null;
-	onDragStart: (event: DragStartEvent) => void;
-	onDragEnd: (event: DragEndEvent) => void;
-	onDragCancel: () => void;
-}
-
-/**
- * Owns section-reorder drag state. Reorders happen optimistically in local
- * state (keyed by stable section id) and persist via a single
- * `replace /spec/layouts` patch; the optimistic order is cleared once fresh
- * server data arrives. Each section maps 1:1 to a Grid layout via `layoutIndex`,
- * so the new layouts array is rebuilt by mapping the reordered sections back.
- */
-export function useSectionDragReorder({ sections, layouts }: Params): Result {
-	const dashboardId = useDashboardStore((s) => s.dashboardId);
-	const refetch = useDashboardStore((s) => s.refetch);
-	const [activeId, setActiveId] = useState<string | null>(null);
-	const [localOrderIds, setLocalOrderIds] = useState<string[] | null>(null);
-	const { showErrorModal } = useErrorModal();
-
-	const sensors = useSensors(
-		useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),
-		useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }),
-	);
-
-	// Server data is the source of truth — drop optimistic order whenever it changes.
-	useEffect(() => {
-		setLocalOrderIds(null);
-	}, [sections]);
-
-	const orderedSections = useMemo<DashboardSection[]>(() => {
-		if (!localOrderIds) {
-			return sections;
-		}
-		const byId = new Map(sections.map((s) => [s.id, s]));
-		const ordered = localOrderIds
-			.map((id) => byId.get(id))
-			.filter((s): s is DashboardSection => s !== undefined);
-		return ordered.length === sections.length ? ordered : sections;
-	}, [sections, localOrderIds]);
-
-	const onDragStart = useCallback((event: DragStartEvent): void => {
-		setActiveId(String(event.active.id));
-	}, []);
-
-	const onDragCancel = useCallback((): void => {
-		setActiveId(null);
-	}, []);
-
-	const onDragEnd = useCallback(
-		async (event: DragEndEvent): Promise<void> => {
-			setActiveId(null);
-			const { active, over } = event;
-			if (!over || active.id === over.id || !dashboardId || !layouts) {
-				return;
-			}
-
-			const oldIndex = orderedSections.findIndex((s) => s.id === active.id);
-			const newIndex = orderedSections.findIndex((s) => s.id === over.id);
-			if (oldIndex < 0 || newIndex < 0) {
-				return;
-			}
-
-			const newOrdered = arrayMove(orderedSections, oldIndex, newIndex);
-			setLocalOrderIds(newOrdered.map((s) => s.id));
-
-			const newLayouts = newOrdered
-				.map((s) => layouts[s.layoutIndex])
-				.filter((l): l is DashboardtypesLayoutDTO => l !== undefined);
-
-			try {
-				await patchDashboardV2({ id: dashboardId }, [reorderLayoutsOp(newLayouts)]);
-				refetch();
-			} catch (error) {
-				setLocalOrderIds(null); // revert optimistic order on failure
-				showErrorModal(error as APIError);
-			}
-		},
-		[orderedSections, layouts, dashboardId, refetch, showErrorModal],
-	);
-
-	const activeSection = useMemo(
-		() => orderedSections.find((s) => s.id === activeId) ?? null,
-		[orderedSections, activeId],
-	);
-
-	return {
-		sensors,
-		orderedSections,
-		activeSection,
-		onDragStart,
-		onDragEnd,
-		onDragCancel,
-	};
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/Section/hooks/useToggleSectionCollapse.ts

@@ -1,36 +0,0 @@
-import { useCallback } from 'react';
-
-import {
-	selectIsSectionOpen,
-	useDashboardStore,
-} from '../../../store/useDashboardStore';
-
-interface Params {
-	sectionId: string;
-}
-
-interface Result {
-	open: boolean;
-	toggle: () => void;
-}
-
-/**
- * Owns a section's expand/collapse state. Collapse is a frontend-only, per-user
- * preference (not in the dashboard spec): it lives in the persisted zustand
- * store, keyed by dashboardId + section id, and survives reloads. Default open.
- */
-export function useToggleSectionCollapse({ sectionId }: Params): Result {
-	const dashboardId = useDashboardStore((s) => s.dashboardId);
-	const open = useDashboardStore(selectIsSectionOpen(dashboardId, sectionId));
-	const toggleSectionCollapse = useDashboardStore(
-		(s) => s.toggleSectionCollapse,
-	);
-
-	const toggle = useCallback((): void => {
-		if (dashboardId) {
-			toggleSectionCollapse(dashboardId, sectionId);
-		}
-	}, [dashboardId, sectionId, toggleSectionCollapse]);
-
-	return { open, toggle };
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/PanelsAndSectionsLayout/index.tsx

@@ -7,11 +7,8 @@ import type {
 	DashboardtypesPanelDTO,
 } from 'api/generated/services/sigNoz.schemas';
 
-import { useDashboardStore } from '../store/useDashboardStore';
 import { layoutsToSections } from '../utils';
-import AddSectionControl from './Section/AddSectionControl/AddSectionControl';
 import Section from './Section/Section/Section';
-import SectionList from './Section/SectionList';
 import styles from './PanelsAndSectionsLayout.module.scss';
 
 import 'react-grid-layout/css/styles.css';
@@ -23,8 +20,6 @@ interface Props {
 }
 
 function PanelsAndSectionsLayout({ layouts, panels }: Props): JSX.Element {
-	const isEditable = useDashboardStore((s) => s.isEditable);
-
 	const sections = useMemo(
 		() => layoutsToSections(layouts, panels),
 		[layouts, panels],
@@ -33,11 +28,6 @@ function PanelsAndSectionsLayout({ layouts, panels }: Props): JSX.Element {
 	const isEmpty =
 		sections.length === 0 || sections.every((s) => s.items.length === 0);
 
-	// Sectioned mode = at least one titled layout. Sections then become a
-	// reorderable list; otherwise the dashboard is a single free-flowing grid
-	// with no section chrome or reordering.
-	const isSectioned = useMemo(() => sections.some((s) => !!s.title), [sections]);
-
 	const renderContent = (): ReactNode => {
 		if (isEmpty) {
 			return (
@@ -52,27 +42,12 @@ function PanelsAndSectionsLayout({ layouts, panels }: Props): JSX.Element {
 			);
 		}
 
-		if (isSectioned) {
-			return <SectionList sections={sections} layouts={layouts} />;
-		}
-
 		return sections.map((section) => (
 			<Section key={section.id} section={section} />
 		));
 	};
 
-	return (
-		<div className={styles.body}>
-			{renderContent()}
-			{isEditable ? (
-				<AddSectionControl
-					sections={sections}
-					layouts={layouts}
-					isSectioned={isSectioned}
-				/>
-			) : null}
-		</div>
-	);
+	return <div className={styles.body}>{renderContent()}</div>;
 }
 
 export default PanelsAndSectionsLayout;

frontend/src/pages/DashboardPageV2/DashboardContainer/index.tsx

@@ -1,13 +1,10 @@
-import { useEffect, useMemo } from 'react';
+import { useMemo } from 'react';
 import { FullScreen, useFullScreenHandle } from 'react-full-screen';
 
 import type { DashboardtypesGettableDashboardV2DTO } from 'api/generated/services/sigNoz.schemas';
-import useComponentPermission from 'hooks/useComponentPermission';
-import { useAppContext } from 'providers/App/App';
 
 import DashboardDescription from './DashboardDescription';
 import PanelsAndSectionsLayout from './PanelsAndSectionsLayout';
-import { useDashboardStore } from './store/useDashboardStore';
 import styles from './DashboardContainer.module.scss';
 
 interface Props {
@@ -18,17 +15,6 @@ interface Props {
 function DashboardContainer({ dashboard, refetch }: Props): JSX.Element {
 	const fullScreenHandle = useFullScreenHandle();
 
-	const { user } = useAppContext();
-	const [editDashboard] = useComponentPermission(['edit_dashboard'], user.role);
-	const isEditable = !dashboard.locked && editDashboard;
-
-	// Publish edit context to the store so hooks/components read it from there
-	// instead of receiving dashboardId/isEditable/refetch as props down the tree.
-	const setEditContext = useDashboardStore((s) => s.setEditContext);
-	useEffect(() => {
-		setEditContext({ dashboardId: dashboard.id ?? '', isEditable, refetch });
-	}, [dashboard.id, isEditable, refetch, setEditContext]);
-
 	const { spec } = dashboard;
 	const layouts = useMemo(() => spec?.layouts ?? [], [spec?.layouts]);
 	const panels = useMemo(() => spec?.panels ?? {}, [spec?.panels]);

frontend/src/pages/DashboardPageV2/DashboardContainer/patchOps.ts

@@ -1,177 +0,0 @@
-import type {
-	DashboardGridItemDTO,
-	DashboardtypesJSONPatchOperationDTO,
-	DashboardtypesLayoutDTO,
-	DashboardtypesPanelDTO,
-} from 'api/generated/services/sigNoz.schemas';
-import { DashboardtypesJSONPatchOperationDTOOp } from 'api/generated/services/sigNoz.schemas';
-
-import type { GridItem } from './utils';
-
-/**
- * Pure RFC-6902 JSON-Patch builders for the V2 dashboard spec. These are
- * intentionally side-effect-free (no React, no network) so they can be unit
- * tested and reused by the layout hooks. JSON pointers target the postable
- * shape: `/spec/layouts/...`, `/spec/panels/...` (matches the existing V2
- * patches in DashboardSettings/General and DashboardDescription).
- */
-
-const { add, replace, remove } = DashboardtypesJSONPatchOperationDTOOp;
-
-const PANEL_REF_PREFIX = '#/spec/panels/';
-
-export function panelRef(panelId: string): string {
-	return `${PANEL_REF_PREFIX}${panelId}`;
-}
-
-/**
- * Builds a minimal, backend-valid panel for a given plugin kind. The spec
- * requires exactly one query whose plugin kind is allowed for the panel;
- * `signoz/BuilderQuery` is allowed for every panel kind and its contents are not
- * validated, so an empty builder query is the safe default. The real query is
- * filled in once the panel editor lands.
- */
-export function createDefaultPanel(pluginKind: string): DashboardtypesPanelDTO {
-	// The DTO types plugin/query kinds as large generated enum unions; the kind
-	// here is chosen dynamically by the user, so we build the structurally-valid
-	// shape and assert the type.
-	return {
-		kind: 'Panel',
-		spec: {
-			display: { name: 'New panel' },
-			plugin: { kind: pluginKind, spec: {} },
-			queries: [
-				{
-					kind: 'TimeSeriesQuery',
-					spec: { plugin: { kind: 'signoz/BuilderQuery', spec: { name: 'A' } } },
-				},
-			],
-		},
-	} as unknown as DashboardtypesPanelDTO;
-}
-
-/** Converts a UI grid item back into the spec's grid-item DTO shape. */
-export function gridItemToDTO(item: GridItem): DashboardGridItemDTO {
-	return {
-		x: item.x,
-		y: item.y,
-		width: item.width,
-		height: item.height,
-		content: { $ref: panelRef(item.id) },
-	};
-}
-
-/** Replace the entire items array of one section (used on panel move/resize). */
-export function replaceSectionItemsOp(
-	layoutIndex: number,
-	items: GridItem[],
-): DashboardtypesJSONPatchOperationDTO {
-	return {
-		op: replace,
-		path: `/spec/layouts/${layoutIndex}/spec/items`,
-		value: items.map(gridItemToDTO),
-	};
-}
-
-/** Replace the whole layouts array (used on section reorder — avoids move-index ambiguity). */
-export function reorderLayoutsOp(
-	layouts: DashboardtypesLayoutDTO[],
-): DashboardtypesJSONPatchOperationDTO {
-	return { op: replace, path: '/spec/layouts', value: layouts };
-}
-
-/** An empty titled Grid layout (one section). */
-export function newGridLayout(title: string): DashboardtypesLayoutDTO {
-	return {
-		kind: 'Grid' as DashboardtypesLayoutDTO['kind'],
-		spec: { display: { title }, items: [] },
-	};
-}
-
-/** Append a new, empty titled Grid section. */
-export function addSectionOp(
-	title: string,
-): DashboardtypesJSONPatchOperationDTO {
-	return { op: add, path: '/spec/layouts/-', value: newGridLayout(title) };
-}
-
-interface AddPanelToSectionArgs {
-	panelId: string;
-	panel: DashboardtypesPanelDTO;
-	layoutIndex: number;
-	item: DashboardGridItemDTO;
-}
-
-/** Add a panel to `spec.panels` and an item ref into a section, as one atomic patch. */
-export function addPanelToSectionOps({
-	panelId,
-	panel,
-	layoutIndex,
-	item,
-}: AddPanelToSectionArgs): DashboardtypesJSONPatchOperationDTO[] {
-	return [
-		{ op: add, path: `/spec/panels/${panelId}`, value: panel },
-		{ op: add, path: `/spec/layouts/${layoutIndex}/spec/items/-`, value: item },
-	];
-}
-
-interface MovePanelArgs {
-	sourceIndex: number;
-	sourceItems: GridItem[];
-	targetIndex: number;
-	targetItems: GridItem[];
-}
-
-/** Move a panel's item ref from one section to another (panel stays in spec.panels). */
-export function movePanelBetweenSectionsOps({
-	sourceIndex,
-	sourceItems,
-	targetIndex,
-	targetItems,
-}: MovePanelArgs): DashboardtypesJSONPatchOperationDTO[] {
-	return [
-		replaceSectionItemsOp(sourceIndex, sourceItems),
-		replaceSectionItemsOp(targetIndex, targetItems),
-	];
-}
-
-/** Rename an existing section's title. */
-export function renameSectionOp(
-	layoutIndex: number,
-	title: string,
-): DashboardtypesJSONPatchOperationDTO {
-	return {
-		op: replace,
-		path: `/spec/layouts/${layoutIndex}/spec/display/title`,
-		value: title,
-	};
-}
-
-/**
- * First-section migration: give an existing untitled (free-flowing) layout a
- * title, turning it into a section in place while preserving its panels.
- */
-export function titleUntitledSectionOp(
-	layoutIndex: number,
-	title: string,
-): DashboardtypesJSONPatchOperationDTO {
-	return {
-		op: add,
-		path: `/spec/layouts/${layoutIndex}/spec/display`,
-		value: { title },
-	};
-}
-
-/** Remove a section. Panel cleanup (orphaned refs) is handled by the caller. */
-export function removeSectionOp(
-	layoutIndex: number,
-): DashboardtypesJSONPatchOperationDTO {
-	return { op: remove, path: `/spec/layouts/${layoutIndex}` };
-}
-
-/** Remove a panel definition from `spec.panels`. */
-export function removePanelOp(
-	panelId: string,
-): DashboardtypesJSONPatchOperationDTO {
-	return { op: remove, path: `/spec/panels/${panelId}` };
-}

frontend/src/pages/DashboardPageV2/DashboardContainer/store/slices/collapseSlice.ts

@@ -1,35 +0,0 @@
-import type { StateCreator } from 'zustand';
-
-import type { DashboardStore } from '../useDashboardStore';
-
-/**
- * Section collapse state — frontend-only and persisted to localStorage. Keyed by
- * dashboardId → section stable id → open. An absent entry means "open" (the
- * default). This is intentionally NOT server state: collapse is a per-user UI
- * preference, so it lives here instead of in the dashboard spec.
- */
-export interface CollapseSlice {
-	collapsed: Record<string, Record<string, boolean>>;
-	toggleSectionCollapse: (dashboardId: string, sectionId: string) => void;
-}
-
-export const createCollapseSlice: StateCreator<
-	DashboardStore,
-	[['zustand/persist', unknown]],
-	[],
-	CollapseSlice
-> = (set, get) => ({
-	collapsed: {},
-	toggleSectionCollapse: (dashboardId, sectionId): void => {
-		const { collapsed } = get();
-		const current = collapsed[dashboardId]?.[sectionId];
-		// Absent → open by default, so the first toggle closes it.
-		const next = current === undefined ? false : !current;
-		set({
-			collapsed: {
-				...collapsed,
-				[dashboardId]: { ...collapsed[dashboardId], [sectionId]: next },
-			},
-		});
-	},
-});

frontend/src/pages/DashboardPageV2/DashboardContainer/store/slices/editContextSlice.ts

@@ -1,38 +0,0 @@
-import type { StateCreator } from 'zustand';
-
-import type { DashboardStore } from '../useDashboardStore';
-
-/**
- * Edit context shared across the V2 dashboard tree — the dashboard id, whether
- * the user can edit, and the react-query refetch. Set once by DashboardContainer
- * so hooks/components read it from the store instead of receiving it as props
- * through every layer. Not persisted.
- */
-export interface EditContextSlice {
-	dashboardId: string;
-	isEditable: boolean;
-	refetch: () => void;
-	setEditContext: (ctx: {
-		dashboardId: string;
-		isEditable: boolean;
-		refetch: () => void;
-	}) => void;
-}
-
-export const createEditContextSlice: StateCreator<
-	DashboardStore,
-	[['zustand/persist', unknown]],
-	[],
-	EditContextSlice
-> = (set) => ({
-	dashboardId: '',
-	isEditable: false,
-	refetch: (): void => undefined,
-	setEditContext: (ctx): void => {
-		set({
-			dashboardId: ctx.dashboardId,
-			isEditable: ctx.isEditable,
-			refetch: ctx.refetch,
-		});
-	},
-});

frontend/src/pages/DashboardPageV2/DashboardContainer/store/useDashboardStore.ts

@@ -1,44 +0,0 @@
-import { create } from 'zustand';
-import { persist } from 'zustand/middleware';
-
-import {
-	createEditContextSlice,
-	type EditContextSlice,
-} from './slices/editContextSlice';
-import {
-	createCollapseSlice,
-	type CollapseSlice,
-} from './slices/collapseSlice';
-
-export type DashboardStore = EditContextSlice & CollapseSlice;
-
-/**
- * V2 dashboard session store. Holds cross-cutting client state only — never the
- * dashboard spec (that stays in react-query via useGetDashboardV2). Two slices:
- * - edit-context: dashboardId / isEditable / refetch (set once, not persisted).
- * - collapse: per-section open state (frontend-only, persisted to localStorage).
- */
-export const useDashboardStore = create<DashboardStore>()(
-	persist(
-		(...a) => ({
-			...createEditContextSlice(...a),
-			...createCollapseSlice(...a),
-		}),
-		{
-			name: '@signoz/dashboard-v2',
-			// Persist only the collapse map — context (incl. the refetch fn) is transient.
-			partialize: (state) => ({ collapsed: state.collapsed }),
-		},
-	),
-);
-
-/** Selector: is a section open? Absent entry (or no dashboard) → open by default. */
-export const selectIsSectionOpen =
-	(dashboardId: string, sectionId: string) =>
-	(state: DashboardStore): boolean => {
-		if (!dashboardId) {
-			return true;
-		}
-		const value = state.collapsed[dashboardId]?.[sectionId];
-		return value === undefined ? true : value;
-	};

frontend/src/pages/DashboardPageV2/DashboardContainer/utils.ts

@@ -72,6 +72,7 @@ export interface DashboardSection {
 	/** Position of this section's Grid in `spec.layouts`. All JSON-Patch ops target by this. */
 	layoutIndex: number;
 	title: string | undefined;
+	open: boolean;
 	items: GridItem[];
 	repeatVariable: string | undefined;
 }
@@ -126,11 +127,15 @@ export function layoutsToSections(
 				.filter((it): it is GridItem => it !== null);
 
 			const title = spec?.display?.title;
+			// `open` defaults to true when no collapse field is set (the section
+			// is expanded by default).
+			const open = spec?.display?.collapse?.open !== false;
 
 			return {
 				id: getSectionStableId(items, idx),
 				layoutIndex: idx,
 				title,
+				open,
 				items,
 				repeatVariable: spec?.repeatVariable,
 			};

frontend/src/pages/WorkspaceLocked/WorkspaceLocked.tsx

@@ -300,7 +300,7 @@ export default function WorkspaceBlocked(): JSX.Element {
 										View Billing
 									</Button>
 
-									<RefreshPaymentStatus />
+									<RefreshPaymentStatus btnShape="round" />
 								</Flex>
 							)}
 

frontend/src/pages/WorkspaceSuspended/WorkspaceSuspended.tsx

@@ -143,7 +143,7 @@ function WorkspaceSuspended(): JSX.Element {
 										>
 											{t('continueMyJourney')}
 										</Button>
-										<RefreshPaymentStatus />
+										<RefreshPaymentStatus btnShape="round" />
 									</Flex>
 								</Row>
 							)}

go.mod

@@ -43,7 +43,7 @@ require (
 	github.com/openfga/api/proto v0.0.0-20260319214821-f153694bfc20
 	github.com/openfga/language/pkg/go v0.2.1
 	github.com/opentracing/opentracing-go v1.2.0
-	github.com/perses/spec v0.1.2
+	github.com/perses/perses v0.53.1
 	github.com/pkg/errors v0.9.1
 	github.com/prometheus/alertmanager v0.31.1
 	github.com/prometheus/client_golang v1.23.2
@@ -138,8 +138,9 @@ require (
 	github.com/huandu/go-clone v1.7.3 // indirect
 	github.com/leodido/go-urn v1.4.0 // indirect
 	github.com/mattn/go-isatty v0.0.20 // indirect
+	github.com/muhlemmer/gu v0.3.1 // indirect
 	github.com/ncruces/go-strftime v1.0.0 // indirect
-	github.com/nxadm/tail v1.4.11 // indirect
+	github.com/perses/common v0.30.2 // indirect
 	github.com/prometheus/client_golang/exp v0.0.0-20260325093428-d8591d0db856 // indirect
 	github.com/puzpuzpuz/xsync/v4 v4.4.0 // indirect
 	github.com/redis/go-redis/extra/rediscmd/v9 v9.15.1 // indirect
@@ -150,6 +151,8 @@ require (
 	github.com/ugorji/go/codec v1.3.0 // indirect
 	github.com/uptrace/opentelemetry-go-extra/otelsql v0.3.2 // indirect
 	github.com/x448/float16 v0.8.4 // indirect
+	github.com/zitadel/oidc/v3 v3.45.4 // indirect
+	github.com/zitadel/schema v1.3.2 // indirect
 	go.opentelemetry.io/collector/client v1.54.0 // indirect
 	go.opentelemetry.io/collector/config/configoptional v1.50.0 // indirect
 	go.opentelemetry.io/collector/config/configretry v1.50.0 // indirect

go.sum

@@ -332,7 +332,6 @@ github.com/frankban/quicktest v1.14.6 h1:7Xjx+VpznH+oBnejlPUj8oUpdxnVs4f8XU8WnHk
 github.com/frankban/quicktest v1.14.6/go.mod h1:4ptaffx2x8+WTWXmUCuVU6aPUX1/Mz7zb5vbUoiM6w0=
 github.com/fsnotify/fsnotify v1.4.9/go.mod h1:znqG4EE+3YCdAaPaxE2ZRY/06pZUdp0tY4IgpuI1SZQ=
 github.com/fsnotify/fsnotify v1.5.4/go.mod h1:OVB6XrOHzAwXMpEM7uPOzcehqUV2UqJxmVXmkdnm1bU=
-github.com/fsnotify/fsnotify v1.6.0/go.mod h1:sl3t1tCWJFWoRz9R8WJCbQihKKwmorjAbSClcnxKAGw=
 github.com/fsnotify/fsnotify v1.9.0 h1:2Ml+OJNzbYCTzsxtv8vKSFD9PbJjmhYF14k/jKC7S9k=
 github.com/fsnotify/fsnotify v1.9.0/go.mod h1:8jBTzvmWwFyi3Pb8djgCCO5IBqzKJ/Jwo8TRcHyHii0=
 github.com/fxamacker/cbor/v2 v2.9.0 h1:NpKPmjDBgUfBms6tr6JZkTHtfFGcMKsw3eGcmD/sapM=
@@ -833,6 +832,8 @@ github.com/modern-go/reflect2 v1.0.2/go.mod h1:yWuevngMOJpCy52FWWMvUC8ws7m/LJsjY
 github.com/modern-go/reflect2 v1.0.3-0.20250322232337-35a7c28c31ee h1:W5t00kpgFdJifH4BDsTlE89Zl93FEloxaWZfGcifgq8=
 github.com/modern-go/reflect2 v1.0.3-0.20250322232337-35a7c28c31ee/go.mod h1:yWuevngMOJpCy52FWWMvUC8ws7m/LJsjYzDa0/r8luk=
 github.com/montanaflynn/stats v0.0.0-20171201202039-1bf9dbcd8cbe/go.mod h1:wL8QJuTMNUDYhXwkmfOly8iTdp5TEcJFWZD2D7SIkUc=
+github.com/muhlemmer/gu v0.3.1 h1:7EAqmFrW7n3hETvuAdmFmn4hS8W+z3LgKtrnow+YzNM=
+github.com/muhlemmer/gu v0.3.1/go.mod h1:YHtHR+gxM+bKEIIs7Hmi9sPT3ZDUvTN/i88wQpZkrdM=
 github.com/munnerz/goautoneg v0.0.0-20191010083416-a7dc8b61c822 h1:C3w9PqII01/Oq1c1nUAm88MOHcQC9l5mIlSMApZMrHA=
 github.com/munnerz/goautoneg v0.0.0-20191010083416-a7dc8b61c822/go.mod h1:+n7T8mK8HuQTcFwEeznm/DIxMOiR9yIdICNftLE1DvQ=
 github.com/mwitkow/go-conntrack v0.0.0-20161129095857-cc309e4a2223/go.mod h1:qRWi+5nqEBWmkhHvq77mSJWrCKwh8bxhgT7d/eI7P4U=
@@ -842,6 +843,8 @@ github.com/natefinch/wrap v0.2.0 h1:IXzc/pw5KqxJv55gV0lSOcKHYuEZPGbQrOOXr/bamRk=
 github.com/natefinch/wrap v0.2.0/go.mod h1:6gMHlAl12DwYEfKP3TkuykYUfLSEAvHw67itm4/KAS8=
 github.com/ncruces/go-strftime v1.0.0 h1:HMFp8mLCTPp341M/ZnA4qaf7ZlsbTc+miZjCLOFAw7w=
 github.com/ncruces/go-strftime v1.0.0/go.mod h1:Fwc5htZGVVkseilnfgOVb9mKy6w1naJmn9CehxcKcls=
+github.com/nexucis/lamenv v0.5.2 h1:tK/u3XGhCq9qIoVNcXsK9LZb8fKopm0A5weqSRvHd7M=
+github.com/nexucis/lamenv v0.5.2/go.mod h1:HusJm6ltmmT7FMG8A750mOLuME6SHCsr2iFYxp5fFi0=
 github.com/npillmayer/nestext v0.1.3/go.mod h1:h2lrijH8jpicr25dFY+oAJLyzlya6jhnuG+zWp9L0Uk=
 github.com/nxadm/tail v1.4.11 h1:8feyoE3OzPrcshW5/MJ4sGESc5cqmGkGCWlco4l0bqY=
 github.com/nxadm/tail v1.4.11/go.mod h1:OTaG3NK980DZzxbRq6lEuzgU+mug70nY11sMd4JXXHc=
@@ -904,8 +907,10 @@ github.com/pelletier/go-toml v1.9.5/go.mod h1:u1nR/EPcESfeI/szUZKdtJ0xRNbUoANCko
 github.com/pelletier/go-toml/v2 v2.0.5/go.mod h1:OMHamSCAODeSsVrwwvcJOaoN0LIUIaFVNZzmWyNfXas=
 github.com/pelletier/go-toml/v2 v2.2.4 h1:mye9XuhQ6gvn5h28+VilKrrPoQVanw5PMw/TB0t5Ec4=
 github.com/pelletier/go-toml/v2 v2.2.4/go.mod h1:2gIqNv+qfxSVS7cM2xJQKtLSTLUE9V8t9Stt+h56mCY=
-github.com/perses/spec v0.1.2 h1:yGoygcR3ZusuGDCmRMwsVXCMvMwi1qZndKV6NYNreEw=
-github.com/perses/spec v0.1.2/go.mod h1:NoGI5jmGwRdkdPgyYSZJTBL4/Py+dqIPKS2QV8NOvGE=
+github.com/perses/common v0.30.2 h1:RAiVxUpX76lTCb4X7pfcXSvYdXQmZwKi4oDKAEO//u0=
+github.com/perses/common v0.30.2/go.mod h1:DFtur1QPah2/ChXbKKhw7djYdwNgz27s5fPKpiK0Xao=
+github.com/perses/perses v0.53.1 h1:9VY/6p9QWrZwPSV7qiwTMSOsgcB37Lb1AXKT0ORXc6I=
+github.com/perses/perses v0.53.1/go.mod h1:ro8fsgBkHYOdrL/MV+fdP9mflKzYCy/+gcbxiaReI/A=
 github.com/pierrec/lz4 v2.0.5+incompatible/go.mod h1:pdkljMzZIN41W+lC3N2tnIh5sFi+IEE17M5jbnwPHcY=
 github.com/pierrec/lz4/v4 v4.1.25 h1:kocOqRffaIbU5djlIBr7Wh+cx82C0vtFb0fOurZHqD0=
 github.com/pierrec/lz4/v4 v4.1.25/go.mod h1:EoQMVJgeeEOMsCqCzqFm2O0cJvljX2nGZjcRIPL34O4=
@@ -1166,6 +1171,10 @@ github.com/zeebo/assert v1.3.1 h1:vukIABvugfNMZMQO1ABsyQDJDTVQbn+LWSMy1ol1h6A=
 github.com/zeebo/assert v1.3.1/go.mod h1:Pq9JiuJQpG8JLJdtkwrJESF0Foym2/D9XMU5ciN/wJ0=
 github.com/zeebo/xxh3 v1.0.2 h1:xZmwmqxHZA8AI603jOQ0tMqmBr9lPeFwGg6d+xy9DC0=
 github.com/zeebo/xxh3 v1.0.2/go.mod h1:5NWz9Sef7zIDm2JHfFlcQvNekmcEl9ekUZQQKCYaDcA=
+github.com/zitadel/oidc/v3 v3.45.4 h1:GKyWaPRVQ8sCu9XgJ3NgNGtG52FzwVJpzXjIUG2+YrI=
+github.com/zitadel/oidc/v3 v3.45.4/go.mod h1:XALmFXS9/kSom9B6uWin1yJ2WTI/E4Ti5aXJdewAVEs=
+github.com/zitadel/schema v1.3.2 h1:gfJvt7dOMfTmxzhscZ9KkapKo3Nei3B6cAxjav+lyjI=
+github.com/zitadel/schema v1.3.2/go.mod h1:IZmdfF9Wu62Zu6tJJTH3UsArevs3Y4smfJIj3L8fzxw=
 go.etcd.io/etcd/api/v3 v3.5.4/go.mod h1:5GB2vv4A4AOn3yk7MftYGHkUfGtDHnEraIjym4dYz5A=
 go.etcd.io/etcd/client/pkg/v3 v3.5.4/go.mod h1:IJHfcCEKxYu1Os13ZdwCwIUTUVGYTSAM3YSwc9/Ac1g=
 go.etcd.io/etcd/client/v2 v2.305.4/go.mod h1:Ud+VUwIi9/uQHOMA+4ekToJ12lTxlv0zB/+DHwTGEbU=
@@ -1610,7 +1619,6 @@ golang.org/x/sys v0.0.0-20220328115105-d36c6a25d886/go.mod h1:oPkhp1MJrh7nUepCBc
 golang.org/x/sys v0.0.0-20220412211240-33da011f77ad/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.0.0-20220502124256-b6088ccd6cba/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.0.0-20220520151302-bc2c85ada10a/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
-golang.org/x/sys v0.0.0-20220908164124-27713097b956/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.1.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.6.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.42.0 h1:omrd2nAlyT5ESRdCLYdm3+fMfNFE/+Rf4bDIQImRJeo=

pkg/apiserver/signozapiserver/cloudintegration.go

@@ -212,26 +212,6 @@ func (provider *provider) addCloudIntegrationRoutes(router *mux.Router) error {
 		return err
 	}
 
-	if err := router.Handle("/api/v1/cloud_integrations/{cloud_provider}/accounts/{id}/services/{service_id}", handler.New(
-		provider.authzMiddleware.AdminAccess(provider.cloudIntegrationHandler.GetAccountService),
-		handler.OpenAPIDef{
-			ID:                  "GetAccountService",
-			Tags:                []string{"cloudintegration"},
-			Summary:             "Get service for account",
-			Description:         "This endpoint gets a service and its configuration for the specified cloud integration account",
-			Request:             nil,
-			RequestContentType:  "",
-			Response:            new(citypes.Service),
-			ResponseContentType: "application/json",
-			SuccessStatusCode:   http.StatusOK,
-			ErrorStatusCodes:    []int{http.StatusBadRequest, http.StatusNotFound},
-			Deprecated:          false,
-			SecuritySchemes:     newSecuritySchemes(types.RoleAdmin),
-		},
-	)).Methods(http.MethodGet).GetError(); err != nil {
-		return err
-	}
-
 	// Agent check-in endpoint is kept same as older one to maintain backward compatibility with already deployed agents.
 	// In the future, this endpoint will be deprecated and a new endpoint will be introduced for consistency with above endpoints.
 	if err := router.Handle("/api/v1/cloud-integrations/{cloud_provider}/agent-check-in", handler.New(

pkg/modules/cloudintegration/cloudintegration.go

@@ -77,7 +77,6 @@ type Handler interface {
 	ListServicesMetadata(http.ResponseWriter, *http.Request)
 	ListAccountServicesMetadata(http.ResponseWriter, *http.Request)
 	GetService(http.ResponseWriter, *http.Request)
-	GetAccountService(http.ResponseWriter, *http.Request)
 	UpdateService(http.ResponseWriter, *http.Request)
 	AgentCheckIn(http.ResponseWriter, *http.Request)
 }

pkg/modules/cloudintegration/implcloudintegration/handler.go

@@ -360,51 +360,6 @@ func (handler *handler) GetService(rw http.ResponseWriter, r *http.Request) {
 	render.Success(rw, http.StatusOK, svc)
 }
 
-func (handler *handler) GetAccountService(rw http.ResponseWriter, r *http.Request) {
-	ctx, cancel := context.WithTimeout(r.Context(), 10*time.Second)
-	defer cancel()
-
-	claims, err := authtypes.ClaimsFromContext(ctx)
-	if err != nil {
-		render.Error(rw, err)
-		return
-	}
-
-	provider, err := cloudintegrationtypes.NewCloudProvider(mux.Vars(r)["cloud_provider"])
-	if err != nil {
-		render.Error(rw, err)
-		return
-	}
-
-	serviceID, err := cloudintegrationtypes.NewServiceID(provider, mux.Vars(r)["service_id"])
-	if err != nil {
-		render.Error(rw, err)
-		return
-	}
-
-	cloudIntegrationID, err := valuer.NewUUID(mux.Vars(r)["id"])
-	if err != nil {
-		render.Error(rw, err)
-		return
-	}
-
-	orgID := valuer.MustNewUUID(claims.OrgID)
-
-	_, err = handler.module.GetConnectedAccount(ctx, orgID, cloudIntegrationID, provider)
-	if err != nil {
-		render.Error(rw, err)
-		return
-	}
-
-	svc, err := handler.module.GetService(ctx, orgID, serviceID, provider, cloudIntegrationID)
-	if err != nil {
-		render.Error(rw, err)
-		return
-	}
-
-	render.Success(rw, http.StatusOK, svc)
-}
-
 func (handler *handler) UpdateService(rw http.ResponseWriter, r *http.Request) {
 	ctx, cancel := context.WithTimeout(r.Context(), 10*time.Second)
 	defer cancel()

pkg/types/dashboardtypes/perses_dashboard.go

@@ -12,7 +12,7 @@ import (
 	"github.com/SigNoz/signoz/pkg/types/coretypes"
 	"github.com/SigNoz/signoz/pkg/types/tagtypes"
 	"github.com/SigNoz/signoz/pkg/valuer"
-	"github.com/perses/spec/go/common"
+	"github.com/perses/perses/pkg/model/api/v1/common"
 	"k8s.io/apimachinery/pkg/util/validation"
 )
 

pkg/types/dashboardtypes/perses_dashboard_convertors_test.go

@@ -9,9 +9,8 @@ import (
 	"github.com/SigNoz/signoz/pkg/types"
 	"github.com/SigNoz/signoz/pkg/types/coretypes"
 	"github.com/SigNoz/signoz/pkg/types/tagtypes"
-	qb "github.com/SigNoz/signoz/pkg/types/querybuildertypes/querybuildertypesv5"
 	"github.com/SigNoz/signoz/pkg/valuer"
-	"github.com/perses/spec/go/common"
+	"github.com/perses/perses/pkg/model/api/v1/common"
 	"github.com/stretchr/testify/assert"
 	"github.com/stretchr/testify/require"
 )
@@ -44,7 +43,7 @@ func newTestDashboardV2(t *testing.T, orgID valuer.UUID, source Source) *Dashboa
 					},
 					Queries: []Query{
 						{
-							Kind: qb.RequestTypeTimeSeries,
+							Kind: "TimeSeriesQuery",
 							Spec: QuerySpec{
 								Plugin: QueryPlugin{
 									Kind: QueryKindPromQL,

pkg/types/dashboardtypes/perses_dashboard_data.go

@@ -8,12 +8,12 @@ import (
 
 	"github.com/SigNoz/signoz/pkg/errors"
 	qb "github.com/SigNoz/signoz/pkg/types/querybuildertypes/querybuildertypesv5"
-	"github.com/perses/spec/go/common"
-	"github.com/perses/spec/go/dashboard"
+	v1 "github.com/perses/perses/pkg/model/api/v1"
+	"github.com/perses/perses/pkg/model/api/v1/common"
 )
 
 // DashboardSpec is the SigNoz dashboard v2 spec shape. It mirrors
-// dashboard.Spec (Perses) field-for-field, except every common.Plugin
+// v1.DashboardSpec (Perses) field-for-field, except every common.Plugin
 // occurrence is replaced with a typed SigNoz plugin whose OpenAPI schema is a
 // per-site discriminated oneOf.
 type DashboardSpec struct {
@@ -24,7 +24,7 @@ type DashboardSpec struct {
 	Layouts         []Layout                   `json:"layouts"`
 	Duration        common.DurationString      `json:"duration"`
 	RefreshInterval common.DurationString      `json:"refreshInterval,omitempty"`
-	Links           []dashboard.Link           `json:"links,omitempty"`
+	Links           []v1.Link                  `json:"links,omitempty"`
 }
 
 // ══════════════════════════════════════════════

pkg/types/dashboardtypes/perses_dashboard_patch_test.go

@@ -44,7 +44,7 @@ const basePostableJSON = `{
 					"plugin": {"kind": "signoz/TimeSeriesPanel", "spec": {}},
 					"queries": [
 						{
-							"kind": "time_series",
+							"kind": "TimeSeriesQuery",
 							"spec": {"plugin": {"kind": "signoz/BuilderQuery", "spec": {
 								"name": "A",
 								"signal": "metrics",
@@ -67,7 +67,7 @@ const basePostableJSON = `{
 					"plugin": {"kind": "signoz/NumberPanel", "spec": {}},
 					"queries": [
 						{
-							"kind": "time_series",
+							"kind": "TimeSeriesQuery",
 							"spec": {"plugin": {"kind": "signoz/BuilderQuery", "spec": {
 								"name": "X",
 								"signal": "metrics",
@@ -184,7 +184,7 @@ func TestPatchableDashboardV2_Apply(t *testing.T) {
 				"spec": {
 					"plugin": {"kind": "signoz/TablePanel", "spec": {}},
 					"queries": [{
-						"kind": "time_series",
+						"kind": "TimeSeriesQuery",
 						"spec": {"plugin": {"kind": "signoz/BuilderQuery", "spec": {
 							"name": "A",
 							"signal": "logs",
@@ -218,7 +218,7 @@ func TestPatchableDashboardV2_Apply(t *testing.T) {
 				"spec": {
 					"plugin": {"kind": "signoz/BarChartPanel", "spec": {}},
 					"queries": [{
-						"kind": "time_series",
+						"kind": "TimeSeriesQuery",
 						"spec": {"plugin": {"kind": "signoz/BuilderQuery", "spec": {
 							"name": "A",
 							"signal": "metrics",
@@ -275,7 +275,7 @@ func TestPatchableDashboardV2_Apply(t *testing.T) {
 			"op": "replace",
 			"path": "/spec/panels/p1/spec/queries/0",
 			"value": {
-				"kind": "time_series",
+				"kind": "TimeSeriesQuery",
 				"spec": {"plugin": {"kind": "signoz/BuilderQuery", "spec": {
 					"name": "B",
 					"signal": "metrics",
@@ -344,7 +344,7 @@ func TestPatchableDashboardV2_Apply(t *testing.T) {
 					"spec": {
 						"plugin": {"kind": "signoz/TablePanel", "spec": {}},
 						"queries": [{
-							"kind": "time_series",
+							"kind": "TimeSeriesQuery",
 							"spec": {"plugin": {"kind": "signoz/BuilderQuery", "spec": {
 								"name": "A",
 								"signal": "logs",
@@ -508,7 +508,7 @@ func TestPatchableDashboardV2_Apply(t *testing.T) {
 				"kind": "Panel",
 				"spec": {
 					"plugin": {"kind": "signoz/ListPanel", "spec": {}},
-					"queries": [{"kind": "time_series", "spec": {"plugin": {"kind": "signoz/PromQLQuery", "spec": {"name": "A", "query": "up"}}}}]
+					"queries": [{"kind": "TimeSeriesQuery", "spec": {"plugin": {"kind": "signoz/PromQLQuery", "spec": {"name": "A", "query": "up"}}}}]
 				}
 			}
 		}]`).Apply(base)
@@ -534,11 +534,11 @@ func TestPatchableDashboardV2_Apply(t *testing.T) {
 				"spec": {
 					"plugin": {"kind": "signoz/TimeSeriesPanel", "spec": {}},
 					"queries": [
-						{"kind": "time_series", "spec": {"plugin": {"kind": "signoz/BuilderQuery", "spec": {
+						{"kind": "TimeSeriesQuery", "spec": {"plugin": {"kind": "signoz/BuilderQuery", "spec": {
 							"name": "A", "signal": "metrics",
 							"aggregations": [{"metricName": "signoz_calls_total", "temporality": "cumulative", "timeAggregation": "rate", "spaceAggregation": "sum"}]
 						}}}},
-						{"kind": "time_series", "spec": {"plugin": {"kind": "signoz/BuilderQuery", "spec": {
+						{"kind": "TimeSeriesQuery", "spec": {"plugin": {"kind": "signoz/BuilderQuery", "spec": {
 							"name": "B", "signal": "metrics",
 							"aggregations": [{"metricName": "signoz_db_calls_total", "temporality": "cumulative", "timeAggregation": "rate", "spaceAggregation": "sum"}]
 						}}}}

pkg/types/dashboardtypes/perses_dashboard_test.go

@@ -133,21 +133,6 @@ func TestInvalidateUnknownPluginKind(t *testing.T) {
 			}`,
 			wantContain: "NonExistentPanel",
 		},
-		{
-			name: "unknown panel envelope kind",
-			data: `{
-				"panels": {
-					"p1": {
-						"kind": "Row",
-						"spec": {
-							"plugin": {"kind": "signoz/TimeSeriesPanel", "spec": {}}
-						}
-					}
-				},
-				"layouts": []
-			}`,
-			wantContain: "unknown panel kind",
-		},
 		{
 			name: "unknown query plugin",
 			data: `{
@@ -157,7 +142,7 @@ func TestInvalidateUnknownPluginKind(t *testing.T) {
 						"spec": {
 							"plugin": {"kind": "signoz/TimeSeriesPanel", "spec": {}},
 							"queries": [{
-								"kind": "time_series",
+								"kind": "TimeSeriesQuery",
 								"spec": {
 									"plugin": {"kind": "FakeQueryPlugin", "spec": {}}
 								}
@@ -169,48 +154,6 @@ func TestInvalidateUnknownPluginKind(t *testing.T) {
 			}`,
 			wantContain: "FakeQueryPlugin",
 		},
-		{
-			name: "unknown query envelope kind",
-			data: `{
-				"panels": {
-					"p1": {
-						"kind": "Panel",
-						"spec": {
-							"plugin": {"kind": "signoz/TimeSeriesPanel", "spec": {}},
-							"queries": [{
-								"kind": "TimeSeriesQuery",
-								"spec": {
-									"plugin": {"kind": "signoz/BuilderQuery", "spec": {"name": "A", "signal": "metrics"}}
-								}
-							}]
-						}
-					}
-				},
-				"layouts": []
-			}`,
-			wantContain: "unknown request type",
-		},
-		{
-			name: "empty query envelope kind",
-			data: `{
-				"panels": {
-					"p1": {
-						"kind": "Panel",
-						"spec": {
-							"plugin": {"kind": "signoz/TimeSeriesPanel", "spec": {}},
-							"queries": [{
-								"kind": "",
-								"spec": {
-									"plugin": {"kind": "signoz/BuilderQuery", "spec": {"name": "A", "signal": "metrics"}}
-								}
-							}]
-						}
-					}
-				},
-				"layouts": []
-			}`,
-			wantContain: "unknown request type",
-		},
 		{
 			name: "unknown variable plugin",
 			data: `{
@@ -303,7 +246,7 @@ func TestRejectUnknownFieldsInPluginSpec(t *testing.T) {
 						"spec": {
 							"plugin": {"kind": "signoz/TimeSeriesPanel", "spec": {}},
 							"queries": [{
-								"kind": "time_series",
+								"kind": "TimeSeriesQuery",
 								"spec": {
 									"plugin": {
 										"kind": "signoz/PromQLQuery",
@@ -381,7 +324,7 @@ func TestInvalidateWrongFieldTypeInPluginSpec(t *testing.T) {
 						"spec": {
 							"plugin": {"kind": "signoz/TimeSeriesPanel", "spec": {}},
 							"queries": [{
-								"kind": "time_series",
+								"kind": "TimeSeriesQuery",
 								"spec": {
 									"plugin": {
 										"kind": "signoz/PromQLQuery",
@@ -446,7 +389,7 @@ func TestInvalidateBadPanelSpecValues(t *testing.T) {
 								"spec": {}
 							},
 							"queries": [{
-								"kind": "time_series",
+								"kind": "TimeSeriesQuery",
 								"spec": {
 									"plugin": {
 										"kind": "signoz/BuilderQuery",
@@ -677,8 +620,8 @@ func TestInvalidatePanelWithMultipleDirectQueries(t *testing.T) {
 				"spec": {
 					"plugin": {"kind": "signoz/TimeSeriesPanel", "spec": {}},
 					"queries": [
-						{"kind": "time_series", "spec": {"plugin": {"kind": "signoz/BuilderQuery", "spec": {"name": "A", "signal": "metrics"}}}},
-						{"kind": "time_series", "spec": {"plugin": {"kind": "signoz/BuilderQuery", "spec": {"name": "B", "signal": "metrics"}}}}
+						{"kind": "TimeSeriesQuery", "spec": {"plugin": {"kind": "signoz/BuilderQuery", "spec": {"name": "A", "signal": "metrics"}}}},
+						{"kind": "TimeSeriesQuery", "spec": {"plugin": {"kind": "signoz/BuilderQuery", "spec": {"name": "B", "signal": "metrics"}}}}
 					]
 				}
 			}
@@ -795,7 +738,7 @@ func TestTimeSeriesPanelDefaults(t *testing.T) {
 						"kind": "signoz/TimeSeriesPanel",
 						"spec": {}
 					},
-					"queries": [{"kind": "time_series", "spec": {"plugin": {"kind": "signoz/PromQLQuery", "spec": {"name": "A", "query": "up"}}}}]
+					"queries": [{"kind": "TimeSeriesQuery", "spec": {"plugin": {"kind": "signoz/PromQLQuery", "spec": {"name": "A", "query": "up"}}}}]
 				}
 			}
 		},
@@ -843,7 +786,7 @@ func TestNumberPanelDefaults(t *testing.T) {
 						"kind": "signoz/NumberPanel",
 						"spec": {"thresholds": [{"value": 100, "color": "Red"}]}
 					},
-					"queries": [{"kind": "time_series", "spec": {"plugin": {"kind": "signoz/PromQLQuery", "spec": {"name": "A", "query": "up"}}}}]
+					"queries": [{"kind": "TimeSeriesQuery", "spec": {"plugin": {"kind": "signoz/PromQLQuery", "spec": {"name": "A", "query": "up"}}}}]
 				}
 			}
 		},
@@ -904,7 +847,7 @@ func TestStorageRoundTrip(t *testing.T) {
 						"kind": "signoz/TimeSeriesPanel",
 						"spec": {}
 					},
-					"queries": [{"kind": "time_series", "spec": {"plugin": {"kind": "signoz/PromQLQuery", "spec": {"name": "A", "query": "up"}}}}]
+					"queries": [{"kind": "TimeSeriesQuery", "spec": {"plugin": {"kind": "signoz/PromQLQuery", "spec": {"name": "A", "query": "up"}}}}]
 				}
 			},
 			"p2": {
@@ -914,7 +857,7 @@ func TestStorageRoundTrip(t *testing.T) {
 						"kind": "signoz/NumberPanel",
 						"spec": {"thresholds": [{"value": 100, "color": "Red"}]}
 					},
-					"queries": [{"kind": "time_series", "spec": {"plugin": {"kind": "signoz/PromQLQuery", "spec": {"name": "A", "query": "up"}}}}]
+					"queries": [{"kind": "TimeSeriesQuery", "spec": {"plugin": {"kind": "signoz/PromQLQuery", "spec": {"name": "A", "query": "up"}}}}]
 				}
 			}
 		},
@@ -1119,7 +1062,7 @@ func TestPanelTypeQueryTypeCompatibility(t *testing.T) {
 		return []byte(`{
 			"panels": {"p1": {"kind": "Panel", "spec": {
 				"plugin": {"kind": "` + panelKind + `", "spec": {}},
-				"queries": [{"kind": "time_series", "spec": {"plugin": {"kind": "` + queryKind + `", "spec": ` + querySpec + `}}}]
+				"queries": [{"kind": "TimeSeriesQuery", "spec": {"plugin": {"kind": "` + queryKind + `", "spec": ` + querySpec + `}}}]
 			}}},
 			"layouts": []
 		}`)
@@ -1128,7 +1071,7 @@ func TestPanelTypeQueryTypeCompatibility(t *testing.T) {
 		return []byte(`{
 			"panels": {"p1": {"kind": "Panel", "spec": {
 				"plugin": {"kind": "` + panelKind + `", "spec": {}},
-				"queries": [{"kind": "time_series", "spec": {"plugin": {"kind": "signoz/CompositeQuery", "spec": {
+				"queries": [{"kind": "TimeSeriesQuery", "spec": {"plugin": {"kind": "signoz/CompositeQuery", "spec": {
 					"queries": [{"type": "` + subType + `", "spec": ` + subSpec + `}]
 				}}}}]
 			}}},

pkg/types/dashboardtypes/perses_drift_test.go

@@ -10,8 +10,8 @@ import (
 	"strings"
 	"testing"
 
-	"github.com/perses/spec/go/dashboard"
-	"github.com/perses/spec/go/datasource"
+	v1 "github.com/perses/perses/pkg/model/api/v1"
+	"github.com/perses/perses/pkg/model/api/v1/dashboard"
 
 	"github.com/stretchr/testify/assert"
 )
@@ -22,12 +22,12 @@ func TestDashboardSpecMatchesPerses(t *testing.T) {
 		ours   reflect.Type
 		perses reflect.Type
 	}{
-		{"DashboardSpec", typeOf[DashboardSpec](), typeOf[dashboard.Spec]()},
-		{"Panel", typeOf[Panel](), typeOf[dashboard.Panel]()},
-		{"PanelSpec", typeOf[PanelSpec](), typeOf[dashboard.PanelSpec]()},
-		{"Query", typeOf[Query](), typeOf[dashboard.Query]()},
-		{"QuerySpec", typeOf[QuerySpec](), typeOf[dashboard.QuerySpec]()},
-		{"DatasourceSpec", typeOf[DatasourceSpec](), typeOf[datasource.Spec]()},
+		{"DashboardSpec", typeOf[DashboardSpec](), typeOf[v1.DashboardSpec]()},
+		{"Panel", typeOf[Panel](), typeOf[v1.Panel]()},
+		{"PanelSpec", typeOf[PanelSpec](), typeOf[v1.PanelSpec]()},
+		{"Query", typeOf[Query](), typeOf[v1.Query]()},
+		{"QuerySpec", typeOf[QuerySpec](), typeOf[v1.QuerySpec]()},
+		{"DatasourceSpec", typeOf[DatasourceSpec](), typeOf[v1.DatasourceSpec]()},
 		{"Variable", typeOf[Variable](), typeOf[dashboard.Variable]()},
 		{"ListVariableSpec", typeOf[ListVariableSpec](), typeOf[dashboard.ListVariableSpec]()},
 		{"Layout", typeOf[Layout](), typeOf[dashboard.Layout]()},

pkg/types/dashboardtypes/perses_replicas.go

@@ -1,15 +1,14 @@
 package dashboardtypes
 
 import (
-	"encoding/json"
 	"maps"
 	"slices"
 
 	"github.com/SigNoz/signoz/pkg/errors"
-	qb "github.com/SigNoz/signoz/pkg/types/querybuildertypes/querybuildertypesv5"
-	"github.com/perses/spec/go/common"
-	"github.com/perses/spec/go/dashboard"
-	"github.com/perses/spec/go/dashboard/variable"
+	v1 "github.com/perses/perses/pkg/model/api/v1"
+	"github.com/perses/perses/pkg/model/api/v1/common"
+	"github.com/perses/perses/pkg/model/api/v1/dashboard"
+	"github.com/perses/perses/pkg/model/api/v1/variable"
 	"github.com/swaggest/jsonschema-go"
 )
 
@@ -28,36 +27,15 @@ type DatasourceSpec struct {
 // ══════════════════════════════════════════════
 
 type Panel struct {
-	Kind PanelKind `json:"kind"`
+	Kind string    `json:"kind"`
 	Spec PanelSpec `json:"spec"`
 }
 
-// PanelKind is the panel envelope discriminator. Perses leaves it a free
-// string; SigNoz locks it to the single valid value.
-type PanelKind string
-
-const PanelKindPanel PanelKind = "Panel"
-
-// Enum surfaces the allowed value in the generated OpenAPI schema.
-func (PanelKind) Enum() []any { return []any{PanelKindPanel} }
-
-func (k *PanelKind) UnmarshalJSON(data []byte) error {
-	var s string
-	if err := json.Unmarshal(data, &s); err != nil {
-		return errors.WrapInvalidInputf(err, ErrCodeDashboardInvalidInput, "invalid panel kind")
-	}
-	if PanelKind(s) != PanelKindPanel {
-		return errors.NewInvalidInputf(ErrCodeDashboardInvalidInput, "unknown panel kind %q; allowed values: %s", s, allowedValuesForKind([]PanelKind{PanelKindPanel}))
-	}
-	*k = PanelKind(s)
-	return nil
-}
-
 type PanelSpec struct {
-	Display *dashboard.PanelDisplay `json:"display,omitempty"`
-	Plugin  PanelPlugin             `json:"plugin"`
-	Queries []Query                 `json:"queries,omitempty"`
-	Links   []dashboard.Link        `json:"links,omitempty"`
+	Display *v1.PanelDisplay `json:"display,omitempty"`
+	Plugin  PanelPlugin      `json:"plugin"`
+	Queries []Query          `json:"queries,omitempty"`
+	Links   []v1.Link        `json:"links,omitempty"`
 }
 
 // ══════════════════════════════════════════════
@@ -65,8 +43,8 @@ type PanelSpec struct {
 // ══════════════════════════════════════════════
 
 type Query struct {
-	Kind qb.RequestType `json:"kind"`
-	Spec QuerySpec      `json:"spec"`
+	Kind string    `json:"kind"`
+	Spec QuerySpec `json:"spec"`
 }
 
 type QuerySpec struct {

pkg/types/dashboardtypes/testdata/perses.json

@@ -132,7 +132,7 @@
                 ],
                 "queries": [
                     {
-                        "kind": "time_series",
+                        "kind": "TimeSeriesQuery",
                         "spec": {
                             "plugin": {
                                 "kind": "signoz/BuilderQuery",
@@ -191,7 +191,7 @@
                 },
                 "queries": [
                     {
-                        "kind": "time_series",
+                        "kind": "TimeSeriesQuery",
                         "spec": {
                             "plugin": {
                                 "kind": "signoz/CompositeQuery",
@@ -269,7 +269,7 @@
                 },
                 "queries": [
                     {
-                        "kind": "time_series",
+                        "kind": "TimeSeriesQuery",
                         "spec": {
                             "plugin": {
                                 "kind": "signoz/BuilderQuery",
@@ -334,7 +334,7 @@
                 },
                 "queries": [
                     {
-                        "kind": "time_series",
+                        "kind": "TimeSeriesQuery",
                         "spec": {
                             "plugin": {
                                 "kind": "signoz/BuilderQuery",
@@ -373,7 +373,7 @@
                 },
                 "queries": [
                     {
-                        "kind": "time_series",
+                        "kind": "TimeSeriesQuery",
                         "spec": {
                             "plugin": {
                                 "kind": "signoz/BuilderQuery",
@@ -418,7 +418,7 @@
                 },
                 "queries": [
                     {
-                        "kind": "time_series",
+                        "kind": "TimeSeriesQuery",
                         "spec": {
                             "plugin": {
                                 "kind": "signoz/BuilderQuery",
@@ -476,7 +476,7 @@
                 },
                 "queries": [
                     {
-                        "kind": "time_series",
+                        "kind": "TimeSeriesQuery",
                         "spec": {
                             "plugin": {
                                 "kind": "signoz/ClickHouseSQL",
@@ -517,7 +517,7 @@
                 },
                 "queries": [
                     {
-                        "kind": "raw",
+                        "kind": "LogQuery",
                         "spec": {
                             "plugin": {
                                 "kind": "signoz/BuilderQuery",
@@ -571,7 +571,7 @@
                 },
                 "queries": [
                     {
-                        "kind": "time_series",
+                        "kind": "TimeSeriesQuery",
                         "spec": {
                             "plugin": {
                                 "kind": "signoz/BuilderQuery",
@@ -610,7 +610,7 @@
                 },
                 "queries": [
                     {
-                        "kind": "time_series",
+                        "kind": "TimeSeriesQuery",
                         "spec": {
                             "plugin": {
                                 "kind": "signoz/CompositeQuery",
@@ -681,7 +681,7 @@
                 },
                 "queries": [
                     {
-                        "kind": "time_series",
+                        "kind": "TimeSeriesQuery",
                         "spec": {
                             "plugin": {
                                 "kind": "signoz/CompositeQuery",
@@ -722,7 +722,7 @@
                 },
                 "queries": [
                     {
-                        "kind": "time_series",
+                        "kind": "TimeSeriesQuery",
                         "spec": {
                             "plugin": {
                                 "kind": "signoz/PromQLQuery",

pkg/types/dashboardtypes/testdata/perses_with_sections.json

@@ -30,7 +30,7 @@
                 },
                 "queries": [
                     {
-                        "kind": "time_series",
+                        "kind": "TimeSeriesQuery",
                         "spec": {
                             "plugin": {
                                 "kind": "signoz/BuilderQuery",
@@ -85,7 +85,7 @@
                 },
                 "queries": [
                     {
-                        "kind": "time_series",
+                        "kind": "TimeSeriesQuery",
                         "spec": {
                             "plugin": {
                                 "kind": "signoz/BuilderQuery",

pkg/types/querybuildertypes/querybuildertypesv5/formula.go

@@ -3,9 +3,11 @@ package querybuildertypesv5
 import (
 	"fmt"
 	"math"
+	"runtime"
 	"strconv"
 	"strings"
 	"sync"
+	"sync/atomic"
 	"time"
 
 	"slices"
@@ -129,12 +131,35 @@ type aggregationRef struct {
 	Alias     *string // Alias-based reference (e.g., A.my_alias)
 }
 
-// seriesLookup provides lookup for series data.
+// seriesEntry holds one series' values and its canonical label signature so that
+// matching can be a map lookup instead of rebuilding maps for every comparison.
+type seriesEntry struct {
+	labels []*Label
+	keys   []string          // sorted label key names
+	sig    string            // canonical value signature over keys
+	data   map[int64]float64 // timestamp -> value
+}
+
+// variableLookup indexes a single variable's (one aggregation's) series.
+type variableLookup struct {
+	// keys is the sorted set of label key names shared by this variable's series
+	// (taken from the first series). Only meaningful when regular is true.
+	keys []string
+	// regular is true when every series shares the same set of label keys, which
+	// is the normal case for a group-by. It lets matching be an O(1) signature
+	// lookup instead of an O(n) subset scan.
+	regular bool
+	// entries holds the series in bucket order; used for the irregular fallback.
+	entries []*seriesEntry
+	// bySig maps a value signature to the first series (in bucket order) carrying
+	// it. It both drives regular-case matching and enumerates the variable's
+	// distinct label sets for findUniqueLabelSets.
+	bySig map[string]*seriesEntry
+}
+
+// seriesLookup provides lookup for series data, grouped by variable.
 type seriesLookup struct {
-	// seriesKey -> timestamp -> value
-	data map[string]map[int64]float64
-	// seriesKey -> original series for metadata preservation
-	seriesMetadata map[string]*TimeSeries
+	byVariable map[string]*variableLookup
 }
 
 // FormulaEvaluator handles formula evaluation b/w time series from different aggregations
@@ -190,6 +215,12 @@ type FormulaEvaluator struct {
 
 	timestampPool sync.Pool
 	valuesPool    sync.Pool
+	// tsSetPool holds map[int64]struct{} scratch maps used to build the union of
+	// timestamps for a label set.
+	tsSetPool sync.Pool
+	// matchedPool holds []map[int64]float64 scratch slices indexed by variable
+	// position, holding each variable's matched series data for a label set.
+	matchedPool sync.Pool
 }
 
 // NewFormulaEvaluator creates a formula evaluator.
@@ -243,6 +274,14 @@ func NewFormulaEvaluator(expressionStr string, canDefaultZero map[string]bool) (
 	evaluator.valuesPool.New = func() any {
 		return make(map[string]any, len(evaluator.variables))
 	}
+	evaluator.tsSetPool.New = func() any {
+		return make(map[int64]struct{}, 512)
+	}
+	nVars := len(evaluator.variables)
+	evaluator.matchedPool.New = func() any {
+		s := make([]map[int64]float64, 0, nVars)
+		return &s
+	}
 
 	return evaluator, nil
 }
@@ -291,55 +330,62 @@ func (fe *FormulaEvaluator) EvaluateFormula(timeSeriesData map[string]*TimeSerie
 	// Find all unique label combinations across referenced series
 	uniqueLabelSets := fe.findUniqueLabelSets(lookup)
 
-	// Process each unique label set
-	var resultSeries []*TimeSeries
-	var wg sync.WaitGroup
-	resultChan := make(chan *TimeSeries, len(uniqueLabelSets))
-	maxSeries := make(chan struct{}, 4)
-
-	// For each candidate label set, evaluate the formula expression
-	// and store the result in the resultChan
-	for _, labelSet := range uniqueLabelSets {
-		wg.Add(1)
-		go func(labels []*Label) {
-			defer wg.Done()
-			maxSeries <- struct{}{}
-			defer func() { <-maxSeries }()
-
-			// main workhorse of the formula evaluation
-			series := fe.evaluateForLabelSet(labels, lookup)
-			if series != nil && len(series.Values) > 0 {
-				resultChan <- series
-			}
-		}(labelSet)
+	n := len(uniqueLabelSets)
+	if n == 0 {
+		return nil, nil
 	}
 
-	go func() {
-		wg.Wait()
-		close(resultChan)
-	}()
+	// Each label set is evaluated independently into its own slot, so we can write
+	// results without any synchronization and compact afterwards. This avoids the
+	// per-label-set goroutine + semaphore + channel churn that previously
+	// dominated the profile (runtime.pthread_cond_signal).
+	results := make([]*TimeSeries, n)
 
-	for series := range resultChan {
-		resultSeries = append(resultSeries, series)
+	// For small inputs the goroutine machinery costs more than it saves.
+	const parallelThreshold = 8
+	if n < parallelThreshold {
+		for i, labelSet := range uniqueLabelSets {
+			results[i] = fe.evaluateForLabelSet(labelSet, lookup)
+		}
+	} else {
+		workers := min(runtime.GOMAXPROCS(0), n)
+		// A shared cursor hands out label-set indices to a fixed pool of workers,
+		// balancing load (series sizes vary) with a single atomic add per item.
+		var next atomic.Int64
+		var wg sync.WaitGroup
+		wg.Add(workers)
+		for range workers {
+			go func() {
+				defer wg.Done()
+				for {
+					i := int(next.Add(1)) - 1
+					if i >= n {
+						return
+					}
+					results[i] = fe.evaluateForLabelSet(uniqueLabelSets[i], lookup)
+				}
+			}()
+		}
+		wg.Wait()
+	}
+
+	// Compact non-empty results in place (results[j] is read before it is
+	// overwritten, since j <= i throughout).
+	resultSeries := results[:0]
+	for _, series := range results {
+		if series != nil && len(series.Values) > 0 {
+			resultSeries = append(resultSeries, series)
+		}
 	}
 
 	return resultSeries, nil
 }
 
-// buildSeriesLookup creates lookup structure for all referenced aggregations.
+// buildSeriesLookup creates the per-variable matching index for all referenced
+// aggregations.
 func (fe *FormulaEvaluator) buildSeriesLookup(timeSeriesData map[string]*TimeSeriesData) *seriesLookup {
 	lookup := &seriesLookup{
-		// data is a map of series key to timestamp to value
-		// series key is a unique identifier for a series
-		// timestamp is the timestamp of the value
-		// value is the value of the series at the timestamp
-		data: make(map[string]map[int64]float64),
-		// seriesMetadata is a map of series key to series metadata
-		// series metadata is the metadata of the series
-		// this is used to preserve the original label structure and metadata
-		// when the series is returned to the caller
-		// It's also used for finding matching series for a variable
-		seriesMetadata: make(map[string]*TimeSeries),
+		byVariable: make(map[string]*variableLookup, len(fe.aggRefs)),
 	}
 
 	for variable, aggRef := range fe.aggRefs {
@@ -360,13 +406,10 @@ func (fe *FormulaEvaluator) buildSeriesLookup(timeSeriesData map[string]*TimeSer
 			continue
 		}
 
-		// Find the specific aggregation bucket
-		// Now, that we have the data for the query, we look for the specific aggregation bucket
-		// referenced in the formula expression.
-		// For example, if the formula expression is `B.2`, the above `data` would be the
-		// time series data for the query B.
-		// The following code will find the aggregation at the index 2
-		// so we can build the series key -> timestamp -> value map for the expr evaluation
+		// Find the specific aggregation bucket referenced in the formula
+		// expression. For example, if the expression is `B.2`, the above `data`
+		// is the time series data for query B and we pick the aggregation at
+		// index 2.
 		var targetBucket *AggregationBucket
 		for _, bucket := range data.Aggregations {
 			if aggRef.Index != nil && bucket.Index == *aggRef.Index {
@@ -383,63 +426,126 @@ func (fe *FormulaEvaluator) buildSeriesLookup(timeSeriesData map[string]*TimeSer
 			continue
 		}
 
-		// Process all series in the target bucket
-		for seriesIdx, series := range targetBucket.Series {
-			seriesKey := fe.buildSeriesKey(variable, seriesIdx, series.Labels)
+		vl := &variableLookup{
+			regular: true,
+			entries: make([]*seriesEntry, 0, len(targetBucket.Series)),
+			bySig:   make(map[string]*seriesEntry, len(targetBucket.Series)),
+		}
 
-			// Initialize timestamp map
-			if _, exists := lookup.data[seriesKey]; !exists {
-				lookup.data[seriesKey] = make(map[int64]float64, len(series.Values))
-				lookup.seriesMetadata[seriesKey] = series
+		// Process all series in the target bucket.
+		for seriesIdx, series := range targetBucket.Series {
+			keys, sig := labelKeysAndSig(series.Labels)
+
+			if seriesIdx == 0 {
+				vl.keys = keys
+			} else if vl.regular && !slices.Equal(keys, vl.keys) {
+				// A series with a different key set means we can no longer rely on
+				// the signature index for subset matching and must fall back to a
+				// scan for this variable.
+				vl.regular = false
 			}
 
-			// Store all timestamp-value pairs
-			for _, value := range series.Values {
-				lookup.data[seriesKey][value.Timestamp] = value.Value
+			entry, seen := vl.bySig[sig]
+			if !seen {
+				entry = &seriesEntry{
+					labels: series.Labels,
+					keys:   keys,
+					sig:    sig,
+					data:   make(map[int64]float64, len(series.Values)),
+				}
+				vl.bySig[sig] = entry
+				vl.entries = append(vl.entries, entry)
+			}
+
+			// Store all timestamp-value pairs. The first series carrying a given
+			// signature wins, matching the original "first match" behaviour; a
+			// later duplicate's points are ignored.
+			if !seen {
+				for _, value := range series.Values {
+					entry.data[value.Timestamp] = value.Value
+				}
 			}
 		}
+
+		lookup.byVariable[variable] = vl
 	}
 
 	return lookup
 }
 
-// buildSeriesKey creates a unique key for a series within a specific aggregation.
-func (fe *FormulaEvaluator) buildSeriesKey(variable string, seriesIndex int, labels []*Label) string {
-	// Create a deterministic key that includes variable and label information
-	// Why is variable name needed?
-	// Because we need to maintain if a certain series belongs to a query.
-	// The variable name here is the name of the query.
-	// Why is series index needed?
-	// Since we support multiple aggregations in the same query, we need to
-	// make use the series index to differentiate between series from different aggregations.
-
-	// Perhaps, we can reduce the allocations here and use the hash of the variable and series index
-	// to create a unique key.
-	// However, the number of labels and series from query result should be small,
-	// and not be a bottleneck.
-	// So, we can keep it simple for now.
-	var keyParts []string
-	keyParts = append(keyParts, variable)
-	keyParts = append(keyParts, strconv.Itoa(seriesIndex))
-
-	// Sort labels by key name for consistent ordering
-	sortedLabels := make([]*Label, len(labels))
-	copy(sortedLabels, labels)
-	slices.SortFunc(sortedLabels, func(i, j *Label) int {
-		if i.Key.Name < j.Key.Name {
-			return -1
-		}
-		if i.Key.Name > j.Key.Name {
-			return 1
-		}
-		return 0
+// labelKeysAndSig returns the sorted label key names and a canonical value
+// signature for a label set. The signature is built so that two label sets with
+// the same keys and values produce identical strings, and so that projecting a
+// superset onto these keys (see projectSig) yields the same string.
+func labelKeysAndSig(labels []*Label) ([]string, string) {
+	n := len(labels)
+	if n == 0 {
+		return nil, ""
+	}
+	sorted := make([]*Label, n)
+	copy(sorted, labels)
+	slices.SortFunc(sorted, func(i, j *Label) int {
+		return strings.Compare(i.Key.Name, j.Key.Name)
 	})
 
-	for _, label := range sortedLabels {
-		keyParts = append(keyParts, fmt.Sprintf("%s=%v", label.Key.Name, label.Value))
+	keys := make([]string, n)
+	var sb strings.Builder
+	sb.Grow(n * 16)
+	for i, label := range sorted {
+		keys[i] = label.Key.Name
+		appendKVSig(&sb, label.Key.Name, label.Value)
 	}
+	return keys, sb.String()
+}
 
-	return strings.Join(keyParts, "|")
+// projectSig builds the signature of labels projected onto keys (which must be
+// sorted). It returns false if labels is missing any of the keys, meaning labels
+// cannot match a target that requires those keys.
+func projectSig(labels []*Label, keys []string) (string, bool) {
+	if len(keys) == 0 {
+		return "", true
+	}
+	var sb strings.Builder
+	sb.Grow(len(keys) * 16)
+	for _, key := range keys {
+		value, ok := findLabelValue(labels, key)
+		if !ok {
+			return "", false
+		}
+		appendKVSig(&sb, key, value)
+	}
+	return sb.String(), true
+}
+
+// appendKVSig appends a single key/value pair to a signature builder using NUL
+// separators, which do not occur in practical label names or values.
+func appendKVSig(sb *strings.Builder, key string, value any) {
+	sb.WriteString(key)
+	sb.WriteByte(0)
+	writeLabelValue(sb, value)
+	sb.WriteByte(0)
+}
+
+// writeLabelValue writes the canonical string form of a label value. Strings are
+// written directly (the common case for telemetry labels); other types fall back
+// to fmt, matching how series are keyed elsewhere (see GetUniqueSeriesKey).
+func writeLabelValue(sb *strings.Builder, value any) {
+	if s, ok := value.(string); ok {
+		sb.WriteString(s)
+		return
+	}
+	fmt.Fprintf(sb, "%v", value)
+}
+
+// findLabelValue returns the value for key in labels, scanning linearly since
+// label sets are small.
+func findLabelValue(labels []*Label, key string) (any, bool) {
+	for _, label := range labels {
+		if label.Key.Name == key {
+			return label.Value, true
+		}
+	}
+	return nil, false
 }
 
 // perhaps this could be named better. The job of this function is to find all unique and supersets
@@ -453,55 +559,117 @@ func (fe *FormulaEvaluator) buildSeriesKey(variable string, seriesIndex int, lab
 // and `{"service": "frontend"}` would be the series with `{"service": "frontend", "operation": "GET /api"}`
 // So, we create a set of labels sets that can be termed as candidates for the final result.
 func (fe *FormulaEvaluator) findUniqueLabelSets(lookup *seriesLookup) [][]*Label {
-	var allLabelSets [][]*Label
-
-	// Collect all label sets from series metadata
-	for _, series := range lookup.seriesMetadata {
-		allLabelSets = append(allLabelSets, series.Labels)
-	}
-
-	// sort the label sets by the number of labels in descending order
-	slices.SortFunc(allLabelSets, func(i, j []*Label) int {
-		if len(i) > len(j) {
-			return -1
-		}
-		if len(i) < len(j) {
-			return 1
-		}
-		return 0
-	})
-
-	// Find unique label sets using proper label comparison
-	var uniqueSets [][]*Label
-	for _, labelSet := range allLabelSets {
-		isUnique := true
-		for _, uniqueSet := range uniqueSets {
-			if fe.isSubset(uniqueSet, labelSet) {
-				isUnique = false
-				break
+	// Collect the distinct label sets across all variables, keyed by their full
+	// canonical signature. bySig already deduplicates within a variable, so this
+	// merges duplicates across variables (e.g. A and B grouped identically).
+	distinct := make(map[string]*seriesEntry)
+	for _, vl := range lookup.byVariable {
+		for sig, entry := range vl.bySig {
+			if _, ok := distinct[sig]; !ok {
+				distinct[sig] = entry
 			}
 		}
-		if isUnique {
-			uniqueSets = append(uniqueSets, labelSet)
+	}
+
+	if len(distinct) == 0 {
+		return nil
+	}
+
+	// Group the distinct sets by their key set. A label set can only be a subset
+	// of another when its keys are a subset of the other's keys, so subset
+	// relationships only ever cross groups. Within a group all sets share the same
+	// keys and distinct values, so none is a subset of another.
+	groups := make(map[string]*keyGroup)
+	for _, entry := range distinct {
+		ksig := strings.Join(entry.keys, "\x00")
+		g := groups[ksig]
+		if g == nil {
+			g = &keyGroup{keys: entry.keys}
+			groups[ksig] = g
+		}
+		g.entries = append(g.entries, entry)
+	}
+
+	// In the overwhelmingly common case every series shares one key set, so there
+	// is exactly one group and nothing can be a subset of anything else.
+	if len(groups) == 1 {
+		result := make([][]*Label, 0, len(distinct))
+		for _, entry := range distinct {
+			result = append(result, entry.labels)
+		}
+		return result
+	}
+
+	// Otherwise, mark as "covered" every signature that is dominated by a set from
+	// a group with a strictly larger key set: project the larger set's labels onto
+	// the smaller key set and that projection covers any equal set there. A set is
+	// kept iff it is not covered (i.e. it is maximal).
+	groupList := make([]*keyGroup, 0, len(groups))
+	for _, g := range groups {
+		groupList = append(groupList, g)
+	}
+
+	covered := make(map[string]bool)
+	for _, gy := range groupList { // provider of supersets
+		for _, gx := range groupList { // smaller key set being dominated
+			if gx == gy || !keysSubset(gx.keys, gy.keys) {
+				continue
+			}
+			for _, y := range gy.entries {
+				if sig, ok := projectSig(y.labels, gx.keys); ok {
+					covered[sig] = true
+				}
+			}
 		}
 	}
 
-	return uniqueSets
+	result := make([][]*Label, 0, len(distinct))
+	for sig, entry := range distinct {
+		if !covered[sig] {
+			result = append(result, entry.labels)
+		}
+	}
+	return result
 }
 
-func (fe *FormulaEvaluator) isSubset(labels1, labels2 []*Label) bool {
-	labelMap1 := make(map[string]any)
-	labelMap2 := make(map[string]any)
+// keyGroup holds the distinct label sets that share a key set.
+type keyGroup struct {
+	keys    []string
+	entries []*seriesEntry
+}
 
-	for _, label := range labels1 {
-		labelMap1[label.Key.Name] = label.Value
+// keysSubset reports whether the sorted key set a is a subset of the sorted key
+// set b.
+func keysSubset(a, b []string) bool {
+	if len(a) > len(b) {
+		return false
 	}
-	for _, label := range labels2 {
-		labelMap2[label.Key.Name] = label.Value
+	i := 0
+	for _, x := range a {
+		for i < len(b) && b[i] < x {
+			i++
+		}
+		if i >= len(b) || b[i] != x {
+			return false
+		}
+		i++
 	}
+	return true
+}
 
-	for k, v := range labelMap2 {
-		if val, ok := labelMap1[k]; !ok || val != v {
+func labelsToMap(labels []*Label) map[string]any {
+	m := make(map[string]any, len(labels))
+	for _, label := range labels {
+		m[label.Key.Name] = label.Value
+	}
+	return m
+}
+
+// isSubset reports whether every label in subset is present with the same value in
+// supersetMap (i.e. subset ⊆ superset).
+func isSubset(supersetMap map[string]any, subset []*Label) bool {
+	for _, label := range subset {
+		if val, ok := supersetMap[label.Key.Name]; !ok || val != label.Value {
 			return false
 		}
 	}
@@ -510,65 +678,113 @@ func (fe *FormulaEvaluator) isSubset(labels1, labels2 []*Label) bool {
 
 // evaluateForLabelSet performs formula evaluation for a specific label set.
 func (fe *FormulaEvaluator) evaluateForLabelSet(targetLabels []*Label, lookup *seriesLookup) *TimeSeries {
-	// Find matching series for each variable
-	variableData := make(map[string]map[int64]float64)
-	// not every series would have a value for every timestamp
-	// so we need to collect all timestamps from the series that have a value
-	// for the variable
-	var allTimestamps = make(map[int64]struct{})
+	nVars := len(fe.variables)
 
-	for variable := range fe.aggRefs {
-		// Find series with matching labels for this variable
-		for seriesKey, series := range lookup.seriesMetadata {
-			if strings.HasPrefix(seriesKey, variable+"|") && fe.isSubset(targetLabels, series.Labels) {
-				if timestampData, exists := lookup.data[seriesKey]; exists {
-					variableData[variable] = timestampData
-					// Collect all timestamps
-					for ts := range timestampData {
-						allTimestamps[ts] = struct{}{}
-					}
-					break // Found matching series for this variable
+	// matched[i] holds the timestamp->value data for fe.variables[i], or nil if
+	// no series matched. Indexed by position to avoid a per-call map.
+	mptr := fe.matchedPool.Get().(*[]map[int64]float64)
+	matched := *mptr
+	if cap(matched) < nVars {
+		matched = make([]map[int64]float64, nVars)
+	} else {
+		matched = matched[:nVars]
+		for i := range matched {
+			matched[i] = nil
+		}
+	}
+	defer func() {
+		*mptr = matched[:0]
+		fe.matchedPool.Put(mptr)
+	}()
+
+	// not every series has a value for every timestamp, so collect the union of
+	// timestamps across the matched series.
+	allTimestamps := fe.tsSetPool.Get().(map[int64]struct{})
+	clear(allTimestamps)
+	defer fe.tsSetPool.Put(allTimestamps)
+
+	// targetMap is only needed for the irregular fallback; built lazily.
+	var targetMap map[string]any
+
+	for i, variable := range fe.variables {
+		vl := lookup.byVariable[variable]
+		if vl == nil {
+			continue
+		}
+
+		var data map[int64]float64
+		if vl.regular {
+			// Fast path: the matching series (labels ⊆ target) is exactly the one
+			// whose signature equals the target projected onto this variable's keys.
+			if sig, ok := projectSig(targetLabels, vl.keys); ok {
+				if e := vl.bySig[sig]; e != nil {
+					data = e.data
 				}
 			}
+		} else {
+			// Fallback: series have mixed key sets, so scan for the first subset.
+			if targetMap == nil {
+				targetMap = labelsToMap(targetLabels)
+			}
+			for _, e := range vl.entries {
+				if isSubset(targetMap, e.labels) {
+					data = e.data
+					break
+				}
+			}
+		}
+
+		if data != nil {
+			matched[i] = data
+			for ts := range data {
+				allTimestamps[ts] = struct{}{}
+			}
 		}
 	}
 
-	// Convert timestamps to sorted slice
+	// Convert timestamps to a sorted slice.
 	tsPtr := fe.timestampPool.Get().(*[]int64)
 	timestamps := (*tsPtr)[:0]
+	for ts := range allTimestamps {
+		timestamps = append(timestamps, ts)
+	}
+	slices.Sort(timestamps)
 	defer func() {
 		*tsPtr = timestamps[:0]
 		fe.timestampPool.Put(tsPtr)
 	}()
 
-	for ts := range allTimestamps {
-		timestamps = append(timestamps, ts)
+	if len(timestamps) == 0 {
+		return nil
 	}
-	slices.Sort(timestamps)
 
-	// Evaluate formula at each timestamp
-	var resultValues []*TimeSeriesValue
 	values := fe.valuesPool.Get().(map[string]any)
 	defer fe.valuesPool.Put(values)
 
-	for _, timestamp := range timestamps {
-		// Clear previous values
-		for k := range values {
-			delete(values, k)
-		}
+	// Allocate the values backing array once (cap = number of timestamps); the
+	// returned pointers reference into it, so no per-point allocation is needed.
+	backing := make([]TimeSeriesValue, 0, len(timestamps))
 
-		// Collect values for this timestamp
+	for _, timestamp := range timestamps {
+		clear(values)
+
+		// Collect values for this timestamp. fe.variables may contain a variable
+		// more than once (e.g. "A * B - A"); values is keyed by name, but each
+		// data-present occurrence still increments validCount, matching the target
+		// count of len(fe.variables) below.
 		validCount := 0
-		for _, variable := range fe.variables {
-			if varData, exists := variableData[variable]; exists {
-				if value, exists := varData[timestamp]; exists {
+		for i, variable := range fe.variables {
+			if data := matched[i]; data != nil {
+				if value, exists := data[timestamp]; exists {
 					values[variable] = value
 					validCount++
 				}
 			}
 		}
 
-		// Apply default zeros where allowed
+		// Apply default zeros where allowed. A defaulted variable is only counted
+		// once even if it appears multiple times, since the second occurrence finds
+		// the value already set.
 		for _, variable := range fe.variables {
 			if _, exists := values[variable]; !exists && fe.canDefaultZero[variable] {
 				values[variable] = 0.0
@@ -576,12 +792,11 @@ func (fe *FormulaEvaluator) evaluateForLabelSet(targetLabels []*Label, lookup *s
 			}
 		}
 
-		// Skip if we don't have all required variables
-		if validCount != len(fe.variables) {
+		// Skip if we don't have all required variables.
+		if validCount != nVars {
 			continue
 		}
 
-		// Evaluate expression
 		result, err := fe.expression.Evaluate(values)
 		if err != nil {
 			continue
@@ -592,17 +807,22 @@ func (fe *FormulaEvaluator) evaluateForLabelSet(targetLabels []*Label, lookup *s
 			continue
 		}
 
-		resultValues = append(resultValues, &TimeSeriesValue{
+		backing = append(backing, TimeSeriesValue{
 			Timestamp: timestamp,
 			Value:     value,
 		})
 	}
 
-	if len(resultValues) == 0 {
+	if len(backing) == 0 {
 		return nil
 	}
 
-	// Preserve original label structure and metadata
+	resultValues := make([]*TimeSeriesValue, len(backing))
+	for i := range backing {
+		resultValues[i] = &backing[i]
+	}
+
+	// Preserve the original label structure for the result series.
 	resultLabels := make([]*Label, len(targetLabels))
 	copy(resultLabels, targetLabels)
 

pkg/types/querybuildertypes/querybuildertypesv5/formula_diff_test.go

@@ -0,0 +1,341 @@
+package querybuildertypesv5
+
+import (
+	"fmt"
+	"math"
+	"math/rand"
+	"slices"
+	"sort"
+	"strings"
+	"testing"
+
+	"github.com/SigNoz/signoz/pkg/types/telemetrytypes"
+	"github.com/stretchr/testify/require"
+)
+
+// referenceEvaluate is an intentionally naive, self-contained reimplementation of
+// the formula evaluation semantics. It mirrors the documented behaviour:
+//   - unique label sets are the maximal sets (a set that is a subset of another
+//     distinct set is dropped), deduped;
+//   - for each unique target, a variable matches via the FIRST series (in bucket
+//     order) whose labels are a subset of the target (empty labels match all);
+//   - a missing variable defaults to zero when canDefaultZero is set, otherwise
+//     that timestamp is skipped;
+//   - NaN/Inf results are dropped.
+//
+// It is deliberately O(n^2) and free of the optimisations under test so it can
+// act as a semantic oracle for the differential test below.
+func referenceEvaluate(t *testing.T, expr string, canDefaultZero map[string]bool, tsData map[string]*TimeSeriesData) []*TimeSeries {
+	t.Helper()
+	fe, err := NewFormulaEvaluator(expr, canDefaultZero)
+	require.NoError(t, err)
+
+	type refSeries struct {
+		labels []*Label
+		data   map[int64]float64
+	}
+
+	subset := func(a, b []*Label) bool { // a ⊆ b
+		bm := make(map[string]any, len(b))
+		for _, l := range b {
+			bm[l.Key.Name] = l.Value
+		}
+		for _, l := range a {
+			if v, ok := bm[l.Key.Name]; !ok || v != l.Value {
+				return false
+			}
+		}
+		return true
+	}
+
+	varSeries := map[string][]refSeries{}
+	var allLabelSets [][]*Label
+
+	for variable, aggRef := range fe.aggRefs {
+		data, ok := tsData[aggRef.QueryName]
+		if !ok {
+			for k, v := range tsData {
+				if strings.EqualFold(k, aggRef.QueryName) {
+					data, ok = v, true
+					break
+				}
+			}
+		}
+		if !ok {
+			continue
+		}
+		var bucket *AggregationBucket
+		for _, b := range data.Aggregations {
+			if aggRef.Index != nil && b.Index == *aggRef.Index {
+				bucket = b
+				break
+			}
+			if aggRef.Alias != nil && b.Alias == *aggRef.Alias {
+				bucket = b
+				break
+			}
+		}
+		if bucket == nil {
+			continue
+		}
+		for _, s := range bucket.Series {
+			d := make(map[int64]float64, len(s.Values))
+			for _, v := range s.Values {
+				d[v.Timestamp] = v.Value
+			}
+			varSeries[variable] = append(varSeries[variable], refSeries{labels: s.Labels, data: d})
+			allLabelSets = append(allLabelSets, s.Labels)
+		}
+	}
+
+	sort.SliceStable(allLabelSets, func(i, j int) bool { return len(allLabelSets[i]) > len(allLabelSets[j]) })
+	var unique [][]*Label
+	for _, ls := range allLabelSets {
+		u := true
+		for _, us := range unique {
+			if subset(ls, us) {
+				u = false
+				break
+			}
+		}
+		if u {
+			unique = append(unique, ls)
+		}
+	}
+
+	var out []*TimeSeries
+	for _, target := range unique {
+		matched := map[string]map[int64]float64{}
+		allTs := map[int64]struct{}{}
+		for variable := range fe.aggRefs {
+			for _, s := range varSeries[variable] {
+				if subset(s.labels, target) {
+					matched[variable] = s.data
+					for ts := range s.data {
+						allTs[ts] = struct{}{}
+					}
+					break
+				}
+			}
+		}
+		var tss []int64
+		for ts := range allTs {
+			tss = append(tss, ts)
+		}
+		slices.Sort(tss)
+
+		var vals []*TimeSeriesValue
+		for _, ts := range tss {
+			m := map[string]any{}
+			cnt := 0
+			for _, variable := range fe.variables {
+				if d, ok := matched[variable]; ok {
+					if v, ok := d[ts]; ok {
+						m[variable] = v
+						cnt++
+					}
+				}
+			}
+			for _, variable := range fe.variables {
+				if _, ok := m[variable]; !ok && fe.canDefaultZero[variable] {
+					m[variable] = 0.0
+					cnt++
+				}
+			}
+			if cnt != len(fe.variables) {
+				continue
+			}
+			res, err := fe.expression.Evaluate(m)
+			if err != nil {
+				continue
+			}
+			f, ok := res.(float64)
+			if !ok || math.IsNaN(f) || math.IsInf(f, 0) {
+				continue
+			}
+			vals = append(vals, &TimeSeriesValue{Timestamp: ts, Value: f})
+		}
+		if len(vals) == 0 {
+			continue
+		}
+		rl := make([]*Label, len(target))
+		copy(rl, target)
+		out = append(out, &TimeSeries{Labels: rl, Values: vals})
+	}
+	return out
+}
+
+// canonicalize turns a result set into a comparable map: labelSig -> ts -> value.
+func canonicalize(series []*TimeSeries) map[string]map[int64]float64 {
+	out := make(map[string]map[int64]float64, len(series))
+	for _, s := range series {
+		keys := make([]string, 0, len(s.Labels))
+		kv := make(map[string]string, len(s.Labels))
+		for _, l := range s.Labels {
+			keys = append(keys, l.Key.Name)
+			kv[l.Key.Name] = fmt.Sprintf("%v", l.Value)
+		}
+		sort.Strings(keys)
+		var sb strings.Builder
+		for _, k := range keys {
+			sb.WriteString(k)
+			sb.WriteByte('=')
+			sb.WriteString(kv[k])
+			sb.WriteByte('|')
+		}
+		m := make(map[int64]float64, len(s.Values))
+		for _, v := range s.Values {
+			m[v.Timestamp] = v.Value
+		}
+		out[sb.String()] = m
+	}
+	return out
+}
+
+func assertSameResults(t *testing.T, caseName string, got, want []*TimeSeries) {
+	t.Helper()
+	gc := canonicalize(got)
+	wc := canonicalize(want)
+	if len(gc) != len(wc) {
+		t.Fatalf("%s: series count mismatch: got %d, want %d\ngot keys=%v\nwant keys=%v",
+			caseName, len(gc), len(wc), keysOf(gc), keysOf(wc))
+	}
+	for sig, wm := range wc {
+		gm, ok := gc[sig]
+		if !ok {
+			t.Fatalf("%s: missing series %q in got", caseName, sig)
+		}
+		if len(gm) != len(wm) {
+			t.Fatalf("%s: series %q point count mismatch: got %d want %d", caseName, sig, len(gm), len(wm))
+		}
+		for ts, wv := range wm {
+			gv, ok := gm[ts]
+			if !ok {
+				t.Fatalf("%s: series %q missing ts %d", caseName, sig, ts)
+			}
+			if math.Abs(gv-wv) > 1e-9 {
+				t.Fatalf("%s: series %q ts %d value mismatch: got %v want %v", caseName, sig, ts, gv, wv)
+			}
+		}
+	}
+}
+
+func keysOf(m map[string]map[int64]float64) []string {
+	ks := make([]string, 0, len(m))
+	for k := range m {
+		ks = append(ks, k)
+	}
+	sort.Strings(ks)
+	return ks
+}
+
+// randomTSData builds randomized time series data for a query, exercising both
+// the "regular" case (all series share a key set) and the "irregular" case
+// (series have differing key sets), plus empty label sets and overlaps.
+func randomTSData(rng *rand.Rand, queryName string) *TimeSeriesData {
+	keyPool := []string{"svc", "op", "env"}
+	valPool := []string{"x", "y", "z"}
+	tsPool := []int64{1, 2, 3, 4, 5}
+
+	// Decide a base key set for the query.
+	regular := rng.Intn(2) == 0
+	baseKeys := randomSubset(rng, keyPool)
+
+	numSeries := rng.Intn(6) // 0..5
+	series := make([]*TimeSeries, 0, numSeries)
+	for range numSeries {
+		keys := baseKeys
+		if !regular {
+			keys = randomSubset(rng, keyPool)
+		}
+		labels := make([]*Label, 0, len(keys))
+		for _, k := range keys {
+			labels = append(labels, &Label{
+				Key:   telemetrytypes.TelemetryFieldKey{Name: k, FieldDataType: telemetrytypes.FieldDataTypeString},
+				Value: valPool[rng.Intn(len(valPool))],
+			})
+		}
+		// random timestamps subset
+		var values []*TimeSeriesValue
+		for _, ts := range tsPool {
+			if rng.Intn(3) == 0 {
+				continue
+			}
+			values = append(values, &TimeSeriesValue{Timestamp: ts, Value: float64(rng.Intn(100) + 1)})
+		}
+		if len(values) == 0 {
+			values = append(values, &TimeSeriesValue{Timestamp: tsPool[0], Value: float64(rng.Intn(100) + 1)})
+		}
+		series = append(series, &TimeSeries{Labels: labels, Values: values})
+	}
+
+	return &TimeSeriesData{
+		QueryName: queryName,
+		Aggregations: []*AggregationBucket{
+			{Index: 0, Alias: queryName + "_agg", Series: series},
+		},
+	}
+}
+
+func randomSubset(rng *rand.Rand, pool []string) []string {
+	var out []string
+	for _, k := range pool {
+		if rng.Intn(2) == 0 {
+			out = append(out, k)
+		}
+	}
+	return out
+}
+
+// TestFormulaEvaluator_DifferentialRandom fuzzes EvaluateFormula against the
+// naive reference oracle to guarantee the optimized implementation preserves
+// exact semantics across subset matching, empty labels, defaults and irregular
+// key sets.
+func TestFormulaEvaluator_DifferentialRandom(t *testing.T) {
+	rng := rand.New(rand.NewSource(0xC0FFEE))
+
+	type exprCase struct {
+		expr string
+		vars []string
+	}
+	twoVar := []exprCase{
+		{"A + B", []string{"A", "B"}},
+		{"A / B", []string{"A", "B"}},
+		{"B / A", []string{"A", "B"}},
+		{"A * B - A", []string{"A", "B"}},
+	}
+	threeVar := []exprCase{
+		{"A + B + C", []string{"A", "B", "C"}},
+		{"(A + B) / C", []string{"A", "B", "C"}},
+		{"A / B + C", []string{"A", "B", "C"}},
+	}
+
+	const iterations = 5000
+	for it := range iterations {
+		var ec exprCase
+		if rng.Intn(2) == 0 {
+			ec = twoVar[rng.Intn(len(twoVar))]
+		} else {
+			ec = threeVar[rng.Intn(len(threeVar))]
+		}
+
+		canDefaultZero := map[string]bool{}
+		for _, v := range ec.vars {
+			canDefaultZero[v] = rng.Intn(2) == 0
+		}
+
+		tsData := map[string]*TimeSeriesData{}
+		for _, v := range ec.vars {
+			tsData[v] = randomTSData(rng, v)
+		}
+
+		evaluator, err := NewFormulaEvaluator(ec.expr, canDefaultZero)
+		require.NoError(t, err)
+		got, err := evaluator.EvaluateFormula(tsData)
+		require.NoError(t, err)
+
+		want := referenceEvaluate(t, ec.expr, canDefaultZero, tsData)
+
+		assertSameResults(t, fmt.Sprintf("iter=%d expr=%q", it, ec.expr), got, want)
+	}
+}

pkg/types/querybuildertypes/querybuildertypesv5/request_type.go

@@ -1,32 +1,11 @@
 package querybuildertypesv5
 
-import (
-	"encoding/json"
-
-	"github.com/SigNoz/signoz/pkg/errors"
-	"github.com/SigNoz/signoz/pkg/valuer"
-)
+import "github.com/SigNoz/signoz/pkg/valuer"
 
 type RequestType struct {
 	valuer.String
 }
 
-// UnmarshalJSON rejects values that are not a known request type.
-func (r *RequestType) UnmarshalJSON(data []byte) error {
-	var s string
-	if err := json.Unmarshal(data, &s); err != nil {
-		return errors.NewInvalidInputf(errors.CodeInvalidInput, "invalid request type: must be a string")
-	}
-	v := RequestType{valuer.NewString(s)}
-	switch v {
-	case RequestTypeScalar, RequestTypeTimeSeries, RequestTypeRaw, RequestTypeRawStream, RequestTypeTrace, RequestTypeDistribution:
-		*r = v
-		return nil
-	default:
-		return errors.NewInvalidInputf(errors.CodeInvalidInput, "unknown request type %q; allowed values: %s", s, "`scalar`, `time_series`, `raw`, `raw_stream`, `trace`, `distribution`")
-	}
-}
-
 var (
 	RequestTypeUnknown = RequestType{valuer.NewString("")}
 	// Scalar result(s), example: number panel, and table panel.

tests/integration/tests/cloudintegrations/05_services.py

@@ -151,6 +151,7 @@ def test_get_service_details_without_account(
     assert "overview" in data, "Service should have 'overview' (markdown)"
     assert "assets" in data, "Service should have 'assets'"
     assert isinstance(data["assets"]["dashboards"], list), "assets.dashboards should be a list"
+    assert "telemetryCollectionStrategy" in data, "Service should have 'telemetryCollectionStrategy'"
     assert data["cloudIntegrationService"] is None, "cloudIntegrationService should be null without account context"
 
 
@@ -182,34 +183,6 @@ def test_get_service_details_with_account(
     assert data["cloudIntegrationService"] is None, "cloudIntegrationService should be null before any service config is set"
 
 
-def test_get_account_service(
-    signoz: types.SigNoz,
-    create_user_admin: types.Operation,  # pylint: disable=unused-argument
-    get_token: Callable[[str, str], str],
-    create_cloud_integration_account: Callable,
-) -> None:
-    """Get service for a specific account — all disabled by default."""
-    admin_token = get_token(USER_ADMIN_EMAIL, USER_ADMIN_PASSWORD)
-
-    account = create_cloud_integration_account(admin_token, CLOUD_PROVIDER)
-    account_id = account["id"]
-
-    checkin = simulate_agent_checkin(signoz, admin_token, CLOUD_PROVIDER, account_id, str(uuid.uuid4()))
-    assert checkin.status_code == HTTPStatus.OK, f"Check-in failed: {checkin.text}"
-
-    response = requests.get(
-        signoz.self.host_configs["8080"].get(f"/api/v1/cloud_integrations/{CLOUD_PROVIDER}/accounts/{account_id}/services/{SERVICE_ID}"),
-        headers={"Authorization": f"Bearer {admin_token}"},
-        timeout=10,
-    )
-
-    assert response.status_code == HTTPStatus.OK, f"Expected 200, got {response.status_code}"
-
-    data = response.json()["data"]
-    assert data["id"] == SERVICE_ID, f"id should be '{SERVICE_ID}'"
-    assert data["cloudIntegrationService"] is None, "cloudIntegrationService should be null before any config is set"
-
-
 def test_get_service_not_found(
     signoz: types.SigNoz,
     create_user_admin: types.Operation,  # pylint: disable=unused-argument
@@ -483,12 +456,12 @@ def test_enable_metrics_provisions_dashboards(
     assert isinstance(dashboards_in_service, list) and len(dashboards_in_service) > 0, "assets.dashboards should be non-empty after enabling metrics"
     provisioned_ids = set()
     for dash in dashboards_in_service:
-        assert "integrationDashboard" in dash, f"Integration dashboard entry missing"
+        assert "id" in dash, f"Dashboard entry missing 'id': {dash}"
         try:
-            uuid.UUID(dash["integrationDashboard"]["id"])
+            uuid.UUID(dash["id"])
         except ValueError as err:
-            raise AssertionError(f"Dashboard id '{dash['integrationDashboard']['id']}' is not a UUID — dashboard was not provisioned") from err
-        provisioned_ids.add(dash["integrationDashboard"]["dashboardId"])
+            raise AssertionError(f"Dashboard id '{dash['id']}' is not a UUID — dashboard was not provisioned") from err
+        provisioned_ids.add(dash["id"])
 
     # Assertion 2: Provisioned dashboard IDs are present in the DB
     with signoz.sqlstore.conn.connect() as conn:
@@ -538,7 +511,7 @@ def test_disable_metrics_deprovisions_dashboards(
         timeout=10,
     )
     assert get_svc_response.status_code == HTTPStatus.OK
-    provisioned_ids = {d["integrationDashboard"]["dashboardId"] for d in get_svc_response.json()["data"]["assets"]["dashboards"]}
+    provisioned_ids = {d["id"] for d in get_svc_response.json()["data"]["assets"]["dashboards"]}
     assert len(provisioned_ids) > 0, "Expected dashboards to be provisioned after enabling metrics"
 
     # Disable metrics