feat: adding integration test for new API endpoint

docs/api/openapi.yml

@@ -7965,6 +7965,80 @@ 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

ee/modules/dashboard/impldashboard/module.go

@@ -237,10 +237,6 @@ func (module *module) Update(ctx context.Context, orgID valuer.UUID, id valuer.U
 	return module.pkgDashboardModule.Update(ctx, orgID, id, updatedBy, data, diff)
 }
 
-func (module *module) ResetSystemDashboard(ctx context.Context, orgID valuer.UUID, id valuer.UUID, updatedBy string) (*dashboardtypes.Dashboard, error) {
-	return module.pkgDashboardModule.ResetSystemDashboard(ctx, orgID, id, updatedBy)
-}
-
 func (module *module) LockUnlock(ctx context.Context, orgID valuer.UUID, id valuer.UUID, updatedBy string, isAdmin bool, lock bool) error {
 	return module.pkgDashboardModule.LockUnlock(ctx, orgID, id, updatedBy, isAdmin, lock)
 }

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

@@ -31,6 +31,8 @@ import type {
 	DisconnectAccountPathParameters,
 	GetAccount200,
 	GetAccountPathParameters,
+	GetAccountService200,
+	GetAccountServicePathParameters,
 	GetConnectionCredentials200,
 	GetConnectionCredentialsPathParameters,
 	GetService200,
@@ -631,6 +633,117 @@ 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,6 +8566,19 @@ 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/components/RouteTab/RouteTab.styles.scss

@@ -1,12 +0,0 @@
-.route-tab-header {
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-	gap: 8px;
-	padding: 4px;
-}
-
-.route-tab-extra {
-	display: flex;
-	align-items: center;
-}

frontend/src/components/RouteTab/RouteTab.test.tsx

@@ -70,7 +70,7 @@ describe('RouteTab component', () => {
 			</Router>,
 		);
 		expect(history.location.pathname).toBe('/');
-		fireEvent.mouseDown(screen.getByRole('tab', { name: 'Tab2' }));
+		fireEvent.click(screen.getByRole('tab', { name: 'Tab2' }));
 		expect(history.location.pathname).toBe('/tab2');
 	});
 
@@ -87,7 +87,7 @@ describe('RouteTab component', () => {
 				/>
 			</Router>,
 		);
-		fireEvent.mouseDown(screen.getByRole('tab', { name: 'Tab2' }));
+		fireEvent.click(screen.getByRole('tab', { name: 'Tab2' }));
 		expect(onChangeHandler).toHaveBeenCalled();
 	});
 });

frontend/src/components/RouteTab/index.tsx

@@ -1,17 +1,10 @@
-import './RouteTab.styles.scss';
-
 import {
 	generatePath,
 	matchPath,
 	useLocation,
 	useParams,
 } from 'react-router-dom';
-import {
-	TabsContent,
-	TabsList,
-	TabsRoot,
-	TabsTrigger,
-} from '@signozhq/ui/tabs';
+import { Tabs, TabsProps } from 'antd';
 import HeaderRightSection from 'components/HeaderRightSection/HeaderRightSection';
 
 import { RouteTabProps } from './types';
