chore: fix lint error due to rebase

When the BE rejects the search query with a 4xx, show the server-
provided detail (e.g. `invalid filter query: unsupported expression
"asdas" — every term must be of the form \`key OP value\``) instead
of the generic "Something went wrong" panel.

  - ErrorState gains optional httpStatus + errorMessage props.
    For 4xx it renders a two-line layout (title + cleaned detail)
    and drops the Retry button (retrying the same bad query won't
    help). Contact Support stays.
  - Add formatQueryErrorMessage util: strips the "invalid filter
    query:" prefix that the FE title already implies, and rewrites
    backtick-quoted format hints to use double quotes.
  - DashboardsList extracts status + message via toAPIError and
    passes them through. Search toolbar remains visible above the
    error, so the user can fix and resubmit.

docs/api/openapi.yml

@@ -7965,80 +7965,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/generated/services/cloudintegration/index.ts

@@ -31,8 +31,6 @@ import type {
 	DisconnectAccountPathParameters,
 	GetAccount200,
 	GetAccountPathParameters,
-	GetAccountService200,
-	GetAccountServicePathParameters,
 	GetConnectionCredentials200,
 	GetConnectionCredentialsPathParameters,
 	GetService200,
@@ -633,117 +631,6 @@ export const useUpdateAccount = <
 > => {
 	return useMutation(getUpdateAccountMutationOptions(options));
 };
-/**
- * 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

@@ -8566,19 +8566,6 @@ export type UpdateAccountPathParameters = {
 	cloudProvider: string;
 	id: 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/constants/localStorage.ts

@@ -42,4 +42,5 @@ export enum LOCALSTORAGE {
 	LICENSE_KEY_CALLOUT_DISMISSED = 'LICENSE_KEY_CALLOUT_DISMISSED',
 	DASHBOARD_PREFERENCES = 'DASHBOARD_PREFERENCES',
 	ACTIVE_SIGNOZ_INSTANCE_URL = 'ACTIVE_SIGNOZ_INSTANCE_URL',
+	DASHBOARDS_LIST_VISIBLE_COLUMNS = 'DASHBOARDS_LIST_VISIBLE_COLUMNS',
 }

frontend/src/hooks/useIsDashboardV2.ts

@@ -0,0 +1,10 @@
+import { FeatureKeys } from 'constants/features';
+import { useAppContext } from 'providers/App/App';
+
+export function useIsDashboardV2(): boolean {
+	const { featureFlags } = useAppContext();
+	return Boolean(
+		featureFlags?.find((flag) => flag.name === FeatureKeys.USE_DASHBOARD_V2)
+			?.active,
+	);
+}

frontend/src/pages/DashboardPageV2/DashboardPageV2.tsx

@@ -0,0 +1,5 @@
+function DashboardPageV2(): JSX.Element {
+	return <>DashboardPageV2</>;
+}
+
+export default DashboardPageV2;

frontend/src/pages/DashboardPageV2/index.tsx

@@ -1,8 +1,3 @@
-function DashboardPageV2(): JSX.Element {
-	return (
-		<div>
-			<h1>Dashboard Page V2</h1>
-		</div>
-	);
-}
+import DashboardPageV2 from './DashboardPageV2';
+
 export default DashboardPageV2;

frontend/src/pages/DashboardsListPageV2/DashboardsListPageV2.module.scss

@@ -0,0 +1,35 @@
+.page {
+	display: flex;
+	flex-direction: column;
+	gap: 16px;
+	width: 100%;
+}
+
+.header {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: 0 8px;
+	gap: 8px;
+	height: 48px;
+}
+
+.headerLeft {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+}
+
+.icon {
+	color: var(--l2-foreground);
+}
+
+.text {
+	color: var(--muted-foreground);
+	font-family: Inter;
+	font-size: var(--font-size-sm);
+	font-style: normal;
+	font-weight: var(--font-weight-normal);
+	line-height: 20px;
+	letter-spacing: -0.07px;
+}

frontend/src/pages/DashboardsListPageV2/DashboardsListPageV2.tsx

@@ -0,0 +1,41 @@
+import { useState } from 'react';
+import { AnnouncementBanner } from '@signozhq/ui/announcement-banner';
+import { Typography } from '@signozhq/ui/typography';
+import { LayoutGrid } from '@signozhq/icons';
+
+import HeaderRightSection from 'components/HeaderRightSection/HeaderRightSection';
+import DashboardsList from './components/DashboardsList';
+
+import styles from './DashboardsListPageV2.module.scss';
+
+function DashboardsListPageV2(): JSX.Element {
+	const [showBanner, setShowBanner] = useState(true);
+
+	return (
+		<div className={styles.page}>
+			{showBanner && (
+				<AnnouncementBanner
+					type="warning"
+					onClose={(): void => setShowBanner(false)}
+				>
+					You&apos;re on the V2 dashboards page. If you landed here unintentionally,
+					please reach out to Ashwin.
+				</AnnouncementBanner>
+			)}
+			<div className={styles.header}>
+				<div className={styles.headerLeft}>
+					<LayoutGrid size={14} className={styles.icon} />
+					<Typography.Text className={styles.text}>Dashboards</Typography.Text>
+				</div>
+				<HeaderRightSection
+					enableAnnouncements={false}
+					enableShare
+					enableFeedback
+				/>
+			</div>
+			<DashboardsList />
+		</div>
+	);
+}
+
+export default DashboardsListPageV2;

frontend/src/pages/DashboardsListPageV2/components/ActionsPopover/ActionsPopover.module.scss

@@ -0,0 +1,28 @@
+.content {
+	display: flex;
+	flex-direction: column;
+}
+
+// Make signoz ghost-Button rows fill the popover and left-align their label.
+.menuItem {
+	width: 100%;
+	justify-content: flex-start;
+}
+
+:global(.dashboardActionsPopover) {
+	:global(.ant-popover-inner) {
+		width: 200px;
+		height: auto;
+		flex-shrink: 0;
+		border-radius: 4px;
+		border: 1px solid var(--l1-border);
+		background: linear-gradient(
+			139deg,
+			color-mix(in srgb, var(--card) 80%, transparent) 0%,
+			color-mix(in srgb, var(--card) 90%, transparent) 98.68%
+		);
+		box-shadow: 4px 10px 16px 2px rgba(0, 0, 0, 0.2);
+		backdrop-filter: blur(20px);
+		padding: 0px;
+	}
+}

frontend/src/pages/DashboardsListPageV2/components/ActionsPopover/ActionsPopover.tsx

@@ -0,0 +1,103 @@
+import { Popover } from 'antd';
+import { Button } from '@signozhq/ui/button';
+import {
+	Expand,
+	EllipsisVertical,
+	Link2,
+	SquareArrowOutUpRight,
+} from '@signozhq/icons';
+import { useCopyToClipboard } from 'react-use';
+import { getAbsoluteUrl } from 'utils/basePath';
+import { openInNewTab } from 'utils/navigation';
+
+import DeleteActionItem from './DeleteActionItem';
+import styles from './ActionsPopover.module.scss';
+
+interface Props {
+	link: string;
+	dashboardId: string;
+	dashboardName: string;
+	createdBy: string;
+	isLocked: boolean;
+	onView: (event: React.MouseEvent<HTMLElement>) => void;
+}
+
+function ActionsPopover({
+	link,
+	dashboardId,
+	dashboardName,
+	createdBy,
+	isLocked,
+	onView,
+}: Props): JSX.Element {
+	const [, setCopy] = useCopyToClipboard();
+
+	return (
+		<Popover
+			content={
+				<div className={styles.content}>
+					<Button
+						color="secondary"
+						className={styles.menuItem}
+						prefix={<Expand size={14} />}
+						onClick={onView}
+						testId="dashboard-action-view"
+					>
+						View
+					</Button>
+					<Button
+						color="secondary"
+						className={styles.menuItem}
+						prefix={<SquareArrowOutUpRight size={14} />}
+						onClick={(e): void => {
+							e.stopPropagation();
+							e.preventDefault();
+							openInNewTab(link);
+						}}
+						testId="dashboard-action-open-new-tab"
+					>
+						Open in New Tab
+					</Button>
+					<Button
+						color="secondary"
+						className={styles.menuItem}
+						prefix={<Link2 size={14} />}
+						onClick={(e): void => {
+							e.stopPropagation();
+							e.preventDefault();
+							setCopy(getAbsoluteUrl(link));
+						}}
+						testId="dashboard-action-copy-link"
+					>
+						Copy Link
+					</Button>
+					<DeleteActionItem
+						dashboardId={dashboardId}
+						dashboardName={dashboardName}
+						createdBy={createdBy}
+						isLocked={isLocked}
+					/>
+				</div>
+			}
+			placement="bottomRight"
+			arrow={false}
+			rootClassName="dashboardActionsPopover"
+			trigger="click"
+		>
+			<Button
+				size="icon"
+				variant="ghost"
+				color="secondary"
+				testId="dashboard-action-icon"
+				onClick={(e): void => {
+					e.stopPropagation();
+					e.preventDefault();
+				}}
+			>
+				<EllipsisVertical size={14} />
+			</Button>
+		</Popover>
+	);
+}
+
+export default ActionsPopover;

frontend/src/pages/DashboardsListPageV2/components/ActionsPopover/DeleteActionItem.tsx

@@ -0,0 +1,122 @@
+import { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useMutation, useQueryClient } from 'react-query';
+import { Modal, Tooltip } from 'antd';
+import { Button } from '@signozhq/ui/button';
+import { CircleAlert, Trash2 } from '@signozhq/icons';
+import { toast } from '@signozhq/ui/sonner';
+import { Divider } from '@signozhq/ui/divider';
+import { Typography } from '@signozhq/ui/typography';
+import deleteDashboard from 'api/v1/dashboards/id/delete';
+import { invalidateListDashboardsV2 } from 'api/generated/services/dashboard';
+import { useAppContext } from 'providers/App/App';
+import { useErrorModal } from 'providers/ErrorModalProvider';
+import APIError from 'types/api/error';
+import { USER_ROLES } from 'types/roles';
+
+import styles from './ActionsPopover.module.scss';
+
+interface Props {
+	dashboardId: string;
+	dashboardName: string;
+	createdBy: string;
+	isLocked: boolean;
+}
+
+function DeleteActionItem({
+	dashboardId,
+	dashboardName,
+	createdBy,
+	isLocked,
+}: Props): JSX.Element {
+	const { t } = useTranslation(['dashboard']);
+	const { user } = useAppContext();
+	const { showErrorModal } = useErrorModal();
+	const queryClient = useQueryClient();
+	const [modal, contextHolder] = Modal.useModal();
+
+	const isAuthor = user?.email === createdBy;
+	const isDisabled = isLocked || (user.role === USER_ROLES.VIEWER && !isAuthor);
+
+	const { mutate: runDelete } = useMutation({
+		mutationFn: () => deleteDashboard({ id: dashboardId }),
+		onSuccess: async () => {
+			toast.success(
+				t('dashboard:delete_dashboard_success', { name: dashboardName }),
+			);
+			await invalidateListDashboardsV2(queryClient);
+		},
+		onError: (error: APIError) => {
+			showErrorModal(error);
+		},
+	});
+
+	const openConfirm = useCallback((): void => {
+		const { destroy } = modal.confirm({
+			title: (
+				<Typography.Title level={5}>
+					Are you sure you want to delete the
+					<span style={{ color: 'var(--danger-background)', fontWeight: 500 }}>
+						{' '}
+						{dashboardName}{' '}
+					</span>
+					dashboard?
+				</Typography.Title>
+			),
+			icon: (
+				<CircleAlert
+					style={{ color: 'var(--danger-background)', marginInlineEnd: '12px' }}
+					size="3xl"
+				/>
+			),
+			okText: 'Delete',
+			okButtonProps: {
+				danger: true,
+				onClick: (e): void => {
+					e.preventDefault();
+					e.stopPropagation();
+					runDelete(undefined, { onSettled: () => destroy() });
+				},
+			},
+			centered: true,
+		});
+	}, [modal, dashboardName, runDelete]);
+
+	const tooltip = ((): string => {
+		if (!isLocked) {
+			return '';
+		}
+		if (user.role === USER_ROLES.ADMIN || isAuthor) {
+			return t('dashboard:locked_dashboard_delete_tooltip_admin_author');
+		}
+		return t('dashboard:locked_dashboard_delete_tooltip_editor');
+	})();
+
+	return (
+		<>
+			<Divider />
+			<Tooltip placement="left" title={tooltip}>
+				<Button
+					variant="ghost"
+					color="destructive"
+					className={styles.menuItem}
+					prefix={<Trash2 size={14} />}
+					disabled={isDisabled}
+					onClick={(e): void => {
+						e.preventDefault();
+						e.stopPropagation();
+						if (!isDisabled) {
+							openConfirm();
+						}
+					}}
+					testId="dashboard-action-delete"
+				>
+					Delete Dashboard
+				</Button>
+			</Tooltip>
+			{contextHolder}
+		</>
+	);
+}
+
+export default DeleteActionItem;

frontend/src/pages/DashboardsListPageV2/components/ConfigureMetadataModal/ConfigureMetadataModal.module.scss

@@ -0,0 +1,164 @@
+.content {
+	display: flex;
+	flex-direction: column;
+	gap: 14px;
+}
+
+.preview {
+	display: flex;
+	padding: 12px 14.634px;
+	flex-direction: column;
+	align-items: flex-start;
+	gap: 7.317px;
+	border-radius: 4px;
+	border: 0.915px solid var(--l1-border);
+	background: var(--l2-background);
+}
+
+.previewHeader {
+	display: flex;
+	gap: 10px;
+	align-items: center;
+}
+
+.previewIcon {
+	height: 14px;
+	width: 14px;
+}
+
+.previewTitle {
+	color: var(--l1-foreground);
+	font-family: Inter;
+	font-size: 12.805px;
+	font-style: normal;
+	font-weight: var(--font-weight-medium);
+	line-height: 18.293px;
+	letter-spacing: -0.064px;
+}
+
+.previewDetails {
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+	width: 100%;
+}
+
+.previewRow {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+}
+
+.formattedTime {
+	display: inline-flex;
+	gap: 8px;
+	align-items: center;
+	color: var(--l2-foreground);
+}
+
+.formattedTimeText {
+	font-family: Inter;
+	font-size: 12.805px;
+	font-style: normal;
+	font-weight: var(--font-weight-normal);
+	line-height: 16.463px;
+	letter-spacing: -0.064px;
+	color: var(--l2-foreground);
+}
+
+.user {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+}
+
+.userTag {
+	width: 12px;
+	height: 12px;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	color: var(--l2-foreground);
+	font-size: 8px;
+	font-style: normal;
+	font-weight: var(--font-weight-normal);
+	line-height: normal;
+	letter-spacing: -0.05px;
+	border-radius: 12.805px;
+	background-color: var(--l1-background);
+}
+
+.userLabel {
+	color: var(--l2-foreground);
+	font-family: Inter;
+	font-size: 12.805px;
+	font-weight: var(--font-weight-normal);
+	line-height: 16.463px;
+	letter-spacing: -0.064px;
+}
+
+.action {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	padding: 0px 0px 0px 14.634px;
+}
+
+.actionLeft {
+	display: flex;
+	gap: 10px;
+	align-items: center;
+}
+
+.connectionLine {
+	border-top: 1px dashed var(--l1-border);
+	min-width: 20px;
+	flex-grow: 1;
+	margin: 0px 8px;
+}
+
+.actionRight {
+	display: flex;
+	align-items: center;
+}
+
+.saveChanges {
+	display: flex;
+	width: 100%;
+	height: 32px;
+	padding: 8px 16px;
+	justify-content: center;
+	align-items: center;
+	flex-shrink: 0;
+	border-radius: 2px;
+	border: 1px solid var(--l1-border);
+	background: var(--l1-border);
+}
+
+:global(.configureMetadataModalRoot) {
+	:global(.ant-modal-content) {
+		width: 500px;
+		flex-shrink: 0;
+		border-radius: 4px;
+		border: 1px solid var(--l1-border);
+		background: var(--card);
+		box-shadow: 0px -4px 16px 2px rgba(0, 0, 0, 0.2);
+		padding: 0px;
+	}
+
+	:global(.ant-modal-header) {
+		background: var(--card);
+		padding: 16px;
+		border-bottom: 1px solid var(--l1-border);
+		margin-bottom: 0px;
+	}
+
+	:global(.ant-modal-body) {
+		padding: 14px 16px;
+	}
+
+	:global(.ant-modal-footer) {
+		margin-top: 0px;
+		padding: 4px 16px 16px 16px;
+	}
+}

frontend/src/pages/DashboardsListPageV2/components/ConfigureMetadataModal/ConfigureMetadataModal.tsx

@@ -0,0 +1,218 @@
+import { useEffect, useState } from 'react';
+import { Button, Modal } from 'antd';
+import { Typography } from '@signozhq/ui/typography';
+import { Switch } from '@signozhq/ui/switch';
+import { CalendarClock, Check, Clock4 } from '@signozhq/icons';
+import { get } from 'lodash-es';
+import { Base64Icons } from 'container/DashboardContainer/DashboardSettings/General/utils';
+import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
+import { useTimezone } from 'providers/Timezone';
+
+import { lastUpdatedLabel, type DashboardListItem } from '../../utils';
+import {
+	DynamicColumns,
+	useDashboardsListVisibleColumnsStore,
+	type DashboardDynamicColumns,
+} from './useDynamicColumns';
+
+import styles from './ConfigureMetadataModal.module.scss';
+
+interface Props {
+	open: boolean;
+	previewDashboard: DashboardListItem | undefined;
+	onClose: () => void;
+}
+
+function ConfigureMetadataModal({
+	open,
+	previewDashboard,
+	onClose,
+}: Props): JSX.Element {
+	const { formatTimezoneAdjustedTimestamp } = useTimezone();
+
+	const storedColumns = useDashboardsListVisibleColumnsStore(
+		(s) => s.visibleColumns,
+	);
+	const setStoredColumns = useDashboardsListVisibleColumnsStore(
+		(s) => s.setVisibleColumns,
+	);
+	const [draftColumns, setDraftColumns] =
+		useState<DashboardDynamicColumns>(storedColumns);
+
+	useEffect(() => {
+		if (open) {
+			setDraftColumns(storedColumns);
+		}
+	}, [open, storedColumns]);
+
+	const handleSave = (): void => {
+		setStoredColumns(draftColumns);
+		onClose();
+	};
+
+	const previewImage = previewDashboard?.image || Base64Icons[0];
+	const previewName = previewDashboard?.spec?.display?.name;
+	const previewCreatedBy = previewDashboard?.createdBy;
+	const previewUpdatedBy = previewDashboard?.updatedBy;
+	const previewUpdatedAt = previewDashboard?.updatedAt;
+
+	const formattedCreatedAt = previewDashboard
+		? formatTimezoneAdjustedTimestamp(
+				get(previewDashboard, 'createdAt', '') as string,
+				DATE_TIME_FORMATS.DASH_DATETIME_UTC,
+			)
+		: '';
+
+	return (
+		<Modal
+			open={open}
+			onCancel={onClose}
+			title="Configure Metadata"
+			footer={
+				<Button
+					type="text"
+					icon={<Check size={14} />}
+					className={styles.saveChanges}
+					onClick={handleSave}
+				>
+					Save Changes
+				</Button>
+			}
+			rootClassName="configureMetadataModalRoot"
+		>
+			<div className={styles.content}>
+				<div className={styles.preview}>
+					<section className={styles.previewHeader}>
+						<img
+							src={previewImage}
+							alt="dashboard-image"
+							className={styles.previewIcon}
+						/>
+						<Typography.Text className={styles.previewTitle}>
+							{previewName}
+						</Typography.Text>
+					</section>
+					<section className={styles.previewDetails}>
+						<section className={styles.previewRow}>
+							{draftColumns.createdAt && (
+								<span className={styles.formattedTime}>
+									<CalendarClock size={14} />
+									<Typography.Text className={styles.formattedTimeText}>
+										{formattedCreatedAt}
+									</Typography.Text>
+								</span>
+							)}
+							{draftColumns.createdBy && (
+								<div className={styles.user}>
+									<Typography.Text className={styles.userTag}>
+										{previewCreatedBy?.substring(0, 1).toUpperCase()}
+									</Typography.Text>
+									<Typography.Text className={styles.userLabel}>
+										{previewCreatedBy}
+									</Typography.Text>
+								</div>
+							)}
+						</section>
+						<section className={styles.previewRow}>
+							{draftColumns.updatedAt && (
+								<span className={styles.formattedTime}>
+									<CalendarClock size={14} />
+									<Typography.Text className={styles.formattedTimeText}>
+										{lastUpdatedLabel(previewUpdatedAt)}
+									</Typography.Text>
+								</span>
+							)}
+							{draftColumns.updatedBy && (
+								<div className={styles.user}>
+									<Typography.Text className={styles.userTag}>
+										{previewUpdatedBy?.substring(0, 1).toUpperCase()}
+									</Typography.Text>
+									<Typography.Text className={styles.userLabel}>
+										{previewUpdatedBy}
+									</Typography.Text>
+								</div>
+							)}
+						</section>
+					</section>
+				</div>
+
+				<div className={styles.action}>
+					<div className={styles.actionLeft}>
+						<CalendarClock size={14} />
+						<Typography.Text>Created at</Typography.Text>
+					</div>
+					<div className={styles.connectionLine} />
+					<div className={styles.actionRight}>
+						<Switch
+							value
+							disabled
+							onChange={(check): void =>
+								setDraftColumns((prev) => ({
+									...prev,
+									[DynamicColumns.CREATED_AT]: check,
+								}))
+							}
+						/>
+					</div>
+				</div>
+				<div className={styles.action}>
+					<div className={styles.actionLeft}>
+						<CalendarClock size={14} />
+						<Typography.Text>Created by</Typography.Text>
+					</div>
+					<div className={styles.connectionLine} />
+					<div className={styles.actionRight}>
+						<Switch
+							value
+							disabled
+							onChange={(check): void =>
+								setDraftColumns((prev) => ({
+									...prev,
+									[DynamicColumns.CREATED_BY]: check,
+								}))
+							}
+						/>
+					</div>
+				</div>
+				<div className={styles.action}>
+					<div className={styles.actionLeft}>
+						<Clock4 size={14} />
+						<Typography.Text>Updated at</Typography.Text>
+					</div>
+					<div className={styles.connectionLine} />
+					<div className={styles.actionRight}>
+						<Switch
+							value={draftColumns.updatedAt}
+							onChange={(check): void =>
+								setDraftColumns((prev) => ({
+									...prev,
+									[DynamicColumns.UPDATED_AT]: check,
+								}))
+							}
+						/>
+					</div>
+				</div>
+				<div className={styles.action}>
+					<div className={styles.actionLeft}>
+						<Clock4 size={14} />
+						<Typography.Text>Updated by</Typography.Text>
+					</div>
+					<div className={styles.connectionLine} />
+					<div className={styles.actionRight}>
+						<Switch
+							value={draftColumns.updatedBy}
+							onChange={(check): void =>
+								setDraftColumns((prev) => ({
+									...prev,
+									[DynamicColumns.UPDATED_BY]: check,
+								}))
+							}
+						/>
+					</div>
+				</div>
+			</div>
+		</Modal>
+	);
+}
+
+export default ConfigureMetadataModal;

frontend/src/pages/DashboardsListPageV2/components/ConfigureMetadataModal/useDynamicColumns.ts

@@ -0,0 +1,52 @@
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+import { LOCALSTORAGE } from 'constants/localStorage';
+
+export interface DashboardDynamicColumns {
+	createdAt: boolean;
+	createdBy: boolean;
+	updatedAt: boolean;
+	updatedBy: boolean;
+}
+
+export enum DynamicColumns {
+	CREATED_AT = 'createdAt',
+	CREATED_BY = 'createdBy',
+	UPDATED_AT = 'updatedAt',
+	UPDATED_BY = 'updatedBy',
+}
+
+const DEFAULT_COLUMNS: DashboardDynamicColumns = {
+	createdAt: true,
+	createdBy: true,
+	updatedAt: false,
+	updatedBy: false,
+};
+
+interface DashboardsListVisibleColumnsState {
+	visibleColumns: DashboardDynamicColumns;
+	setVisibleColumns: (next: DashboardDynamicColumns) => void;
+}
+
+export const useDashboardsListVisibleColumnsStore =
+	create<DashboardsListVisibleColumnsState>()(
+		persist(
+			(set) => ({
+				visibleColumns: DEFAULT_COLUMNS,
+				setVisibleColumns: (next): void => {
+					set({ visibleColumns: next });
+				},
+			}),
+			{
+				name: LOCALSTORAGE.DASHBOARDS_LIST_VISIBLE_COLUMNS,
+				merge: (persisted, current) => ({
+					...current,
+					visibleColumns: {
+						...DEFAULT_COLUMNS,
+						...((persisted as Partial<DashboardsListVisibleColumnsState>)
+							?.visibleColumns ?? {}),
+					},
+				}),
+			},
+		),
+	);

frontend/src/pages/DashboardsListPageV2/components/CreateDashboardDropdown/CreateDashboardDropdown.module.scss

@@ -0,0 +1,34 @@
+.menuItem {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+}
+
+.templatesItem {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	gap: 8px;
+	width: 100%;
+}
+
+.primaryButton {
+	padding: 6px 12px;
+}
+
+.textButton {
+	display: flex;
+	width: 153px;
+	align-items: center;
+	height: 32px;
+	padding: 6px 12px;
+	justify-content: center;
+	gap: 6px;
+	border-radius: 2px;
+	background: var(--primary-background);
+	color: var(--l1-foreground);
+}
+
+:global(.createDashboardMenuOverlay) {
+	width: 200px;
+}

frontend/src/pages/DashboardsListPageV2/components/CreateDashboardDropdown/CreateDashboardDropdown.tsx

@@ -0,0 +1,119 @@
+import { useMemo } from 'react';
+// eslint-disable-next-line signoz/no-antd-components -- TODO: migrate Dropdown to @signozhq/ui/dropdown-menu
+import { Button, Dropdown, MenuProps } from 'antd';
+import cx from 'classnames';
+import logEvent from 'api/common/logEvent';
+import {
+	ExternalLink,
+	Github,
+	LayoutGrid,
+	Plus,
+	Radius,
+} from '@signozhq/icons';
+
+import styles from './CreateDashboardDropdown.module.scss';
+
+interface Props {
+	canCreate: boolean;
+	onCreate: () => void;
+	onImportJSON: () => void;
+	variant?: 'primary' | 'text';
+}
+
+const TEMPLATES_HREF =
+	'https://signoz.io/docs/dashboards/dashboard-templates/overview/';
+
+function CreateDashboardDropdown({
+	canCreate,
+	onCreate,
+	onImportJSON,
+	variant = 'primary',
+}: Props): JSX.Element {
+	const items: MenuProps['items'] = useMemo(() => {
+		const menuItems: MenuProps['items'] = [
+			{
+				key: 'import-json',
+				label: (
+					<div
+						className={styles.menuItem}
+						data-testid="import-json-menu-cta"
+						onClick={onImportJSON}
+					>
+						<Radius size={14} /> Import JSON
+					</div>
+				),
+			},
+			{
+				key: 'view-templates',
+				label: (
+					<a
+						href={TEMPLATES_HREF}
+						target="_blank"
+						rel="noopener noreferrer"
+						data-testid="view-templates-menu-cta"
+					>
+						<div className={styles.templatesItem}>
+							<div className={styles.menuItem}>
+								<Github size={14} /> View templates
+							</div>
+							<ExternalLink size={14} />
+						</div>
+					</a>
+				),
+			},
+		];
+
+		if (canCreate) {
+			menuItems.unshift({
+				key: 'create-dashboard',
+				label: (
+					<div
+						className={styles.menuItem}
+						data-testid="create-dashboard-menu-cta"
+						onClick={onCreate}
+					>
+						<LayoutGrid size={14} /> Create dashboard
+					</div>
+				),
+			});
+		}
+
+		return menuItems;
+	}, [canCreate, onCreate, onImportJSON]);
+
+	return (
+		<Dropdown
+			overlayClassName="createDashboardMenuOverlay"
+			menu={{ items }}
+			placement="bottomRight"
+			trigger={['click']}
+		>
+			{variant === 'primary' ? (
+				<Button
+					type="primary"
+					className={cx('periscope-btn primary', styles.primaryButton)}
+					icon={<Plus size={14} />}
+					data-testid="new-dashboard-cta"
+					onClick={(): void => {
+						logEvent('Dashboard List: New dashboard clicked', {});
+					}}
+				>
+					New dashboard
+				</Button>
+			) : (
+				<Button
+					type="text"
+					className={styles.textButton}
+					icon={<Plus size={14} />}
+					onClick={(): void => {
+						logEvent('Dashboard List: New dashboard clicked', {});
+					}}
+				>
+					New Dashboard
+				</Button>
+			)}
+		</Dropdown>
+	);
+}
+
+export default CreateDashboardDropdown;

frontend/src/pages/DashboardsListPageV2/components/DashboardRow/DashboardRow.module.scss

@@ -0,0 +1,152 @@
+.row {
+	padding: 12px 16px 16px 16px;
+	border: 1px solid var(--l1-border);
+	border-top: none;
+	background: var(--l2-background);
+	cursor: pointer;
+}
+
+.titleWithAction {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	gap: 8px;
+	min-height: 24px;
+}
+
+.titleBlock {
+	display: flex;
+	align-items: center;
+	gap: 6px;
+	line-height: 20px;
+	flex: 1 1 auto;
+	min-width: 0;
+}
+
+.titleLink {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+}
+
+.icon {
+	display: inline-block;
+	line-height: 20px;
+	height: 14px;
+	width: 14px;
+}
+
+.title {
+	color: var(--l1-foreground);
+	font-size: var(--font-size-sm);
+	font-style: normal;
+	font-weight: var(--font-weight-medium);
+	line-height: 20px;
+	letter-spacing: -0.07px;
+	display: -webkit-box;
+	-webkit-line-clamp: 3;
+	-webkit-box-orient: vertical;
+	overflow: hidden;
+}
+
+.tagsWithActions {
+	display: flex;
+	align-items: center;
+	flex: 0 1 auto;
+	min-width: 0;
+	justify-content: flex-end;
+}
+
+.tags {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 8px;
+	justify-content: flex-end;
+}
+
+.tag {
+	display: flex;
+	padding: 4px 8px;
+	justify-content: center;
+	align-items: center;
+	gap: 4px;
+	height: 28px;
+	border-radius: 20px;
+	border: 1px solid color-mix(in srgb, var(--bg-sienna-500) 20%, transparent);
+	background: color-mix(in srgb, var(--bg-sienna-500) 10%, transparent);
+	color: var(--bg-sienna-400);
+	text-align: center;
+	font-family: Inter;
+	font-size: var(--font-size-sm);
+	font-style: normal;
+	font-weight: var(--font-weight-normal);
+	line-height: 20px;
+	letter-spacing: -0.07px;
+	margin-inline-end: 0px;
+}
+
+.details {
+	margin-top: 12px;
+	display: flex;
+	align-items: center;
+	flex-wrap: wrap;
+	gap: 12px 24px;
+}
+
+.createdAt {
+	display: flex;
+	align-items: center;
+	gap: 6px;
+	color: var(--l2-foreground);
+	font-family: Inter;
+	font-size: var(--font-size-xs);
+	font-weight: var(--font-weight-normal);
+	line-height: 18px;
+	letter-spacing: -0.07px;
+}
+
+.createdBy {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+}
+
+.avatar {
+	width: 14px;
+	height: 14px;
+	border-radius: 50px;
+	background: var(--l1-border);
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+.avatarText {
+	color: var(--l2-foreground);
+	font-size: 8px;
+	font-weight: var(--font-weight-normal);
+	line-height: normal;
+	letter-spacing: -0.05px;
+}
+
+.byLabel {
+	color: var(--l2-foreground);
+	font-family: Inter;
+	font-size: var(--font-size-xs);
+	font-weight: var(--font-weight-normal);
+	line-height: 18px;
+	letter-spacing: -0.07px;
+}
+
+.updatedBy {
+	display: flex;
+	align-items: center;
+	gap: 6px;
+}
+
+:global(.titleTooltipOverlay) {
+	:global(.ant-tooltip-content) :global(.ant-tooltip-inner) {
+		max-height: 400px;
+		overflow: auto;
+	}
+}

frontend/src/pages/DashboardsListPageV2/components/DashboardRow/DashboardRow.tsx

@@ -0,0 +1,154 @@
+import { Tooltip } from 'antd';
+import { Typography } from '@signozhq/ui/typography';
+import { Badge } from '@signozhq/ui/badge';
+import { CalendarClock } from '@signozhq/icons';
+import logEvent from 'api/common/logEvent';
+import { generatePath } from 'react-router-dom';
+import { Base64Icons } from 'container/DashboardContainer/DashboardSettings/General/utils';
+import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
+import ROUTES from 'constants/routes';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
+import { useTimezone } from 'providers/Timezone';
+import { isModifierKeyPressed } from 'utils/app';
+
+import type { DashboardListItem } from '../../utils';
+import { lastUpdatedLabel, tagsToStrings } from '../../utils';
+import ActionsPopover from '../ActionsPopover/ActionsPopover';
+
+import styles from './DashboardRow.module.scss';
+
+interface Props {
+	dashboard: DashboardListItem;
+	index: number;
+	canAct: boolean;
+	showUpdatedAt: boolean;
+	showUpdatedBy: boolean;
+}
+
+function DashboardRow({
+	dashboard,
+	index,
+	canAct,
+	showUpdatedAt,
+	showUpdatedBy,
+}: Props): JSX.Element {
+	const { safeNavigate } = useSafeNavigate();
+	const { formatTimezoneAdjustedTimestamp } = useTimezone();
+
+	const id = dashboard.id;
+	const name = dashboard.spec?.display?.name ?? '';
+	const image = dashboard.image || Base64Icons[0];
+	const createdBy = dashboard.createdBy ?? '';
+	const updatedBy = dashboard.updatedBy ?? '';
+	const createdAt = dashboard.createdAt ?? '';
+	const updatedAt = dashboard.updatedAt ?? '';
+	const isLocked = !!dashboard.locked;
+	const tags = tagsToStrings(dashboard.tags);
+
+	const link = generatePath(ROUTES.DASHBOARD, { dashboardId: id });
+	const formattedCreatedAt = formatTimezoneAdjustedTimestamp(
+		createdAt,
+		DATE_TIME_FORMATS.DASH_DATETIME_UTC,
+	);
+
+	const onClickHandler = (event: React.MouseEvent<HTMLElement>): void => {
+		event.stopPropagation();
+		safeNavigate(link, { newTab: isModifierKeyPressed(event) });
+		logEvent('Dashboard List: Clicked on dashboard', {
+			dashboardId: id,
+			dashboardName: name,
+		});
+	};
+
+	return (
+		<div className={styles.row} onClick={onClickHandler}>
+			<div className={styles.titleWithAction}>
+				<div className={styles.titleBlock}>
+					<Tooltip
+						title={name.length > 50 ? name : ''}
+						placement="left"
+						overlayClassName="titleTooltipOverlay"
+					>
+						<div className={styles.titleLink} onClick={onClickHandler}>
+							<img src={image} alt="dashboard-image" className={styles.icon} />
+							<Typography.Text
+								data-testid={`dashboard-title-${index}`}
+								className={styles.title}
+							>
+								{name}
+							</Typography.Text>
+						</div>
+					</Tooltip>
+				</div>
+
+				<div className={styles.tagsWithActions}>
+					{tags.length > 0 && (
+						<div className={styles.tags}>
+							{tags.slice(0, 3).map((tag) => (
+								<Badge className={styles.tag} key={tag}>
+									{tag}
+								</Badge>
+							))}
+							{tags.length > 3 && (
+								<Badge className={styles.tag} key={tags[3]}>
+									+ <span> {tags.length - 3} </span>
+								</Badge>
+							)}
+						</div>
+					)}
+				</div>
+
+				{canAct && (
+					<ActionsPopover
+						link={link}
+						dashboardId={id}
+						dashboardName={name}
+						createdBy={createdBy}
+						isLocked={isLocked}
+						onView={onClickHandler}
+					/>
+				)}
+			</div>
+			<div className={styles.details}>
+				<div className={styles.createdAt}>
+					<CalendarClock size={14} />
+					<Typography.Text>{formattedCreatedAt}</Typography.Text>
+				</div>
+
+				{createdBy && (
+					<div className={styles.createdBy}>
+						<div className={styles.avatar}>
+							<Typography.Text className={styles.avatarText}>
+								{createdBy.substring(0, 1).toUpperCase()}
+							</Typography.Text>
+						</div>
+						<Typography.Text className={styles.byLabel}>{createdBy}</Typography.Text>
+					</div>
+				)}
+
+				{showUpdatedAt && (
+					<div className={styles.createdAt}>
+						<CalendarClock size={14} />
+						<Typography.Text>{lastUpdatedLabel(updatedAt)}</Typography.Text>
+					</div>
+				)}
+
+				{updatedBy && showUpdatedBy && (
+					<div className={styles.updatedBy}>
+						<Typography.Text className={styles.byLabel}>
+							Last Updated By -
+						</Typography.Text>
+						<div className={styles.avatar}>
+							<Typography.Text className={styles.avatarText}>
+								{updatedBy.substring(0, 1).toUpperCase()}
+							</Typography.Text>
+						</div>
+						<Typography.Text className={styles.byLabel}>{updatedBy}</Typography.Text>
+					</div>
+				)}
+			</div>
+		</div>
+	);
+}
+
+export default DashboardRow;

frontend/src/pages/DashboardsListPageV2/components/DashboardsList/DashboardsList.module.scss

@@ -0,0 +1,96 @@
+.container {
+	margin-top: 30px;
+	margin-bottom: 30px;
+	display: flex;
+	justify-content: center;
+	width: 100%;
+}
+
+.viewContent {
+	width: calc(100% - 30px);
+	max-width: 836px;
+
+	:global(.ant-table-wrapper) :global(.ant-table-cell) {
+		padding: 0 !important;
+		border: none !important;
+		background: var(--l1-background) !important;
+	}
+
+	:global(.ant-table-wrapper)
+		:global(.ant-table-tbody)
+		:global(.ant-table-row)
+		:global(.ant-table-cell)
+		> div {
+		// Row content is the only child of the td; it carries the borders.
+	}
+
+	:global(.ant-table-wrapper)
+		:global(.ant-table-tbody)
+		:global(.ant-table-row:last-child)
+		:global(.ant-table-cell)
+		> div {
+		border-radius: 0 0 6px 6px;
+	}
+
+	:global(.ant-pagination-item) {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+
+	:global(.ant-pagination-item) > a {
+		color: var(--l2-foreground);
+		font-size: var(--font-size-sm);
+		font-weight: var(--font-weight-normal);
+		line-height: 20px;
+	}
+
+	:global(.ant-pagination-item-active) {
+		background-color: var(--primary-background);
+	}
+
+	:global(.ant-pagination-item-active) > a {
+		color: var(--foreground) !important;
+		font-weight: var(--font-weight-medium);
+	}
+}
+
+.titleContainer {
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+}
+
+.title {
+	color: var(--l1-foreground);
+	font-size: var(--font-size-lg);
+	font-style: normal;
+	font-weight: var(--font-weight-normal);
+	line-height: 28px;
+	letter-spacing: -0.09px;
+}
+
+.subtitle {
+	color: var(--l2-foreground);
+	font-size: var(--font-size-sm);
+	font-style: normal;
+	font-weight: var(--font-weight-normal);
+	line-height: 20px;
+	letter-spacing: -0.07px;
+}
+
+.integrationsContainer {
+	margin: 16px 0;
+}
+
+.integrationsContent {
+	max-width: 100%;
+	width: 100%;
+}
+
+.toolbar {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	margin: 16px 0;
+}

frontend/src/pages/DashboardsListPageV2/components/DashboardsList/DashboardsList.tsx

@@ -0,0 +1,277 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { generatePath } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
+import { Typography } from '@signozhq/ui/typography';
+import { AxiosError } from 'axios';
+import logEvent from 'api/common/logEvent';
+import {
+	createDashboardV2,
+	useListDashboardsV2,
+} from 'api/generated/services/dashboard';
+import ROUTES from 'constants/routes';
+import { RequestDashboardBtn } from 'container/ListOfDashboard/RequestDashboardBtn';
+import useComponentPermission from 'hooks/useComponentPermission';
+import { toast } from '@signozhq/ui/sonner';
+import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
+import { useAppContext } from 'providers/App/App';
+import { useErrorModal } from 'providers/ErrorModalProvider';
+import APIError from 'types/api/error';
+import { toAPIError } from 'utils/errorUtils';
+
+import {
+	usePage,
+	useSearch,
+	useSortColumn,
+	useSortOrder,
+	type SortColumn,
+	type SortOrder,
+} from '../../hooks/useDashboardsListQueryParams';
+import type { DashboardListItem } from '../../utils';
+import ConfigureMetadataModal from '../ConfigureMetadataModal/ConfigureMetadataModal';
+import { useDashboardsListVisibleColumnsStore } from '../ConfigureMetadataModal/useDynamicColumns';
+import CreateDashboardDropdown from '../CreateDashboardDropdown/CreateDashboardDropdown';
+import ImportJSONModal from '../ImportJSONModal/ImportJSONModal';
+import ListHeader from '../ListHeader/ListHeader';
+import EmptyState from '../states/EmptyState/EmptyState';
+import ErrorState from '../states/ErrorState/ErrorState';
+import LoadingState from '../states/LoadingState/LoadingState';
+import NoResultsState from '../states/NoResultsState/NoResultsState';
+import SearchBar from '../SearchBar/SearchBar';
+import DashboardsListContent from './DashboardsListContent';
+
+import styles from './DashboardsList.module.scss';
+
+const PAGE_SIZE = 20;
+
+function DashboardsList(): JSX.Element {
+	const { safeNavigate } = useSafeNavigate();
+	const { t } = useTranslation('dashboard');
+	const { showErrorModal } = useErrorModal();
+	const { isCloudUser } = useGetTenantLicense();
+
+	const { user } = useAppContext();
+	const [action, canCreateNewDashboard] = useComponentPermission(
+		['action', 'create_new_dashboards'],
+		user.role,
+	);
+
+	const [searchString, setSearchString] = useSearch();
+	const [sortColumn, setSortColumn] = useSortColumn();
+	const [sortOrder, setSortOrder] = useSortOrder();
+	const [page, setPage] = usePage();
+
+	const [searchInput, setSearchInput] = useState(searchString);
+
+	// Keep the local input in sync with external searchString changes
+	// (browser back/forward, deep link). User typing only mutates
+	// searchInput, so this won't fight with in-flight edits.
+	useEffect(() => {
+		setSearchInput(searchString);
+	}, [searchString]);
+
+	const handleSubmitSearch = useCallback((): void => {
+		const next = searchInput.trim();
+		if (next === searchString) {
+			return;
+		}
+		void setSearchString(next);
+		void setPage(1);
+	}, [searchInput, searchString, setSearchString, setPage]);
+
+	const listParams = useMemo(
+		() => ({
+			query: searchString.trim() || undefined,
+			sort: sortColumn,
+			order: sortOrder,
+			limit: PAGE_SIZE,
+			offset: (page - 1) * PAGE_SIZE,
+		}),
+		[searchString, sortColumn, sortOrder, page],
+	);
+
+	const {
+		data: response,
+		isLoading,
+		isFetching,
+		error,
+		refetch,
+	} = useListDashboardsV2(listParams, { query: { keepPreviousData: true } });
+
+	const apiError = useMemo(
+		() => (error ? toAPIError(error) : undefined),
+		[error],
+	);
+	const errorHttpStatus = apiError?.getHttpStatusCode();
+	const errorMessage = apiError?.getErrorMessage();
+
+	const dashboards = useMemo<DashboardListItem[]>(
+		() => response?.data?.dashboards ?? [],
+		[response],
+	);
+	const total = response?.data?.total ?? 0;
+
+	const [isImportOpen, setIsImportOpen] = useState(false);
+	const [isConfigureOpen, setIsConfigureOpen] = useState(false);
+	const visibleColumns = useDashboardsListVisibleColumnsStore(
+		(s) => s.visibleColumns,
+	);
+
+	const [creating, setCreating] = useState(false);
+
+	const handleCreateNew = useCallback(async (): Promise<void> => {
+		try {
+			logEvent('Dashboard List: Create dashboard clicked', {});
+			setCreating(true);
+			const created = await createDashboardV2({
+				schemaVersion: 'v6',
+				// Backend requires `name` (immutable, server-side identifier);
+				// asking it to generate one keeps the UI's "new dashboard" flow.
+				generateName: true,
+				tags: null,
+				spec: {
+					display: { name: t('new_dashboard_title', { ns: 'dashboard' }) },
+				},
+			});
+			safeNavigate(
+				generatePath(ROUTES.DASHBOARD, { dashboardId: created.data.id }),
+			);
+		} catch (e) {
+			showErrorModal(e as APIError);
+			toast.error((e as AxiosError).toString() || 'Failed to create dashboard');
+		} finally {
+			setCreating(false);
+		}
+	}, [safeNavigate, showErrorModal, t]);
+
+	const handleImportToggle = useCallback((): void => {
+		logEvent('Dashboard List V2: Import JSON clicked', {});
+		setIsImportOpen((s) => !s);
+	}, []);
+
+	const onSortChange = useCallback(
+		(column: SortColumn): void => {
+			void setSortColumn(column);
+			void setPage(1);
+		},
+		[setSortColumn, setPage],
+	);
+
+	const onOrderChange = useCallback(
+		(order: SortOrder): void => {
+			void setSortOrder(order);
+			void setPage(1);
+		},
+		[setSortOrder, setPage],
+	);
+
+	const visitLoggedRef = useRef(false);
+	useEffect(() => {
+		if (!visitLoggedRef.current && !isLoading && response !== undefined) {
+			logEvent('Dashboard List V2: Page visited', { number: dashboards.length });
+			visitLoggedRef.current = true;
+		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [isLoading]);
+
+	return (
+		<div className={styles.container}>
+			<div className={styles.viewContent}>
+				<div className={styles.titleContainer}>
+					<Typography.Title className={styles.title}>Dashboards</Typography.Title>
+					<Typography.Text className={styles.subtitle}>
+						Create and manage dashboards for your workspace.
+					</Typography.Text>
+					{isCloudUser && (
+						<div className={styles.integrationsContainer}>
+							<div className={styles.integrationsContent}>
+								<RequestDashboardBtn />
+							</div>
+						</div>
+					)}
+				</div>
+
+				{isLoading ? (
+					<LoadingState />
+				) : !error && dashboards.length === 0 && !searchString && page === 1 ? (
+					<EmptyState
+						createDropdown={
+							canCreateNewDashboard ? (
+								<CreateDashboardDropdown
+									canCreate={!!canCreateNewDashboard}
+									onCreate={handleCreateNew}
+									onImportJSON={handleImportToggle}
+									variant="text"
+								/>
+							) : null
+						}
+					/>
+				) : (
+					<>
+						<div className={styles.toolbar}>
+							<SearchBar
+								value={searchInput}
+								onChange={setSearchInput}
+								onSubmit={handleSubmitSearch}
+							/>
+							{canCreateNewDashboard && (
+								<CreateDashboardDropdown
+									canCreate={!!canCreateNewDashboard}
+									onCreate={handleCreateNew}
+									onImportJSON={handleImportToggle}
+								/>
+							)}
+						</div>
+
+						{error ? (
+							<ErrorState
+								isCloudUser={!!isCloudUser}
+								onRetry={(): void => {
+									refetch();
+								}}
+								httpStatus={errorHttpStatus}
+								errorMessage={errorMessage}
+							/>
+						) : dashboards.length === 0 ? (
+							<NoResultsState searchString={searchInput} />
+						) : (
+							<>
+								<ListHeader
+									sortColumn={sortColumn}
+									onSortChange={onSortChange}
+									sortOrder={sortOrder}
+									onOrderChange={onOrderChange}
+									onConfigureMetadata={(): void => setIsConfigureOpen(true)}
+								/>
+								<DashboardsListContent
+									dashboards={dashboards}
+									page={page}
+									pageSize={PAGE_SIZE}
+									total={total}
+									onPageChange={setPage}
+									canAct={!!action}
+									showUpdatedAt={visibleColumns.updatedAt}
+									showUpdatedBy={visibleColumns.updatedBy}
+									loading={creating || isFetching}
+								/>
+							</>
+						)}
+					</>
+				)}
+
+				<ImportJSONModal
+					open={isImportOpen}
+					onClose={(): void => setIsImportOpen(false)}
+				/>
+
+				<ConfigureMetadataModal
+					open={isConfigureOpen}
+					previewDashboard={dashboards[0]}
+					onClose={(): void => setIsConfigureOpen(false)}
+				/>
+			</div>
+		</div>
+	);
+}
+
+export default DashboardsList;

frontend/src/pages/DashboardsListPageV2/components/DashboardsList/DashboardsListContent.tsx

@@ -0,0 +1,71 @@
+import { useMemo } from 'react';
+import { Table } from 'antd';
+import type { TableProps } from 'antd/lib';
+
+import type { DashboardListItem } from '../../utils';
+import DashboardRow from '../DashboardRow/DashboardRow';
+
+interface Props {
+	dashboards: DashboardListItem[];
+	page: number;
+	pageSize: number;
+	total: number;
+	onPageChange: (page: number) => void;
+	canAct: boolean;
+	showUpdatedAt: boolean;
+	showUpdatedBy: boolean;
+	loading: boolean;
+}
+
+function DashboardsListContent({
+	dashboards,
+	page,
+	pageSize,
+	total,
+	onPageChange,
+	canAct,
+	showUpdatedAt,
+	showUpdatedBy,
+	loading,
+}: Props): JSX.Element {
+	const columns: TableProps<DashboardListItem>['columns'] = useMemo(
+		() => [
+			{
+				title: 'Dashboards',
+				key: 'dashboard',
+				render: (_, dashboard, index): JSX.Element => (
+					<DashboardRow
+						dashboard={dashboard}
+						index={index}
+						canAct={canAct}
+						showUpdatedAt={showUpdatedAt}
+						showUpdatedBy={showUpdatedBy}
+					/>
+				),
+			},
+		],
+		[canAct, showUpdatedAt, showUpdatedBy],
+	);
+
+	const paginationConfig = total > pageSize && {
+		pageSize,
+		showSizeChanger: false,
+		onChange: onPageChange,
+		current: page,
+		total,
+		hideOnSinglePage: true,
+	};
+
+	return (
+		<Table
+			columns={columns}
+			dataSource={dashboards.map((d) => ({ ...d, key: d.id }))}
+			showSorterTooltip
+			loading={loading}
+			showHeader={false}
+			pagination={paginationConfig}
+		/>
+	);
+}
+
+export default DashboardsListContent;

frontend/src/pages/DashboardsListPageV2/components/DashboardsList/index.tsx

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

frontend/src/pages/DashboardsListPageV2/components/ImportJSONModal/ImportJSONModal.module.scss

@@ -0,0 +1,73 @@
+.contentContainer {
+	display: flex;
+	flex-direction: column;
+}
+
+.contentHeader {
+	padding: 16px;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	border-bottom: 1px solid var(--l1-border);
+}
+
+.footer {
+	display: flex;
+	flex-direction: column;
+	gap: 8px;
+}
+
+.jsonError {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+}
+
+.errorText {
+	color: var(--warning-background);
+}
+
+.actions {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+}
+
+:global(.importJsonModalWrapper) {
+	:global(.ant-modal-content) {
+		border-radius: 4px;
+		border: 1px solid var(--l1-border);
+		background: linear-gradient(
+			139deg,
+			color-mix(in srgb, var(--card) 80%, transparent) 0%,
+			color-mix(in srgb, var(--card) 90%, transparent) 98.68%
+		);
+		box-shadow: 4px 10px 16px 2px rgba(0, 0, 0, 0.2);
+		backdrop-filter: blur(20px);
+		padding: 0;
+	}
+
+	:global(.margin) {
+		background: linear-gradient(
+			139deg,
+			color-mix(in srgb, var(--card) 80%, transparent) 0%,
+			color-mix(in srgb, var(--card) 90%, transparent) 98.68%
+		);
+		backdrop-filter: blur(20px);
+	}
+
+	:global(.view-lines) {
+		background: linear-gradient(
+			139deg,
+			color-mix(in srgb, var(--card) 80%, transparent) 0%,
+			color-mix(in srgb, var(--card) 90%, transparent) 98.68%
+		);
+		backdrop-filter: blur(20px);
+	}
+
+	:global(.ant-modal-footer) {
+		margin-top: 0;
+		padding: 16px;
+		border-top: 1px solid var(--l1-border);
+	}
+}

frontend/src/pages/DashboardsListPageV2/components/ImportJSONModal/ImportJSONModal.tsx

@@ -0,0 +1,223 @@
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { generatePath } from 'react-router-dom';
+import { red } from '@ant-design/colors';
+import MEditor, { Monaco } from '@monaco-editor/react';
+import { Color } from '@signozhq/design-tokens';
+import { Button, Flex, Modal, Upload, UploadProps } from 'antd';
+import { toast } from '@signozhq/ui/sonner';
+import { Typography } from '@signozhq/ui/typography';
+import {
+	CircleAlert,
+	ExternalLink,
+	Github,
+	MonitorDot,
+	MoveRight,
+	Sparkles,
+} from '@signozhq/icons';
+import logEvent from 'api/common/logEvent';
+import { createDashboardV2 } from 'api/generated/services/dashboard';
+import ROUTES from 'constants/routes';
+import { useIsDarkMode } from 'hooks/useDarkMode';
+import { useSafeNavigate } from 'hooks/useSafeNavigate';
+import { useErrorModal } from 'providers/ErrorModalProvider';
+import APIError from 'types/api/error';
+
+import sampleDashboard from './sampleDashboard.json';
+
+import styles from './ImportJSONModal.module.scss';
+import { normalizeToPostable } from './ImportJSONModalUtils';
+
+interface Props {
+	open: boolean;
+	onClose: () => void;
+}
+
+function ImportJSONModal({ open, onClose }: Props): JSX.Element {
+	const { safeNavigate } = useSafeNavigate();
+	const { t } = useTranslation(['dashboard', 'common']);
+	const [isUploadError, setIsUploadError] = useState(false);
+	const [isCreateError, setIsCreateError] = useState(false);
+	const [isCreating, setIsCreating] = useState(false);
+	const [editorValue, setEditorValue] = useState('');
+
+	const { showErrorModal } = useErrorModal();
+	const isDarkMode = useIsDarkMode();
+
+	const handleUpload: UploadProps['onChange'] = (info) => {
+		const lastFile = info.fileList[info.fileList.length - 1];
+		if (!lastFile?.originFileObj) {
+			return;
+		}
+		const reader = new FileReader();
+		reader.onload = (event): void => {
+			try {
+				const target = event.target?.result;
+				if (!target) {
+					return;
+				}
+				const parsed = JSON.parse(target.toString());
+				setEditorValue(JSON.stringify(parsed, null, 2));
+				setIsUploadError(false);
+			} catch {
+				setIsUploadError(true);
+			}
+		};
+		reader.readAsText(lastFile.originFileObj);
+	};
+
+	const handleImport = async (): Promise<void> => {
+		try {
+			setIsCreating(true);
+			logEvent('Dashboard List V2: Import and next clicked', {});
+			const parsed = JSON.parse(editorValue) as Record<string, unknown>;
+			const payload = normalizeToPostable(parsed);
+			const response = await createDashboardV2(payload);
+			safeNavigate(
+				generatePath(ROUTES.DASHBOARD, { dashboardId: response.data.id }),
+			);
+			logEvent('Dashboard List V2: New dashboard imported successfully', {
+				dashboardId: response.data?.id,
+			});
+		} catch (error) {
+			showErrorModal(error as APIError);
+			setIsCreateError(true);
+			toast.error(
+				error instanceof Error ? error.message : t('error_loading_json'),
+			);
+		} finally {
+			setIsCreating(false);
+		}
+	};
+
+	const handleClose = (): void => {
+		setIsUploadError(false);
+		setIsCreateError(false);
+		onClose();
+	};
+
+	const setEditorTheme = (monaco: Monaco): void => {
+		monaco.editor.defineTheme('my-theme', {
+			base: 'vs-dark',
+			inherit: true,
+			rules: [
+				{ token: 'string.key.json', foreground: Color.BG_VANILLA_400 },
+				{ token: 'string.value.json', foreground: Color.BG_ROBIN_400 },
+			],
+			colors: { 'editor.background': Color.BG_INK_300 },
+		});
+	};
+
+	const renderError = (msg: string): JSX.Element => (
+		<div className={styles.jsonError}>
+			<CircleAlert size="md" color={red[7]} />
+			<Typography className={styles.errorText}>{msg}</Typography>
+		</div>
+	);
+
+	return (
+		<Modal
+			wrapClassName="importJsonModalWrapper"
+			open={open}
+			centered
+			closable
+			keyboard
+			maskClosable
+			onCancel={handleClose}
+			destroyOnClose
+			width="60vw"
+			footer={
+				<div className={styles.footer}>
+					{isCreateError && renderError(t('error_loading_json'))}
+					{isUploadError && renderError(t('error_upload_json'))}
+
+					<div className={styles.actions}>
+						<Flex gap="small">
+							<Upload
+								accept=".json"
+								showUploadList={false}
+								multiple={false}
+								onChange={handleUpload}
+								beforeUpload={(): boolean => false}
+								action="none"
+							>
+								<Button
+									type="default"
+									className="periscope-btn"
+									icon={<MonitorDot size={14} />}
+									onClick={(): void => {
+										logEvent('Dashboard List V2: Upload JSON file clicked', {});
+									}}
+								>
+									{t('upload_json_file')}
+								</Button>
+							</Upload>
+							<Button
+								type="default"
+								className="periscope-btn"
+								icon={<Sparkles size={14} />}
+								onClick={(): void => {
+									setEditorValue(JSON.stringify(sampleDashboard, null, 2));
+									setIsUploadError(false);
+									logEvent('Dashboard List V2: Load sample clicked', {});
+								}}
+							>
+								Load sample
+							</Button>
+							<a
+								href="https://signoz.io/docs/dashboards/dashboard-templates/overview/"
+								target="_blank"
+								rel="noopener noreferrer"
+							>
+								<Button
+									type="default"
+									className="periscope-btn"
+									icon={<Github size={14} />}
+								>
+									{t('view_template')}&nbsp;
+									<ExternalLink size={14} />
+								</Button>
+							</a>
+						</Flex>
+
+						<Button
+							onClick={handleImport}
+							loading={isCreating}
+							className="periscope-btn primary"
+							type="primary"
+						>
+							{t('import_and_next')} &nbsp; <MoveRight size={14} />
+						</Button>
+					</div>
+				</div>
+			}
+		>
+			<div className={styles.contentContainer}>
+				<div className={styles.contentHeader}>
+					<Typography.Text>{t('import_json')}</Typography.Text>
+				</div>
+				<MEditor
+					language="json"
+					height="40vh"
+					onChange={(newValue): void => setEditorValue(newValue || '')}
+					value={editorValue}
+					options={{
+						scrollbar: { alwaysConsumeMouseWheel: false },
+						minimap: { enabled: false },
+						fontSize: 14,
+						fontFamily: 'Space Mono',
+					}}
+					theme={isDarkMode ? 'my-theme' : 'light'}
+					onMount={(_, monaco): void => {
+						document.fonts.ready.then(() => {
+							monaco.editor.remeasureFonts();
+						});
+					}}
+					beforeMount={setEditorTheme}
+				/>
+			</div>
+		</Modal>
+	);
+}
+
+export default ImportJSONModal;

frontend/src/pages/DashboardsListPageV2/components/ImportJSONModal/ImportJSONModalUtils.ts

@@ -0,0 +1,50 @@
+import {
+	DashboardtypesDashboardSpecDTO,
+	DashboardtypesPostableDashboardV2DTO,
+	TagtypesPostableTagDTO,
+} from 'api/generated/services/sigNoz.schemas';
+
+// Accept either a complete PostableDashboardV2 (flat shape with `spec` and
+// top-level `name` / `image` / `tags` / `schemaVersion`) or a bare spec — wrap
+// the latter with defaults so users can paste either shape that exists in the
+// wild (e.g. testdata/perses.json is a bare spec). The legacy nested
+// `{ metadata: { ... }, spec }` shape is also accepted and flattened.
+//
+// The backend requires `name` (immutable identifier); if the payload doesn't
+// carry one, fall back to `generateName: true` so the server assigns one.
+export function normalizeToPostable(
+	parsed: Record<string, unknown>,
+): DashboardtypesPostableDashboardV2DTO {
+	const hasSpec = 'spec' in parsed;
+	const legacyMeta = parsed.metadata as
+		| {
+				schemaVersion?: string;
+				name?: string;
+				image?: string;
+				tags?: TagtypesPostableTagDTO[] | null;
+		  }
+		| undefined;
+
+	const resolvedName = (parsed.name as string | undefined) ?? legacyMeta?.name;
+
+	if (hasSpec) {
+		return {
+			schemaVersion:
+				(parsed.schemaVersion as string) || legacyMeta?.schemaVersion || 'v6',
+			...(resolvedName ? { name: resolvedName } : { generateName: true }),
+			image: (parsed.image as string) ?? legacyMeta?.image,
+			tags:
+				(parsed.tags as TagtypesPostableTagDTO[] | null) ??
+				legacyMeta?.tags ??
+				null,
+			spec: parsed.spec as DashboardtypesDashboardSpecDTO,
+		};
+	}
+
+	return {
+		schemaVersion: 'v6',
+		generateName: true,
+		tags: null,
+		spec: parsed as unknown as DashboardtypesDashboardSpecDTO,
+	};
+}

frontend/src/pages/DashboardsListPageV2/components/ImportJSONModal/sampleDashboard.json

@@ -0,0 +1,154 @@
+{
+    "display": {
+        "name": "NV dashboard with sections",
+        "description": ""
+    },
+    "datasources": {
+        "SigNozDatasource": {
+            "default": true,
+            "plugin": {
+                "kind": "signoz/Datasource",
+                "spec": {}
+            }
+        }
+    },
+    "panels": {
+        "b424e23b": {
+            "kind": "Panel",
+            "spec": {
+                "display": {
+                    "name": ""
+                },
+                "plugin": {
+                    "kind": "signoz/NumberPanel",
+                    "spec": {
+                        "formatting": {
+                            "unit": "s",
+                            "decimalPrecision": "2"
+                        }
+                    }
+                },
+                "queries": [
+                    {
+                        "kind": "TimeSeriesQuery",
+                        "spec": {
+                            "plugin": {
+                                "kind": "signoz/BuilderQuery",
+                                "spec": {
+                                    "name": "A",
+                                    "signal": "metrics",
+                                    "aggregations": [
+                                        {
+                                            "metricName": "container.cpu.time",
+                                            "reduceTo": "sum",
+                                            "spaceAggregation": "sum",
+                                            "timeAggregation": "rate"
+                                        }
+                                    ],
+                                    "filter": {
+                                        "expression": ""
+                                    }
+                                }
+                            }
+                        }
+                    }
+                ]
+            }
+        },
+        "251df4d5": {
+            "kind": "Panel",
+            "spec": {
+                "display": {
+                    "name": ""
+                },
+                "plugin": {
+                    "kind": "signoz/TimeSeriesPanel",
+                    "spec": {
+                        "visualization": {
+                            "fillSpans": false
+                        },
+                        "formatting": {
+                            "unit": "recommendations",
+                            "decimalPrecision": "2"
+                        },
+                        "chartAppearance": {
+                            "lineInterpolation": "spline",
+                            "showPoints": false,
+                            "lineStyle": "solid",
+                            "fillMode": "none",
+                            "spanGaps": {"fillOnlyBelow": true}
+                        },
+                        "legend": {
+                            "position": "bottom"
+                        }
+                    }
+                },
+                "queries": [
+                    {
+                        "kind": "TimeSeriesQuery",
+                        "spec": {
+                            "plugin": {
+                                "kind": "signoz/BuilderQuery",
+                                "spec": {
+                                    "name": "A",
+                                    "signal": "metrics",
+                                    "aggregations": [
+                                        {
+                                            "metricName": "app_recommendations_counter",
+                                            "reduceTo": "sum",
+                                            "spaceAggregation": "sum",
+                                            "timeAggregation": "rate"
+                                        }
+                                    ],
+                                    "filter": {
+                                        "expression": ""
+                                    }
+                                }
+                            }
+                        }
+                    }
+                ]
+            }
+        }
+    },
+    "layouts": [
+        {
+            "kind": "Grid",
+            "spec": {
+                "display": {
+                    "title": "Bravo"
+                },
+                "items": [
+                    {
+                        "x": 0,
+                        "y": 0,
+                        "width": 6,
+                        "height": 6,
+                        "content": {
+                            "$ref": "#/spec/panels/b424e23b"
+                        }
+                    }
+                ]
+            }
+        },
+        {
+            "kind": "Grid",
+            "spec": {
+                "display": {
+                    "title": "Alpha"
+                },
+                "items": [
+                    {
+                        "x": 0,
+                        "y": 0,
+                        "width": 6,
+                        "height": 6,
+                        "content": {
+                            "$ref": "#/spec/panels/251df4d5"
+                        }
+                    }
+                ]
+            }
+        }
+    ]
+}

frontend/src/pages/DashboardsListPageV2/components/ListHeader/ListHeader.module.scss

@@ -0,0 +1,182 @@
+.wrapper {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	padding: 16px;
+	height: 44px;
+	flex-shrink: 0;
+	border-radius: 6px 6px 0px 0px;
+	border: 1px solid var(--l1-border);
+	background: var(--l2-background);
+	box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.1);
+}
+
+.label {
+	color: var(--l2-foreground);
+	font-family: Inter;
+	font-size: var(--font-size-sm);
+	font-style: normal;
+	font-weight: var(--font-weight-normal);
+	line-height: 20px;
+	letter-spacing: -0.07px;
+}
+
+.rightActions {
+	display: flex;
+	gap: 4px;
+	color: white;
+}
+
+// Shared trigger button for the sort + configure-group icons in the right
+// actions cluster. Provides a square hover/active background so users know
+// which icon they're targeting.
+.iconTrigger {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 28px;
+	height: 28px;
+	padding: 0;
+	background: transparent;
+	border: none;
+	border-radius: 4px;
+	color: inherit;
+	cursor: pointer;
+	transition: background 120ms ease;
+
+	&:hover,
+	&:focus-visible {
+		background: color-mix(in srgb, var(--l1-foreground) 12%, transparent);
+		outline: none;
+	}
+
+	&:active,
+	&[aria-expanded='true'] {
+		background: color-mix(in srgb, var(--l1-foreground) 20%, transparent);
+	}
+}
+
+.sortContent {
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
+	width: 140px;
+}
+
+.sortHeading {
+	color: var(--l3-foreground);
+	font-family: Inter;
+	font-size: 11px;
+	font-style: normal;
+	font-weight: var(--font-weight-semibold);
+	line-height: 18px;
+	letter-spacing: 0.88px;
+	text-transform: uppercase;
+	padding: 12px 18px 6px 14px;
+}
+
+.sortDivider {
+	width: 100%;
+	height: 1px;
+	background: var(--l1-border);
+	margin: 4px 0;
+}
+
+.sortButton {
+	text-align: start;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	width: 100%;
+	color: var(--l2-foreground);
+	font-family: Inter;
+	font-size: var(--font-size-sm);
+	font-style: normal;
+	font-weight: var(--font-weight-normal);
+	line-height: normal;
+	letter-spacing: 0.14px;
+	padding: 12px 18px 12px 14px;
+	height: auto;
+}
+
+.configureContent {
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
+	padding: 4px;
+}
+
+.configureItem {
+	display: flex;
+	align-items: center;
+	gap: 10px;
+	width: 100%;
+	padding: 8px 12px;
+	background: transparent;
+	border: none;
+	border-radius: 4px;
+	color: var(--l2-foreground);
+	font-family: Inter;
+	font-size: var(--font-size-sm);
+	font-weight: var(--font-weight-normal);
+	line-height: normal;
+	letter-spacing: 0.14px;
+	text-align: left;
+	cursor: pointer;
+	transition: background 120ms ease;
+
+	&:hover,
+	&:focus-visible {
+		background: color-mix(in srgb, var(--l1-foreground) 10%, transparent);
+		outline: none;
+	}
+
+	&:active {
+		background: color-mix(in srgb, var(--l1-foreground) 18%, transparent);
+	}
+}
+
+.configureIcon {
+	display: inline-flex;
+	width: 16px;
+	height: 16px;
+	flex: 0 0 16px;
+	align-items: center;
+	justify-content: center;
+}
+
+:global(.sortDashboardsPopover) {
+	:global(.ant-popover-inner) {
+		display: flex;
+		padding: 0px;
+		align-items: center;
+		border-radius: 4px;
+		border: 1px solid var(--l1-border);
+		background: linear-gradient(
+			139deg,
+			color-mix(in srgb, var(--card) 80%, transparent) 0%,
+			color-mix(in srgb, var(--card) 90%, transparent) 98.68%
+		);
+		box-shadow: 4px 10px 16px 2px rgba(0, 0, 0, 0.2);
+		backdrop-filter: blur(20px);
+		gap: 16px;
+	}
+}
+
+:global(.configureGroupPopover) {
+	:global(.ant-popover-inner) {
+		display: flex;
+		align-items: center;
+		border-radius: 4px;
+		padding: 0px;
+		border: 1px solid var(--l1-border);
+		background: linear-gradient(
+			139deg,
+			color-mix(in srgb, var(--card) 80%, transparent) 0%,
+			color-mix(in srgb, var(--card) 90%, transparent) 98.68%
+		);
+		box-shadow: 4px 10px 16px 2px rgba(0, 0, 0, 0.2);
+		backdrop-filter: blur(20px);
+		gap: 16px;
+	}
+}

frontend/src/pages/DashboardsListPageV2/components/ListHeader/ListHeader.tsx

@@ -0,0 +1,145 @@
+import { Button, Popover, Tooltip } from 'antd';
+import { Typography } from '@signozhq/ui/typography';
+import {
+	ArrowDownWideNarrow,
+	Check,
+	Ellipsis,
+	HdmiPort,
+} from '@signozhq/icons';
+
+import type {
+	SortColumn,
+	SortOrder,
+} from '../../hooks/useDashboardsListQueryParams';
+
+import styles from './ListHeader.module.scss';
+
+interface Props {
+	sortColumn: SortColumn;
+	onSortChange: (column: SortColumn) => void;
+	sortOrder: SortOrder;
+	onOrderChange: (order: SortOrder) => void;
+	onConfigureMetadata: () => void;
+}
+
+function ListHeader({
+	sortColumn,
+	onSortChange,
+	sortOrder,
+	onOrderChange,
+	onConfigureMetadata,
+}: Props): JSX.Element {
+	return (
+		<div className={styles.wrapper}>
+			<Typography.Text className={styles.label}>All Dashboards</Typography.Text>
+			<section className={styles.rightActions}>
+				<Tooltip title="Sort">
+					<Popover
+						trigger="click"
+						content={
+							<div className={styles.sortContent}>
+								<Typography.Text className={styles.sortHeading}>
+									Sort By
+								</Typography.Text>
+								<Button
+									type="text"
+									className={styles.sortButton}
+									onClick={(): void => onSortChange('name')}
+									data-testid="sort-by-name"
+								>
+									Name
+									{sortColumn === 'name' && <Check size={14} />}
+								</Button>
+								<Button
+									type="text"
+									className={styles.sortButton}
+									onClick={(): void => onSortChange('created_at')}
+									data-testid="sort-by-last-created"
+								>
+									Last created
+									{sortColumn === 'created_at' && <Check size={14} />}
+								</Button>
+								<Button
+									type="text"
+									className={styles.sortButton}
+									onClick={(): void => onSortChange('updated_at')}
+									data-testid="sort-by-last-updated"
+								>
+									Last updated
+									{sortColumn === 'updated_at' && <Check size={14} />}
+								</Button>
+								<div className={styles.sortDivider} />
+								<Typography.Text className={styles.sortHeading}>Order</Typography.Text>
+								<Button
+									type="text"
+									className={styles.sortButton}
+									onClick={(): void => onOrderChange('asc')}
+									data-testid="sort-order-asc"
+								>
+									Ascending
+									{sortOrder === 'asc' && <Check size={14} />}
+								</Button>
+								<Button
+									type="text"
+									className={styles.sortButton}
+									onClick={(): void => onOrderChange('desc')}
+									data-testid="sort-order-desc"
+								>
+									Descending
+									{sortOrder === 'desc' && <Check size={14} />}
+								</Button>
+							</div>
+						}
+						rootClassName="sortDashboardsPopover"
+						placement="bottomRight"
+						arrow={false}
+					>
+						<button
+							type="button"
+							className={styles.iconTrigger}
+							data-testid="sort-by"
+							aria-label="Sort"
+						>
+							<ArrowDownWideNarrow size={14} />
+						</button>
+					</Popover>
+				</Tooltip>
+				<Popover
+					trigger="click"
+					content={
+						<div className={styles.configureContent}>
+							<button
+								type="button"
+								className={styles.configureItem}
+								onClick={(e): void => {
+									e.preventDefault();
+									e.stopPropagation();
+									onConfigureMetadata();
+								}}
+								data-testid="configure-metadata-trigger"
+							>
+								<span className={styles.configureIcon}>
+									<HdmiPort size={14} />
+								</span>
+								<span>Configure metadata</span>
+							</button>
+						</div>
+					}
+					rootClassName="configureGroupPopover"
+					placement="bottomRight"
+					arrow={false}
+				>
+					<button
+						type="button"
+						className={styles.iconTrigger}
+						aria-label="More options"
+					>
+						<Ellipsis size={14} />
+					</button>
+				</Popover>
+			</section>
+		</div>
+	);
+}
+
+export default ListHeader;

frontend/src/pages/DashboardsListPageV2/components/SearchBar/SearchBar.module.scss

@@ -0,0 +1,24 @@
+.submit {
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	width: 18px;
+	height: 18px;
+	padding: 0;
+	background: transparent;
+	border: none;
+	border-radius: 3px;
+	color: inherit;
+	cursor: pointer;
+	transition: background 120ms ease;
+
+	&:hover,
+	&:focus-visible {
+		background: color-mix(in srgb, var(--l1-foreground) 12%, transparent);
+		outline: none;
+	}
+
+	&:active {
+		background: color-mix(in srgb, var(--l1-foreground) 20%, transparent);
+	}
+}

frontend/src/pages/DashboardsListPageV2/components/SearchBar/SearchBar.tsx

@@ -0,0 +1,49 @@
+import { ChangeEvent, KeyboardEvent, MouseEvent } from 'react';
+import { Input } from '@signozhq/ui/input';
+import { Color } from '@signozhq/design-tokens';
+import { CornerDownLeft, Search } from '@signozhq/icons';
+
+import styles from './SearchBar.module.scss';
+
+interface Props {
+	value: string;
+	onChange: (value: string) => void;
+	onSubmit: () => void;
+}
+
+function SearchBar({ value, onChange, onSubmit }: Props): JSX.Element {
+	return (
+		<Input
+			placeholder="Search with DSL (e.g. name CONTAINS 'foo')"
+			prefix={<Search size={12} color={Color.BG_VANILLA_400} />}
+			suffix={
+				<button
+					type="button"
+					className={styles.submit}
+					aria-label="Run search"
+					data-testid="dashboards-list-search-submit"
+					onMouseDown={(e: MouseEvent<HTMLButtonElement>): void => {
+						// Prevent the input's blur from firing first and double-submitting.
+						e.preventDefault();
+					}}
+					onClick={onSubmit}
+				>
+					<CornerDownLeft size={12} color={Color.BG_VANILLA_400} />
+				</button>
+			}
+			value={value}
+			testId="dashboards-list-search"
+			onChange={(e: ChangeEvent<HTMLInputElement>): void =>
+				onChange(e.target.value)
+			}
+			onBlur={onSubmit}
+			onKeyDown={(e: KeyboardEvent<HTMLInputElement>): void => {
+				if (e.key === 'Enter') {
+					onSubmit();
+				}
+			}}
+		/>
+	);
+}
+
+export default SearchBar;

frontend/src/pages/DashboardsListPageV2/components/states/EmptyState/EmptyState.module.scss

@@ -0,0 +1,40 @@
+.wrapper {
+	composes: cardWrapper from '../states.module.scss';
+	padding: 105px 141px;
+}
+
+.image {
+	width: 32px;
+	height: 32px;
+}
+
+.copy {
+	margin-top: 4px;
+}
+
+.noDashboard {
+	composes: bodyText from '../states.module.scss';
+	color: var(--l1-foreground);
+	font-weight: var(--font-weight-medium);
+}
+
+.info {
+	composes: bodyText from '../states.module.scss';
+	color: var(--l2-foreground);
+	font-weight: var(--font-weight-normal);
+}
+
+.actions {
+	display: flex;
+	gap: 24px;
+	align-items: center;
+	margin-top: 24px;
+}
+
+.learnMore {
+	composes: learnMoreLink from '../states.module.scss';
+}
+
+.learnMoreArrow {
+	composes: learnMoreArrow from '../states.module.scss';
+}

frontend/src/pages/DashboardsListPageV2/components/states/EmptyState/EmptyState.tsx

@@ -0,0 +1,54 @@
+import { ReactNode } from 'react';
+import { Button } from '@signozhq/ui/button';
+import { Typography } from '@signozhq/ui/typography';
+import { ArrowUpRight } from '@signozhq/icons';
+import logEvent from 'api/common/logEvent';
+
+import dashboardsUrl from '@/assets/Icons/dashboards.svg';
+
+import styles from './EmptyState.module.scss';
+import { openInNewTab } from 'utils/navigation';
+
+interface Props {
+	createDropdown?: ReactNode;
+}
+
+const LEARN_MORE_HREF =
+	'https://signoz.io/docs/userguide/manage-dashboards?utm_source=product&utm_medium=dashboard-list-empty-state';
+
+function EmptyState({ createDropdown }: Props): JSX.Element {
+	return (
+		<div className={styles.wrapper}>
+			<img src={dashboardsUrl} alt="dashboards" className={styles.image} />
+			<section className={styles.copy}>
+				<Typography.Text className={styles.noDashboard}>
+					No dashboards yet.{' '}
+				</Typography.Text>
+				<Typography.Text className={styles.info}>
+					Create a dashboard to start visualizing your data
+				</Typography.Text>
+			</section>
+
+			{createDropdown ? (
+				<section className={styles.actions}>
+					{createDropdown}
+					<Button
+						variant="link"
+						color="primary"
+						className={styles.learnMore}
+						testId="learn-more"
+						onClick={(): void => {
+							logEvent('Dashboard List: Learn more clicked', {});
+							openInNewTab(LEARN_MORE_HREF);
+						}}
+					>
+						Learn more
+					</Button>
+					<ArrowUpRight size={16} className={styles.learnMoreArrow} />
+				</section>
+			) : null}
+		</div>
+	);
+}
+
+export default EmptyState;

frontend/src/pages/DashboardsListPageV2/components/states/ErrorState/ErrorState.module.scss

@@ -0,0 +1,36 @@
+.wrapper {
+	composes: cardWrapper from '../states.module.scss';
+	padding: 105px 141px;
+	gap: 4px;
+}
+
+.img {
+	max-width: 100%;
+}
+
+.errorText {
+	composes: bodyText from '../states.module.scss';
+	color: var(--l1-foreground);
+	font-weight: var(--font-weight-medium);
+}
+
+.errorDetail {
+	composes: bodyText from '../states.module.scss';
+	color: var(--l2-foreground);
+	font-weight: var(--font-weight-normal);
+}
+
+.actionButtons {
+	display: flex;
+	gap: 24px;
+	align-items: center;
+	margin-top: 20px;
+}
+
+.learnMore {
+	composes: learnMoreLink from '../states.module.scss';
+}
+
+.learnMoreArrow {
+	composes: learnMoreArrow from '../states.module.scss';
+}

frontend/src/pages/DashboardsListPageV2/components/states/ErrorState/ErrorState.tsx

@@ -0,0 +1,81 @@
+import { Button } from '@signozhq/ui/button';
+import { Typography } from '@signozhq/ui/typography';
+import { ArrowUpRight, RotateCw } from '@signozhq/icons';
+import { handleContactSupport } from 'container/Integrations/utils';
+
+import awwSnapUrl from '@/assets/Icons/awwSnap.svg';
+
+import { formatQueryErrorMessage } from '../../../utils';
+import styles from './ErrorState.module.scss';
+
+interface Props {
+	isCloudUser: boolean;
+	onRetry: () => void;
+	httpStatus?: number;
+	errorMessage?: string;
+}
+
+const GENERIC_MESSAGE =
+	'Something went wrong :/ Please retry or contact support.';
+const INVALID_QUERY_FALLBACK = 'Please review the syntax and try again.';
+
+function ErrorState({
+	isCloudUser,
+	onRetry,
+	httpStatus,
+	errorMessage,
+}: Props): JSX.Element {
+	// 4xx responses are client errors — the same request will keep failing.
+	// Surface the BE-provided detail (e.g. DSL parse errors) and skip Retry.
+	const isClientError =
+		httpStatus !== undefined && httpStatus >= 400 && httpStatus < 500;
+
+	const cleanedDetail = formatQueryErrorMessage(errorMessage);
+
+	return (
+		<div className={styles.wrapper}>
+			<img src={awwSnapUrl} alt="something went wrong" className={styles.img} />
+
+			{isClientError ? (
+				<>
+					<Typography.Text className={styles.errorText}>
+						Invalid query
+					</Typography.Text>
+					<Typography.Text className={styles.errorDetail}>
+						{cleanedDetail || INVALID_QUERY_FALLBACK}
+					</Typography.Text>
+				</>
+			) : (
+				<Typography.Text className={styles.errorText}>
+					{GENERIC_MESSAGE}
+				</Typography.Text>
+			)}
+
+			<section className={styles.actionButtons}>
+				{!isClientError && (
+					<Button
+						variant="outlined"
+						color="secondary"
+						prefix={<RotateCw size={16} />}
+						onClick={onRetry}
+						testId="dashboards-list-retry"
+					>
+						Retry
+					</Button>
+				)}
+				<Button
+					variant="link"
+					color="primary"
+					className={styles.learnMore}
+					onClick={(): void => handleContactSupport(isCloudUser)}
+					testId="dashboards-list-contact-support"
+				>
+					Contact Support
+				</Button>
+				<ArrowUpRight size={16} className={styles.learnMoreArrow} />
+			</section>
+		</div>
+	);
+}
+
+export default ErrorState;

frontend/src/pages/DashboardsListPageV2/components/states/LoadingState/LoadingState.module.scss

@@ -0,0 +1,11 @@
+.wrapper {
+	display: flex;
+	flex-direction: column;
+	gap: 16px;
+	margin-top: 16px;
+}
+
+.skeleton {
+	height: 125px;
+	width: 100%;
+}

frontend/src/pages/DashboardsListPageV2/components/states/LoadingState/LoadingState.tsx

@@ -0,0 +1,16 @@
+import { Skeleton } from 'antd';
+
+import styles from './LoadingState.module.scss';
+
+function LoadingState(): JSX.Element {
+	return (
+		<div className={styles.wrapper}>
+			<Skeleton.Input active size="large" className={styles.skeleton} />
+			<Skeleton.Input active size="large" className={styles.skeleton} />
+			<Skeleton.Input active size="large" className={styles.skeleton} />
+			<Skeleton.Input active size="large" className={styles.skeleton} />
+		</div>
+	);
+}
+
+export default LoadingState;

frontend/src/pages/DashboardsListPageV2/components/states/NoResultsState/NoResultsState.module.scss

@@ -0,0 +1,5 @@
+.wrapper {
+	composes: cardWrapper from '../states.module.scss';
+	padding: 105px 190px;
+	gap: 8px;
+}

frontend/src/pages/DashboardsListPageV2/components/states/NoResultsState/NoResultsState.tsx

@@ -0,0 +1,22 @@
+import { Typography } from '@signozhq/ui/typography';
+
+import emptyStateUrl from '@/assets/Icons/emptyState.svg';
+
+import styles from './NoResultsState.module.scss';
+
+interface Props {
+	searchString: string;
+}
+
+function NoResultsState({ searchString }: Props): JSX.Element {
+	return (
+		<div className={styles.wrapper}>
+			<img src={emptyStateUrl} alt="img" height={32} width={32} />
+			<Typography.Text>
+				No dashboards found for {searchString}. Create a new dashboard?
+			</Typography.Text>
+		</div>
+	);
+}
+
+export default NoResultsState;

frontend/src/pages/DashboardsListPageV2/components/states/states.module.scss

@@ -0,0 +1,34 @@
+// Shared building blocks for the dashboards-list view states.
+// Composed via CSS-modules `composes:` from each state's own SCSS.
+
+.cardWrapper {
+	display: flex;
+	flex-direction: column;
+	height: 320px;
+	margin-top: 16px;
+	justify-content: center;
+	align-items: flex-start;
+	border-radius: 6px;
+	border: 1px dashed var(--l1-border);
+}
+
+.bodyText {
+	font-family: Inter;
+	font-size: var(--font-size-sm);
+	font-style: normal;
+	line-height: 18px;
+	letter-spacing: -0.07px;
+}
+
+.learnMoreLink {
+	composes: bodyText;
+	color: var(--bg-robin-400);
+	font-weight: var(--font-weight-medium);
+	padding: 0px;
+}
+
+.learnMoreArrow {
+	margin-left: -20px;
+	color: var(--bg-robin-400);
+	cursor: pointer;
+}

frontend/src/pages/DashboardsListPageV2/hooks/useDashboardsListQueryParams.ts

@@ -0,0 +1,36 @@
+import {
+	parseAsInteger,
+	parseAsString,
+	parseAsStringLiteral,
+	useQueryState,
+	type Options,
+	type UseQueryStateReturn,
+} from 'nuqs';
+
+export const SORT_COLUMNS = ['updated_at', 'created_at', 'name'] as const;
+export type SortColumn = (typeof SORT_COLUMNS)[number];
+
+export const SORT_ORDERS = ['asc', 'desc'] as const;
+export type SortOrder = (typeof SORT_ORDERS)[number];
+
+const opts: Options = { history: 'push' };
+
+export const useSortColumn = (): UseQueryStateReturn<SortColumn, SortColumn> =>
+	useQueryState(
+		'sort',
+		parseAsStringLiteral(SORT_COLUMNS)
+			.withDefault('updated_at')
+			.withOptions(opts),
+	);
+
+export const useSortOrder = (): UseQueryStateReturn<SortOrder, SortOrder> =>
+	useQueryState(
+		'order',
+		parseAsStringLiteral(SORT_ORDERS).withDefault('desc').withOptions(opts),
+	);
+
+export const usePage = (): UseQueryStateReturn<number, number> =>
+	useQueryState('page', parseAsInteger.withDefault(1).withOptions(opts));
+
+export const useSearch = (): UseQueryStateReturn<string, string> =>
+	useQueryState('search', parseAsString.withDefault('').withOptions(opts));

frontend/src/pages/DashboardsListPageV2/index.tsx

@@ -1,9 +1,3 @@
-function DashboardsListPageV2(): JSX.Element {
-	return (
-		<div>
-			<h1>Dashboards List Page V2</h1>
-		</div>
-	);
-}
+import DashboardsListPageV2 from './DashboardsListPageV2';
 
 export default DashboardsListPageV2;

frontend/src/pages/DashboardsListPageV2/utils.ts

@@ -0,0 +1,52 @@
+import dayjs from 'dayjs';
+import { isEmpty } from 'lodash-es';
+import type { DashboardtypesGettableDashboardWithPinDTO } from 'api/generated/services/sigNoz.schemas';
+
+export type DashboardListItem = DashboardtypesGettableDashboardWithPinDTO;
+
+export const tagsToStrings = (
+	tags: { key: string; value: string }[] | null | undefined,
+): string[] =>
+	(tags ?? []).map((tag) =>
+		tag.key === tag.value ? tag.key : `${tag.key}:${tag.value}`,
+	);
+
+export const lastUpdatedLabel = (time: string | undefined): string => {
+	if (!time || isEmpty(time)) {
+		return 'No updates yet!';
+	}
+	const diff = dayjs();
+	const ref = dayjs(time);
+	const months = diff.diff(ref, 'months');
+	if (months > 0) {
+		return `Last Updated ${months} months ago`;
+	}
+	const days = diff.diff(ref, 'days');
+	if (days > 0) {
+		return `Last Updated ${days} days ago`;
+	}
+	const hours = diff.diff(ref, 'hours');
+	if (hours > 0) {
+		return `Last Updated ${hours} hrs ago`;
+	}
+	const minutes = diff.diff(ref, 'minutes');
+	if (minutes > 0) {
+		return `Last Updated ${minutes} mins ago`;
+	}
+	const seconds = diff.diff(ref, 'seconds');
+	return `Last Updated ${seconds} sec ago`;
+};
+
+// Normalize BE query-parse error messages for display:
+//   - Drop the "invalid filter query:" prefix (the UI already says "Invalid query").
+//   - Backticks → double quotes for the format hint that follows the em-dash.
+//   - Trim surrounding whitespace.
+export const formatQueryErrorMessage = (raw: string | undefined): string => {
+	if (!raw) {
+		return '';
+	}
+	return raw
+		.replace(/^invalid filter query:\s*/i, '')
+		.replace(/`([^`]+)`/g, '"$1"')
+		.trim();
+};

frontend/tsconfig.json

@@ -48,7 +48,9 @@
 		"node_modules",
 		"src/parser/*.ts",
 		"src/parser/TraceOperatorParser/*.ts",
-		"orval.config.ts"
+		"orval.config.ts",
+		"src/pages/DashboardsListPageV2/**/*",
+		"src/pages/DashboardPageV2/**/*"
 	],
 	"include": [
 		"./src",

pkg/apiserver/signozapiserver/cloudintegration.go

@@ -192,26 +192,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

@@ -76,7 +76,6 @@ type Handler interface {
 	DisconnectAccount(http.ResponseWriter, *http.Request)
 	ListServicesMetadata(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

@@ -322,51 +322,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()

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

@@ -139,33 +139,6 @@ def test_get_service_details_with_account(
     assert data["id"] == SERVICE_ID
     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,