@@ -23,13 +16,11 @@ interface Params {
 function RouteTab({
 	routes,
 	activeKey,
-	defaultActiveKey,
 	onChangeHandler,
 	history,
-	showRightSection = true,
-	tabBarExtraContent,
-	hideTabBar = false,
-}: RouteTabProps): JSX.Element {
+	showRightSection,
+	...rest
+}: RouteTabProps & TabsProps): JSX.Element {
 	const params = useParams<Params>();
 	const location = useLocation();
 
@@ -55,38 +46,38 @@ function RouteTab({
 		}
 	};
 
-	const resolvedActiveKey = currentRoute?.key || activeKey;
-	const extraContent =
-		tabBarExtraContent ??
-		(showRightSection && (
-			<HeaderRightSection enableAnnouncements={false} enableShare enableFeedback />
-		));
+	const items = routes.map(({ Component, name, route, key }) => ({
+		label: name,
+		key,
+		tabKey: route,
+		children: <Component />,
+	}));
 
 	return (
-		<TabsRoot
-			value={resolvedActiveKey}
-			defaultValue={defaultActiveKey ?? resolvedActiveKey}
-			onValueChange={onChange}
-		>
-			{!hideTabBar && (
-				<div className="route-tab-header">
-					<TabsList>
-						{routes.map(({ name, key }) => (
-							<TabsTrigger key={key} value={key}>
-								{name}
-							</TabsTrigger>
-						))}
-					</TabsList>
-					{extraContent && <div className="route-tab-extra">{extraContent}</div>}
-				</div>
-			)}
-			{routes.map(({ key, Component }) => (
-				<TabsContent key={key} value={key}>
-					<Component />
-				</TabsContent>
-			))}
-		</TabsRoot>
+		<Tabs
+			onChange={onChange}
+			destroyInactiveTabPane
+			activeKey={currentRoute?.key || activeKey}
+			defaultActiveKey={currentRoute?.key || activeKey}
+			animated
+			items={items}
+			tabBarExtraContent={
+				showRightSection && (
+					<HeaderRightSection
+						enableAnnouncements={false}
+						enableShare
+						enableFeedback
+					/>
+				)
+			}
+			{...rest}
+		/>
 	);
 }
 
+RouteTab.defaultProps = {
+	onChangeHandler: undefined,
+	showRightSection: true,
+};
+
 export default RouteTab;

frontend/src/components/RouteTab/types.ts

@@ -1,5 +1,5 @@
+import { TabsProps } from 'antd';
 import { History } from 'history';
-import { ReactNode } from 'react';
 
 export type TabRoutes = {
 	name: React.ReactNode;
@@ -10,11 +10,8 @@ export type TabRoutes = {
 
 export interface RouteTabProps {
 	routes: TabRoutes[];
-	activeKey: string | undefined;
-	defaultActiveKey?: string;
+	activeKey: TabsProps['activeKey'];
 	onChangeHandler?: (key: string) => void;
 	history: History<unknown>;
-	showRightSection?: boolean;
-	tabBarExtraContent?: ReactNode;
-	hideTabBar?: boolean;
+	showRightSection: boolean;
 }

frontend/src/container/DashboardContainer/DashboardSettings/DashboardSettingsContent.styles.scss

@@ -0,0 +1,70 @@
+.settings-tabs {
+	.ant-tabs-nav-list {
+		height: 32px;
+		flex-shrink: 0;
+		border-radius: 2px;
+		border: 1px solid var(--l1-border);
+		background: var(--l2-background);
+		box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
+		transition: opacity 0.1s !important;
+
+		.ant-tabs-tab + .ant-tabs-tab {
+			margin: 0px;
+		}
+
+		.ant-tabs-tab:not(:last-child) {
+			border-right: 1px solid var(--l1-border) !important;
+		}
+
+		.overview-btn {
+			width: 114px;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+		}
+
+		.variables-btn {
+			width: 114px;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+		}
+
+		.public-dashboard-btn {
+			width: 150px;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+
+			&.disabled-btn {
+				opacity: 0.5;
+				cursor: not-allowed;
+			}
+		}
+
+		.ant-tabs-ink-bar {
+			display: none;
+		}
+
+		.ant-tabs-tab-active {
+			.overview-btn {
+				border-radius: 2px 0px 0px 2px;
+				background: var(--l1-border);
+			}
+
+			.variables-btn {
+				border-radius: 2px 0px 0px 2px;
+				background: var(--l1-border);
+			}
+
+			.public-dashboard-btn {
+				border-radius: 2px 0px 0px 2px;
+				background: var(--l1-border);
+			}
+		}
+	}
+
+	.ant-tabs-nav::before {
+		border-bottom: none;
+	}
+}

frontend/src/container/DashboardContainer/DashboardSettings/index.tsx

@@ -1,4 +1,4 @@
-import { Tabs, TabItemProps } from '@signozhq/ui/tabs';
+import { Button, Tabs, Tooltip } from 'antd';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
 import { Braces, Globe, Table } from '@signozhq/icons';
 import { useAppContext } from 'providers/App/App';
@@ -9,6 +9,8 @@ import DashboardVariableSettings from './DashboardVariableSettings';
 import GeneralDashboardSettings from './General';
 import PublicDashboardSetting from './PublicDashboard';
 
+import './DashboardSettingsContent.styles.scss';
+
 function DashboardSettings({
 	variablesSettingsTabHandle,
 }: {
@@ -19,26 +21,49 @@ function DashboardSettings({
 
 	const enablePublicDashboard = isCloudUser || isEnterpriseSelfHostedUser;
 
-	const publicDashboardItem: TabItemProps = {
+	const publicDashboardItem = {
+		label: (
+			<Tooltip
+				title={
+					user?.role !== USER_ROLES.ADMIN
+						? 'Only admins can publish / manage public dashboards'
+						: ''
+				}
+				placement="right"
+			>
+				<Button
+					type="text"
+					icon={<Globe size={14} />}
+					className={`public-dashboard-btn ${
+						user?.role !== USER_ROLES.ADMIN ? 'disabled-btn' : ''
+					}`}
+				>
+					Publish
+				</Button>
+			</Tooltip>
+		),
 		key: 'public-dashboard',
-		label: 'Publish',
-		prefixIcon: <Globe size={14} />,
 		children: <PublicDashboardSetting />,
 		disabled: user?.role !== USER_ROLES.ADMIN,
-		disabledReason: 'Only admins can publish / manage public dashboards',
 	};
 
-	const items: TabItemProps[] = [
+	const items = [
 		{
+			label: (
+				<Button type="text" icon={<Table size={14} />} className="overview-btn">
+					Overview
+				</Button>
+			),
 			key: 'general',
-			label: 'Overview',
-			prefixIcon: <Table size={14} />,
 			children: <GeneralDashboardSettings />,
 		},
 		{
+			label: (
+				<Button type="text" icon={<Braces size={14} />} className="variables-btn">
+					Variables
+				</Button>
+			),
 			key: 'variables',
-			label: 'Variables',
-			prefixIcon: <Braces size={14} />,
 			children: (
 				<DashboardVariableSettings
 					variablesSettingsTabHandle={variablesSettingsTabHandle}
@@ -48,7 +73,7 @@ function DashboardSettings({
 		...(enablePublicDashboard ? [publicDashboardItem] : []),
 	];
 
-	return <Tabs items={items} />;
+	return <Tabs items={items} animated className="settings-tabs" />;
 }
 
 export default DashboardSettings;

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

@@ -1,4 +1,5 @@
-import { Tabs, TabItemProps } from '@signozhq/ui/tabs';
+import { Button, Tabs, TabsProps } from 'antd';
+import { Typography } from '@signozhq/ui/typography';
 import ConfigureIcon from 'assets/Integrations/ConfigureIcon';
 import { CableCar, Group } from '@signozhq/icons';
 import { IntegrationDetailedProps } from 'types/api/integrations/types';
@@ -21,11 +22,18 @@ function IntegrationDetailContent(
 ): JSX.Element {
 	const { activeDetailTab, integrationData, integrationId, setActiveDetailTab } =
 		props;
-	const items: TabItemProps[] = [
+	const items: TabsProps['items'] = [
 		{
 			key: 'overview',
-			label: 'Overview',
-			prefixIcon: <CableCar size={14} />,
+			label: (
+				<Button
+					type="text"
+					className="integration-tab-btns"
+					icon={<CableCar size={14} />}
+				>
+					<Typography.Text className="typography">Overview</Typography.Text>
+				</Button>
+			),
 			children: (
 				<Overview
 					categories={integrationData.categories}
@@ -36,8 +44,15 @@ function IntegrationDetailContent(
 		},
 		{
 			key: 'configuration',
-			label: 'Configure',
-			prefixIcon: <ConfigureIcon />,
+			label: (
+				<Button
+					type="text"
+					className="integration-tab-btns"
+					icon={<ConfigureIcon />}
+				>
+					<Typography.Text className="typography">Configure</Typography.Text>
+				</Button>
+			),
 			children: (
 				<Configure
 					configuration={integrationData.configuration}
@@ -47,8 +62,15 @@ function IntegrationDetailContent(
 		},
 		{
 			key: 'dataCollected',
-			label: 'Data Collected',
-			prefixIcon: <Group size={14} />,
+			label: (
+				<Button
+					type="text"
+					className="integration-tab-btns"
+					icon={<Group size={14} />}
+				>
+					<Typography.Text className="typography">Data Collected</Typography.Text>
+				</Button>
+			),
 			children: (
 				<DataCollected
 					logsData={integrationData.data_collected.logs}
@@ -59,7 +81,11 @@ function IntegrationDetailContent(
 	];
 	return (
 		<div className="integration-detail-container">
-			<Tabs value={activeDetailTab} items={items} onChange={setActiveDetailTab} />
+			<Tabs
+				activeKey={activeDetailTab}
+				items={items}
+				onChange={setActiveDetailTab}
+			/>
 		</div>
 	);
 }

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

@@ -168,6 +168,45 @@
 			padding: 10px 16px;
 			border: 1px solid var(--l1-border);
 			background: var(--l1-background);
+
+			.integration-tab-btns {
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				padding: 8px 8px 18px 8px !important;
+
+				.typography {
+					color: var(--l1-foreground);
+					font-family: Inter;
+					font-size: 14px;
+					font-style: normal;
+					font-weight: 400;
+					line-height: 20px; /* 142.857% */
+					letter-spacing: -0.07px;
+				}
+			}
+
+			.integration-tab-btns:hover {
+				&.ant-btn-text {
+					background-color: unset !important;
+				}
+			}
+
+			.ant-tabs-nav-list {
+				gap: 24px;
+			}
+
+			.ant-tabs-nav {
+				padding: 0px !important;
+			}
+
+			.ant-tabs-tab {
+				padding: 0 !important;
+			}
+
+			.ant-tabs-tab + .ant-tabs-tab {
+				margin: 0px !important;
+			}
 		}
 
 		.uninstall-integration-bar {

frontend/src/pages/MetricsApplication/MetricsApplication.styles.scss

@@ -1,3 +1,26 @@
 .service-route-tab {
 	margin-bottom: 64px;
+	.ant-tabs-nav {
+		&::before {
+			border-bottom: 1px solid var(--l1-border);
+		}
+		.ant-tabs-nav-wrap {
+			.ant-tabs-nav-list {
+				.ant-tabs-ink-bar {
+					background-color: var(--primary-background) !important;
+				}
+				.ant-tabs-tab {
+					font-size: 13px;
+					font-family: 'Inter';
+					color: var(--l1-foreground);
+					line-height: 20px;
+					letter-spacing: -0.07px;
+					gap: 10px;
+				}
+				.ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn {
+					color: var(--accent-primary);
+				}
+			}
+		}
+	}
 }

frontend/src/pages/MetricsApplication/MetricsApplication.tsx

@@ -1,5 +1,5 @@
 import { useParams } from 'react-router-dom';
-import { Tabs, TabItemProps } from '@signozhq/ui/tabs';
+import { Tabs, TabsProps } from 'antd';
 import { QueryParams } from 'constants/query';
 import DBCall from 'container/MetricsApplication/Tabs/DBCall';
 import External from 'container/MetricsApplication/Tabs/External';
@@ -24,7 +24,7 @@ function MetricsApplication(): JSX.Element {
 	const urlQuery = useUrlQuery();
 	const { safeNavigate } = useSafeNavigate();
 
-	const items: TabItemProps[] = [
+	const items: TabsProps['items'] = [
 		{
 			label: TAB_KEY_VS_LABEL[MetricsApplicationTab.OVER_METRICS],
 			key: MetricsApplicationTab.OVER_METRICS,
@@ -53,8 +53,9 @@ function MetricsApplication(): JSX.Element {
 			<ApDexApplication />
 			<Tabs
 				items={items}
-				value={activeKey}
+				activeKey={activeKey}
 				className="service-route-tab"
+				destroyInactiveTabPane
 				onChange={onTabChange}
 			/>
 		</div>

frontend/src/pages/Pipelines/Pipelines.styles.scss

@@ -0,0 +1,9 @@
+.pipeline-tabs {
+	.ant-tabs-content {
+		padding: 0 16px;
+	}
+
+	.ant-tabs-tabpane-hidden {
+		display: none !important;
+	}
+}

frontend/src/pages/Pipelines/index.tsx

@@ -2,7 +2,8 @@ import { useEffect, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useQuery } from 'react-query';
 import * as Sentry from '@sentry/react';
-import { Tabs, TabItemProps } from '@signozhq/ui/tabs';
+import type { TabsProps } from 'antd';
+import { Tabs } from 'antd';
 import getPipeline from 'api/pipeline/get';
 import Spinner from 'components/Spinner';
 import ChangeHistory from 'container/PipelinePage/Layouts/ChangeHistory';
@@ -12,6 +13,8 @@ import ErrorBoundaryFallback from 'pages/ErrorBoundaryFallback/ErrorBoundaryFall
 import { SuccessResponse } from 'types/api';
 import { Pipeline } from 'types/api/pipeline/def';
 
+import './Pipelines.styles.scss';
+
 const pipelineRefetchInterval = (
 	pipelineResponse: SuccessResponse<Pipeline> | undefined,
 ): number | false => {
@@ -43,7 +46,7 @@ function Pipelines(): JSX.Element {
 		refetchInterval: pipelineRefetchInterval,
 	});
 
-	const tabItems: TabItemProps[] = useMemo(
+	const tabItems: TabsProps['items'] = useMemo(
 		() => [
 			{
 				key: 'pipelines',
@@ -80,7 +83,11 @@ function Pipelines(): JSX.Element {
 
 	return (
 		<Sentry.ErrorBoundary fallback={<ErrorBoundaryFallback />}>
-			<Tabs defaultValue="pipelines" items={tabItems} />
+			<Tabs
+				className="pipeline-tabs"
+				defaultActiveKey="pipelines"
+				items={tabItems}
+			/>
 		</Sentry.ErrorBoundary>
 	);
 }

frontend/src/pages/Settings/Settings.tsx

@@ -340,7 +340,7 @@ function SettingsPage(): JSX.Element {
 						routes={routes}
 						activeKey={pathname}
 						history={history}
-						hideTabBar
+						tabBarStyle={{ display: 'none' }}
 					/>
 				</div>
 			</div>

frontend/src/pages/TraceDetailV2/TraceDetailV2.styles.scss

@@ -71,6 +71,88 @@
 			flex-direction: column;
 			gap: 25px;
 			padding-top: 16px;
+
+			.flamegraph-waterfall-toggle {
+				display: flex;
+				gap: 4px;
+				align-items: center;
+				justify-content: center;
+				height: 31px;
+				color: var(--l2-foreground);
+				padding: 5px 20px;
+				font-family: Inter;
+				font-size: 14px;
+				font-style: normal;
+				font-weight: 400;
+				line-height: 20px; /* 142.857% */
+				letter-spacing: -0.07px;
+
+				.ant-btn-icon {
+					margin-inline-end: 0px !important;
+				}
+			}
+
+			.span-list-toggle {
+				display: flex;
+				gap: 4px;
+				align-items: center;
+				justify-content: center;
+				height: 31px;
+				padding: 5px 20px;
+				color: var(--l2-foreground);
+				font-family: Inter;
+				font-size: 14px;
+				font-style: normal;
+				font-weight: 400;
+				line-height: 20px; /* 142.857% */
+				letter-spacing: -0.07px;
+
+				.ant-btn-icon {
+					margin-inline-end: 0px !important;
+				}
+			}
+
+			.trace-visualisation-tabs {
+				.ant-tabs-tab {
+					border-radius: 2px 0px 0px 0px;
+					background: var(--l2-background);
+					border-radius: 2px 2px 0px 0px;
+					border: 1px solid var(--l1-border);
+					box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
+					height: 31px;
+				}
+
+				.ant-tabs-tab-active {
+					background-color: var(--l1-background);
+
+					.ant-btn {
+						color: var(--l1-foreground) !important;
+					}
+				}
+
+				.ant-tabs-tab + .ant-tabs-tab {
+					margin: 0px;
+					border-left: 0px;
+				}
+
+				.ant-tabs-ink-bar {
+					height: 1px !important;
+					background: var(--l1-background) !important;
+				}
+
+				.ant-tabs-nav-list {
+					transform: translate(15px, 0px) !important;
+				}
+
+				.ant-tabs-nav::before {
+					border-bottom: 1px solid var(--l1-border);
+				}
+
+				.ant-tabs-nav {
+					margin: 0px;
+					padding: 0px !important;
+				}
+			}
 		}
 	}
 }

frontend/src/pages/TraceDetailV2/TraceDetailV2.tsx

@@ -5,7 +5,7 @@ import {
 	ResizablePanel,
 	ResizablePanelGroup,
 } from '@signozhq/resizable';
-import { Tabs, TabItemProps } from '@signozhq/ui/tabs';
+import { Button, Tabs } from 'antd';
 import FlamegraphImg from 'assets/TraceDetail/Flamegraph';
 import cx from 'classnames';
 import TraceFlamegraph from 'container/PaginatedTraceFlamegraph/PaginatedTraceFlamegraph';
@@ -86,11 +86,18 @@ function TraceDetailsV2(): JSX.Element {
 		}
 	}, [noData]);
 
-	const items: TabItemProps[] = [
+	const items = [
 		{
+			label: (
+				<Button
+					type="text"
+					icon={<FlamegraphImg />}
+					className="flamegraph-waterfall-toggle"
+				>
+					Flamegraph
+				</Button>
+			),
 			key: 'flamegraph',
-			label: 'Flamegraph',
-			prefixIcon: <FlamegraphImg />,
 			children: (
 				<>
 					<TraceFlamegraph
@@ -138,7 +145,11 @@ function TraceDetailsV2(): JSX.Element {
 					totalSpans={traceData?.payload?.totalSpansCount || 0}
 					notFound={noData}
 				/>
-				{!noData ? <Tabs items={items} /> : <NoData />}
+				{!noData ? (
+					<Tabs items={items} animated className="trace-visualisation-tabs" />
+				) : (
+					<NoData />
+				)}
 			</ResizablePanel>
 
 			<ResizableHandle withHandle className="resizable-handle" />

frontend/src/pages/WorkspaceLocked/WorkspaceLocked.styles.scss

@@ -22,6 +22,21 @@ $dark-theme: 'darkMode';
 
 	&__tabs {
 		margin-top: 148px;
+
+		.ant-tabs {
+			&-nav {
+				&::before {
+					border-color: var(--l1-border);
+
+					.#{$light-theme} & {
+						border-color: var(--l1-border);
+					}
+				}
+			}
+			&-nav-wrap {
+				justify-content: center;
+			}
+		}
 	}
 
 	&__modal {

frontend/src/pages/WorkspaceLocked/WorkspaceLocked.tsx

@@ -2,7 +2,7 @@
 import React, { useCallback, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useMutation } from 'react-query';
-import type { TabItemProps } from '@signozhq/ui/tabs';
+import type { TabsProps } from 'antd';
 import {
 	Alert,
 	Button,
@@ -14,8 +14,8 @@ import {
 	Row,
 	Skeleton,
 	Space,
+	Tabs,
 } from 'antd';
-import { Tabs } from '@signozhq/ui/tabs';
 import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
 import updateCreditCardApi from 'api/v1/checkout/create';
@@ -154,7 +154,7 @@ export default function WorkspaceBlocked(): JSX.Element {
 				/>
 			));
 
-	const tabItems: TabItemProps[] = [
+	const tabItems: TabsProps['items'] = [
 		{
 			key: 'whyChooseSignoz',
 			label: t('whyChooseSignoz'),
@@ -398,8 +398,8 @@ export default function WorkspaceBlocked(): JSX.Element {
 							<div className="workspace-locked__tabs">
 								<Tabs
 									items={tabItems}
-									defaultValue="youAreInGoodCompany"
-									onChange={handleTabClick}
+									defaultActiveKey="youAreInGoodCompany"
+									onTabClick={handleTabClick}
 								/>
 							</div>
 						</>

frontend/src/styles.scss

@@ -825,6 +825,5 @@ body.ai-assistant-panel-open {
 // overrides
 :root {
 	--input-focus-outline-width: 0;
-	--tab-list-primary-gap: 12px;
 	--radius-2: 4px;
 }

pkg/apiserver/signozapiserver/cloudintegration.go

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

pkg/modules/dashboard/dashboard.go

@@ -42,8 +42,6 @@ type Module interface {
 
 	Update(ctx context.Context, orgID valuer.UUID, id valuer.UUID, updatedBy string, data dashboardtypes.UpdatableDashboard, diff int) (*dashboardtypes.Dashboard, error)
 
-	ResetSystemDashboard(ctx context.Context, orgID valuer.UUID, id valuer.UUID, updatedBy string) (*dashboardtypes.Dashboard, error)
-
 	LockUnlock(ctx context.Context, orgID valuer.UUID, id valuer.UUID, updatedBy string, isAdmin bool, lock bool) error
 
 	Delete(ctx context.Context, orgID valuer.UUID, id valuer.UUID) error
@@ -91,6 +89,4 @@ type Handler interface {
 	CreateV2(http.ResponseWriter, *http.Request)
 
 	GetV2(http.ResponseWriter, *http.Request)
-
-	ResetSystemDashboard(http.ResponseWriter, *http.Request)
 }

pkg/modules/dashboard/impldashboard/handler.go

@@ -185,38 +185,6 @@ func (handler *handler) LockUnlock(rw http.ResponseWriter, r *http.Request) {
 
 }
 
-// ResetSystemDashboard resets the dashboard identified by {id} to its default.
-func (handler *handler) ResetSystemDashboard(rw http.ResponseWriter, r *http.Request) {
-	ctx, cancel := context.WithTimeout(r.Context(), 10*time.Second)
-	defer cancel()
-
-	claims, err := authtypes.ClaimsFromContext(ctx)
-	if err != nil {
-		render.Error(rw, err)
-		return
-	}
-
-	orgID, err := valuer.NewUUID(claims.OrgID)
-	if err != nil {
-		render.Error(rw, err)
-		return
-	}
-
-	id, err := valuer.NewUUID(mux.Vars(r)["id"])
-	if err != nil {
-		render.Error(rw, err)
-		return
-	}
-
-	dashboard, err := handler.module.ResetSystemDashboard(ctx, orgID, id, claims.Email)
-	if err != nil {
-		render.Error(rw, err)
-		return
-	}
-
-	render.Success(rw, http.StatusOK, dashboard)
-}
-
 func (handler *handler) Delete(rw http.ResponseWriter, r *http.Request) {
 	ctx, cancel := context.WithTimeout(r.Context(), 10*time.Second)
 	defer cancel()

pkg/modules/dashboard/impldashboard/module.go

@@ -97,7 +97,8 @@ func (module *module) Update(ctx context.Context, orgID valuer.UUID, id valuer.U
 		return nil, err
 	}
 
-	if err := dashboard.Update(ctx, updatableDashboard, updatedBy, diff); err != nil {
+	err = dashboard.Update(ctx, updatableDashboard, updatedBy, diff)
+	if err != nil {
 		return nil, err
 	}
 
@@ -106,31 +107,14 @@ func (module *module) Update(ctx context.Context, orgID valuer.UUID, id valuer.U
 		return nil, err
 	}
 
-	if err := module.store.Update(ctx, orgID, storableDashboard); err != nil {
+	err = module.store.Update(ctx, orgID, storableDashboard)
+	if err != nil {
 		return nil, err
 	}
 
 	return dashboard, nil
 }
 
-func (module *module) ResetSystemDashboard(ctx context.Context, orgID valuer.UUID, id valuer.UUID, updatedBy string) (*dashboardtypes.Dashboard, error) {
-	dashboard, err := module.Get(ctx, orgID, id)
-	if err != nil {
-		return nil, err
-	}
-
-	if dashboard.Source != dashboardtypes.SourceSystem {
-		return nil, errors.Newf(errors.TypeInvalidInput, errors.CodeInvalidInput, "only system dashboards can be reset")
-	}
-
-	defaults, err := dashboardtypes.NewDefaultSystemDashboard(orgID)
-	if err != nil {
-		return nil, err
-	}
-
-	return module.Update(ctx, orgID, id, updatedBy, defaults.Data, 0)
-}
-
 func (module *module) LockUnlock(ctx context.Context, orgID valuer.UUID, id valuer.UUID, updatedBy string, isAdmin bool, lock bool) error {
 	dashboard, err := module.Get(ctx, orgID, id)
 	if err != nil {
@@ -172,7 +156,8 @@ func (module *module) Delete(ctx context.Context, orgID valuer.UUID, id valuer.U
 		return errors.New(errors.TypeInvalidInput, errors.CodeInvalidInput, "dashboard is locked, please unlock the dashboard to be delete it")
 	}
 
-	if err := module.store.Delete(ctx, orgID, id); err != nil {
+	err = module.store.Delete(ctx, orgID, id)
+	if err != nil {
 		return err
 	}
 

pkg/modules/dashboard/impldashboard/store.go

@@ -153,7 +153,7 @@ func (store *store) ListPublic(ctx context.Context, orgID valuer.UUID) ([]*dashb
 func (store *store) Update(ctx context.Context, orgID valuer.UUID, storableDashboard *dashboardtypes.StorableDashboard) error {
 	_, err := store.
 		sqlstore.
-		BunDBCtx(ctx).
+		BunDB().
 		NewUpdate().
 		Model(storableDashboard).
 		WherePK().

pkg/query-service/app/http_handler.go

@@ -502,7 +502,6 @@ func (aH *APIHandler) RegisterRoutes(router *mux.Router, am *middleware.AuthZ) {
 	router.HandleFunc("/api/v1/dashboards/{id}", am.EditAccess(aH.Signoz.Handlers.Dashboard.Update)).Methods(http.MethodPut)
 	router.HandleFunc("/api/v1/dashboards/{id}", am.EditAccess(aH.Signoz.Handlers.Dashboard.Delete)).Methods(http.MethodDelete)
 	router.HandleFunc("/api/v1/dashboards/{id}/lock", am.EditAccess(aH.Signoz.Handlers.Dashboard.LockUnlock)).Methods(http.MethodPut)
-	router.HandleFunc("/api/v1/dashboards/{id}/reset", am.AdminAccess(aH.Signoz.Handlers.Dashboard.ResetSystemDashboard)).Methods(http.MethodPut)
 	router.HandleFunc("/api/v2/variables/query", am.ViewAccess(aH.queryDashboardVarsV2)).Methods(http.MethodPost)
 
 	router.HandleFunc("/api/v1/explorer/views", am.ViewAccess(aH.Signoz.Handlers.SavedView.List)).Methods(http.MethodGet)

pkg/types/dashboardtypes/defaults.go

@@ -1,10 +0,0 @@
-package dashboardtypes
-
-import (
-	"github.com/SigNoz/signoz/pkg/errors"
-	"github.com/SigNoz/signoz/pkg/valuer"
-)
-
-func NewDefaultSystemDashboard(orgID valuer.UUID) (*Dashboard, error) {
-	return nil, errors.Newf(errors.TypeInvalidInput, errors.CodeInvalidInput, "no defaults registered for system dashboard")
-}

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

@@ -139,6 +139,33 @@ 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,