chore: initial commit

deploy/docker-swarm/docker-compose.ha.yaml

@@ -190,7 +190,7 @@ services:
       # - ../common/clickhouse/storage.xml:/etc/clickhouse-server/config.d/storage.xml
   signoz:
     !!merge <<: *db-depend
-    image: signoz/signoz:v0.125.1
+    image: signoz/signoz:v0.125.0
     ports:
       - "8080:8080" # signoz port
     #   - "6060:6060"     # pprof port

deploy/docker-swarm/docker-compose.yaml

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

deploy/docker/docker-compose.ha.yaml

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

deploy/docker/docker-compose.yaml

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

docs/api/openapi.yml

@@ -2342,8 +2342,6 @@ components:
           type: boolean
         org_id:
           type: string
-        source:
-          $ref: '#/components/schemas/DashboardtypesSource'
         updatedAt:
           format: date-time
           type: string
@@ -2373,12 +2371,6 @@ components:
         timeRangeEnabled:
           type: boolean
       type: object
-    DashboardtypesSource:
-      enum:
-      - user
-      - system
-      - integration
-      type: object
     DashboardtypesStorableDashboardData:
       additionalProperties: {}
       type: object

ee/modules/dashboard/impldashboard/module.go

@@ -49,14 +49,6 @@ func (module *module) CreatePublic(ctx context.Context, orgID valuer.UUID, publi
 		return errors.New(errors.TypeLicenseUnavailable, errors.CodeLicenseUnavailable, "a valid license is not available").WithAdditional("this feature requires a valid license").WithAdditional(err.Error())
 	}
 
-	dashboard, err := module.Get(ctx, orgID, publicDashboard.DashboardID)
-	if err != nil {
-		return err
-	}
-	if err := dashboard.ErrIfNotPublishable(); err != nil {
-		return err
-	}
-
 	storablePublicDashboard, err := module.store.GetPublic(ctx, publicDashboard.DashboardID.StringValue())
 	if err != nil && !errors.Ast(err, errors.TypeNotFound) {
 		return err
@@ -137,14 +129,6 @@ func (module *module) UpdatePublic(ctx context.Context, orgID valuer.UUID, publi
 		return errors.New(errors.TypeLicenseUnavailable, errors.CodeLicenseUnavailable, "a valid license is not available").WithAdditional("this feature requires a valid license").WithAdditional(err.Error())
 	}
 
-	dashboard, err := module.Get(ctx, orgID, publicDashboard.DashboardID)
-	if err != nil {
-		return err
-	}
-	if err := dashboard.ErrIfNotPublishable(); err != nil {
-		return err
-	}
-
 	return module.store.UpdatePublic(ctx, dashboardtypes.NewStorablePublicDashboardFromPublicDashboard(publicDashboard))
 }
 
@@ -154,10 +138,6 @@ func (module *module) Delete(ctx context.Context, orgID valuer.UUID, id valuer.U
 		return err
 	}
 
-	if err := dashboard.ErrIfNotDeletable(); err != nil {
-		return err
-	}
-
 	if dashboard.Locked {
 		return errors.New(errors.TypeInvalidInput, errors.CodeInvalidInput, "dashboard is locked, please unlock the dashboard to be delete it")
 	}
@@ -188,14 +168,6 @@ func (module *module) DeletePublic(ctx context.Context, orgID valuer.UUID, dashb
 		return errors.New(errors.TypeLicenseUnavailable, errors.CodeLicenseUnavailable, "a valid license is not available").WithAdditional("this feature requires a valid license").WithAdditional(err.Error())
 	}
 
-	dashboard, err := module.Get(ctx, orgID, dashboardID)
-	if err != nil {
-		return err
-	}
-	if err := dashboard.ErrIfNotPublishable(); err != nil {
-		return err
-	}
-
 	err = module.store.DeletePublic(ctx, dashboardID.StringValue())
 	if err != nil {
 		return err

frontend/package.json

@@ -49,7 +49,7 @@
     "@signozhq/design-tokens": "2.1.4",
     "@signozhq/icons": "0.4.0",
     "@signozhq/resizable": "0.0.2",
-    "@signozhq/ui": "0.0.20",
+    "@signozhq/ui": "0.0.19",
     "@tanstack/react-table": "8.21.3",
     "@tanstack/react-virtual": "3.13.22",
     "@uiw/codemirror-theme-copilot": "4.23.11",
@@ -241,4 +241,4 @@
     "tmp": "0.2.4",
     "vite": "npm:rolldown-vite@7.3.1"
   }
-}
+}

frontend/plugins/rules/no-antd-components.mjs

@@ -15,7 +15,6 @@
 
 const BANNED_COMPONENTS = {
 	Typography: 'Use @signozhq/ui Typography instead of antd Typography.',
-	Badge: 'Use @signozhq/ui/badge instead of antd Badge.',
 };
 
 export default {

frontend/pnpm-lock.yaml

@@ -77,8 +77,8 @@ importers:
         specifier: 0.0.2
         version: 0.0.2(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
       '@signozhq/ui':
-        specifier: 0.0.20
-        version: 0.0.20(@emotion/is-prop-valid@1.2.0)(@signozhq/icons@0.4.0)(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react-router-dom@5.3.4(react@18.2.0))(react-router@6.30.3(react@18.2.0))(react@18.2.0)
+        specifier: 0.0.19
+        version: 0.0.19(@emotion/is-prop-valid@1.2.0)(@signozhq/icons@0.4.0)(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react-router-dom@5.3.4(react@18.2.0))(react-router@6.30.3(react@18.2.0))(react@18.2.0)
       '@tanstack/react-table':
         specifier: 8.21.3
         version: 8.21.3(react-dom@18.2.0(react@18.2.0))(react@18.2.0)
@@ -3269,8 +3269,8 @@ packages:
     peerDependencies:
       react: ^18.2.0
 
-  '@signozhq/ui@0.0.20':
-    resolution: {integrity: sha512-rVC8OMfM1AsjsrWJWNzU8KlSw3hbWP5OF/jxuX3zQ5Fljo9PhtLksUF3jISfwLqbmWOBCopByr9UlKH46iAfYA==}
+  '@signozhq/ui@0.0.19':
+    resolution: {integrity: sha512-2q6aRxN/PR4PlR2xJZAREEuvLPiDFggfFKzCW2Z5vHVVbrgnvZHWD1jPUuwszfEg0ceH3UvkwqceO7wN4uRJAA==}
     peerDependencies:
       '@signozhq/icons': 0.3.0
       react: ^18.2.0
@@ -3851,6 +3851,27 @@ packages:
     peerDependencies:
       vite: ^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0
 
+  '@webassemblyjs/ast@1.14.1':
+    resolution: {integrity: sha512-nuBEDgQfm1ccRp/8bCQrx1frohyufl4JlbMMZ4P1wpeOfDhF6FQkxZJ1b/e+PLwr6X1Nhw6OLme5usuBWYBvuQ==}
+
+  '@webassemblyjs/floating-point-hex-parser@1.13.2':
+    resolution: {integrity: sha512-6oXyTOzbKxGH4steLbLNOu71Oj+C8Lg34n6CqRvqfS2O71BxY6ByfMDRhBytzknj9yGUPVJ1qIKhRlAwO1AovA==}
+
+  '@webassemblyjs/helper-api-error@1.13.2':
+    resolution: {integrity: sha512-U56GMYxy4ZQCbDZd6JuvvNV/WFildOjsaWD3Tzzvmw/mas3cXzRJPMjP83JqEsgSbyrmaGjBfDtV7KDXV9UzFQ==}
+
+  '@webassemblyjs/helper-buffer@1.14.1':
+    resolution: {integrity: sha512-jyH7wtcHiKssDtFPRB+iQdxlDf96m0E39yb0k5uJVhFGleZFoNw1c4aeIcVUPPbXUVJ94wwnMOAqUHyzoEPVMA==}
+
+  '@webassemblyjs/helper-numbers@1.13.2':
+    resolution: {integrity: sha512-FE8aCmS5Q6eQYcV3gI35O4J789wlQA+7JrqTTpJqn5emA4U2hvwJmvFRC0HODS+3Ye6WioDklgd6scJ3+PLnEA==}
+
+  '@webassemblyjs/helper-wasm-bytecode@1.13.2':
+    resolution: {integrity: sha512-3QbLKy93F0EAIXLh0ogEVR6rOubA9AoZ+WRYhNbFyuB70j3dRdwH9g+qXhLAO0kiYGlg3TxDV+I4rQTr/YNXkA==}
+
+  '@webassemblyjs/helper-wasm-section@1.14.1':
+    resolution: {integrity: sha512-ds5mXEqTJ6oxRoqjhWDU83OgzAYjwsCV8Lo/N+oRsNDmx/ZDpqalmrtgOMkHwxsG0iI//3BwWAErYRHtgn0dZw==}
+
   '@xmldom/xmldom@0.8.13':
     resolution: {integrity: sha512-KRYzxepc14G/CEpEGc3Yn+JKaAeT63smlDr+vjB8jRfgTBBI9wRj/nkQEO+ucV8p8I9bfKLWp37uHgFrbntPvw==}
     engines: {node: '>=10.0.0'}
@@ -12013,7 +12034,7 @@ snapshots:
       - react-dom
       - tailwindcss
 
-  '@signozhq/ui@0.0.20(@emotion/is-prop-valid@1.2.0)(@signozhq/icons@0.4.0)(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react-router-dom@5.3.4(react@18.2.0))(react-router@6.30.3(react@18.2.0))(react@18.2.0)':
+  '@signozhq/ui@0.0.19(@emotion/is-prop-valid@1.2.0)(@signozhq/icons@0.4.0)(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react-router-dom@5.3.4(react@18.2.0))(react-router@6.30.3(react@18.2.0))(react@18.2.0)':
     dependencies:
       '@chenglou/pretext': 0.0.5
       '@radix-ui/react-checkbox': 1.3.3(@types/react-dom@18.0.10)(@types/react@18.0.26)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)

frontend/src/AppRoutes/pageComponents.ts

@@ -47,6 +47,7 @@ export const TracesFunnels = Loadable(
 		import(/* webpackChunkName: "Traces Funnels" */ 'pages/TracesModulePage'),
 );
 export const TracesFunnelDetails = Loadable(
+	// eslint-disable-next-line sonarjs/no-identical-functions
 	() =>
 		import(
 			/* webpackChunkName: "Traces Funnel Details" */ 'pages/TracesModulePage'
@@ -312,6 +313,13 @@ export const PublicDashboardPage = Loadable(
 		),
 );
 
+export const AlertTypeSelectionPage = Loadable(
+	() =>
+		import(
+			/* webpackChunkName: "Alert Type Selection Page" */ 'pages/AlertTypeSelection'
+		),
+);
+
 export const MeterExplorerPage = Loadable(
 	() =>
 		import(/* webpackChunkName: "Meter Explorer Page" */ 'pages/MeterExplorer'),

frontend/src/AppRoutes/routes.ts

@@ -5,6 +5,7 @@ import {
 	AIAssistantPage,
 	AlertHistory,
 	AlertOverview,
+	AlertTypeSelectionPage,
 	AllAlertChannels,
 	AllErrors,
 	ApiMonitoring,
@@ -212,6 +213,13 @@ const routes: AppRoutes[] = [
 		isPrivate: true,
 		key: 'LIST_ALL_ALERT',
 	},
+	{
+		path: ROUTES.ALERT_TYPE_SELECTION,
+		exact: true,
+		component: AlertTypeSelectionPage,
+		isPrivate: true,
+		key: 'ALERT_TYPE_SELECTION',
+	},
 	{
 		path: ROUTES.ALERTS_NEW,
 		exact: true,
@@ -525,6 +533,18 @@ export const LIST_LICENSES: AppRoutes = {
 	key: 'LIST_LICENSES',
 };
 
+export const oldRoutes = [
+	'/pipelines',
+	'/logs-explorer',
+	'/logs-explorer/live',
+	'/logs-save-views',
+	'/traces-save-views',
+	'/settings/access-tokens',
+	'/settings/api-keys',
+	'/messaging-queues',
+	'/alerts/edit',
+];
+
 export const oldNewRoutesMapping: Record<string, string> = {
 	'/pipelines': '/logs/pipelines',
 	'/logs-explorer': '/logs/logs-explorer',
@@ -535,9 +555,7 @@ export const oldNewRoutesMapping: Record<string, string> = {
 	'/settings/api-keys': '/settings/service-accounts',
 	'/messaging-queues': '/messaging-queues/overview',
 	'/alerts/edit': '/alerts/overview',
-	'/alerts/type-selection': '/alerts/new',
 };
-export const oldRoutes = Object.keys(oldNewRoutesMapping);
 
 export const ROUTES_NOT_TO_BE_OVERRIDEN: string[] = [
 	ROUTES.WORKSPACE_LOCKED,

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

@@ -2999,11 +2999,6 @@ export interface CoretypesPatchableObjectsDTO {
 	deletions: CoretypesObjectGroupDTO[] | null;
 }
 
-export enum DashboardtypesSourceDTO {
-	user = 'user',
-	system = 'system',
-	integration = 'integration',
-}
 export interface DashboardtypesDashboardDTO {
 	/**
 	 * @type string
@@ -3027,7 +3022,6 @@ export interface DashboardtypesDashboardDTO {
 	 * @type string
 	 */
 	org_id?: string;
-	source?: DashboardtypesSourceDTO;
 	/**
 	 * @type string
 	 * @format date-time

frontend/src/components/AlertBreadcrumb/AlertBreadcrumb.module.scss

@@ -1,17 +0,0 @@
-.breadcrumb {
-	padding-left: 16px;
-
-	ol {
-		align-items: center;
-	}
-
-	:global(.ant-breadcrumb-separator) {
-		color: var(--muted-foreground);
-	}
-}
-
-.divider {
-	border-color: var(--l1-border);
-	margin: 16px 0;
-	margin-top: 10px;
-}

frontend/src/components/AlertBreadcrumb/AlertBreadcrumb.tsx

@@ -1,32 +0,0 @@
-import { Breadcrumb, Divider } from 'antd';
-
-import styles from './AlertBreadcrumb.module.scss';
-import BreadcrumbItem, { BreadcrumbItemConfig } from './BreadcrumbItem';
-
-export interface AlertBreadcrumbProps {
-	items: BreadcrumbItemConfig[];
-	className?: string;
-	showDivider?: boolean;
-}
-
-function AlertBreadcrumb({
-	items,
-	className,
-	showDivider = true,
-}: AlertBreadcrumbProps): JSX.Element {
-	const breadcrumbItems = items.map((item) => ({
-		title: <BreadcrumbItem {...item} />,
-	}));
-
-	return (
-		<>
-			<Breadcrumb
-				className={`${styles.breadcrumb} ${className || ''}`}
-				items={breadcrumbItems}
-			/>
-			{showDivider && <Divider className={styles.divider} />}
-		</>
-	);
-}
-
-export default AlertBreadcrumb;

frontend/src/components/AlertBreadcrumb/BreadcrumbItem.module.scss

@@ -1,9 +0,0 @@
-.item {
-	--button-padding: 0;
-	--button-font-size: var(--periscope-font-size-base);
-}
-
-.itemLast {
-	color: var(--muted-foreground);
-	font-size: var(--periscope-font-size-base);
-}

frontend/src/components/AlertBreadcrumb/BreadcrumbItem.tsx

@@ -1,45 +0,0 @@
-import { Button } from '@signozhq/ui/button';
-import { useSafeNavigate } from 'hooks/useSafeNavigate';
-import { isModifierKeyPressed } from 'utils/app';
-
-import styles from './BreadcrumbItem.module.scss';
-
-export type BreadcrumbItemConfig =
-	| {
-			title: string | null;
-			route?: string;
-	  }
-	| {
-			title: string | null;
-			isLast?: true;
-	  };
-
-function BreadcrumbItem({
-	title,
-	...props
-}: BreadcrumbItemConfig): JSX.Element {
-	const { safeNavigate } = useSafeNavigate();
-
-	if ('isLast' in props) {
-		return <div className={styles.itemLast}>{title}</div>;
-	}
-
-	return (
-		<Button
-			variant="ghost"
-			color="secondary"
-			className={styles.item}
-			onClick={(e: React.MouseEvent): void => {
-				if (!('route' in props) || !props.route) {
-					return;
-				}
-
-				safeNavigate(props.route, { newTab: isModifierKeyPressed(e) });
-			}}
-		>
-			{title}
-		</Button>
-	);
-}
-
-export default BreadcrumbItem;

frontend/src/components/AlertBreadcrumb/index.tsx

@@ -1,6 +0,0 @@
-export { default } from './AlertBreadcrumb';
-export {
-	default as BreadcrumbItem,
-	type BreadcrumbItemConfig,
-} from './BreadcrumbItem';
-export type { AlertBreadcrumbProps } from './AlertBreadcrumb';

frontend/src/components/CeleryOverview/CeleryOverviewTable/CeleryOverviewTable.tsx

@@ -5,6 +5,7 @@ import { useSelector } from 'react-redux';
 import { Loader, Search } from '@signozhq/icons';
 import { Color } from '@signozhq/design-tokens';
 import {
+	Button,
 	Flex,
 	Input,
 	InputRef,
@@ -16,7 +17,6 @@ import {
 	Tooltip,
 } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
-import { Button } from '@signozhq/ui/button';
 import type { FilterDropdownProps } from 'antd/lib/table/interface';
 import logEvent from 'api/common/logEvent';
 import {
@@ -105,8 +105,9 @@ const getColumnSearchProps = (
 			/>
 			<Space>
 				<Button
+					type="primary"
+					size="small"
 					onClick={(): void => handleSearch(selectedKeys as string[], confirm)}
-					size="sm"
 				>
 					<Flex align="center" gap={4}>
 						<Search size="md" />
@@ -115,19 +116,17 @@ const getColumnSearchProps = (
 				</Button>
 				<Button
 					onClick={(): void => clearFilters && handleReset(clearFilters, confirm)}
+					size="small"
 					style={{ width: 90 }}
-					size="sm"
-					variant="outlined"
-					color="secondary"
 				>
 					Reset
 				</Button>
 				<Button
+					type="link"
+					size="small"
 					onClick={(): void => {
 						close();
 					}}
-					size="sm"
-					variant="link"
 				>
 					close
 				</Button>

frontend/src/components/ChangelogModal/ChangelogModal.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { useMutation } from 'react-query';
 import { Check, ChevronsDown, ScrollText, X } from '@signozhq/icons';
-import { Flex, Modal } from 'antd';
+import { Button, Flex, Modal } from 'antd';
 import updateUserPreference from 'api/v1/user/preferences/name/update';
 import cx from 'classnames';
 import { USER_PREFERENCES } from 'constants/userPreferences';
@@ -14,7 +14,6 @@ import { UserPreference } from 'types/api/preferences/preference';
 import ChangelogRenderer from './components/ChangelogRenderer';
 
 import './ChangelogModal.styles.scss';
-import { Button } from '@signozhq/ui/button';
 
 interface Props {
 	changelog: ChangelogSchema;
@@ -116,13 +115,13 @@ function ChangelogModal({ changelog, onClose }: Props): JSX.Element {
 				>
 					{!isCloudUser && (
 						<div className="changelog-modal-footer-ctas">
-							<Button onClick={onClose} variant="outlined" color="secondary">
+							<Button type="default" onClick={onClose}>
 								<Flex align="center" gap="4px">
 									<X size="md" />
 									Skip for now
 								</Flex>
 							</Button>
-							<Button onClick={onClickUpdateWorkspace}>
+							<Button type="primary" onClick={onClickUpdateWorkspace}>
 								<Flex align="center" gap="4px">
 									<Check size="md" />
 									Update my workspace

frontend/src/components/ChatSupportGateway/ChatSupportGateway.tsx

@@ -1,9 +1,8 @@
 import { useState } from 'react';
 import { useMutation } from 'react-query';
 import { useLocation } from 'react-router-dom';
-import { Modal } from 'antd';
+import { Button, Modal } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
-import { Button } from '@signozhq/ui/button';
 import logEvent from 'api/common/logEvent';
 import updateCreditCardApi from 'api/v1/checkout/create';
 import { useNotifications } from 'hooks/useNotifications';
@@ -73,8 +72,6 @@ export default function ChatSupportGateway(): JSX.Element {
 
 						setIsAddCreditCardModalOpen(true);
 					}}
-					variant="outlined"
-					color="secondary"
 				>
 					<MessageSquareText size={24} />
 				</Button>
@@ -93,19 +90,19 @@ export default function ChatSupportGateway(): JSX.Element {
 						key="cancel"
 						onClick={(): void => setIsAddCreditCardModalOpen(false)}
 						className="cancel-btn"
-						variant="outlined"
-						color="secondary"
-						prefix={<X size={16} />}
+						icon={<X size={16} />}
 					>
 						Cancel
 					</Button>,
 					<Button
 						key="submit"
+						type="primary"
+						icon={<CreditCard size={16} />}
+						size="middle"
 						loading={isLoadingBilling}
 						disabled={isLoadingBilling}
 						onClick={handleAddCreditCard}
 						className="add-credit-card-btn"
-						prefix={<CreditCard size={16} />}
 					>
 						Add Credit Card
 					</Button>,

frontend/src/components/CreateServiceAccountModal/CreateServiceAccountModal.tsx

@@ -137,6 +137,7 @@ function CreateServiceAccountModal(): JSX.Element {
 				<AuthZTooltip checks={[SACreatePermission]}>
 					<Button
 						type="submit"
+						// @ts-expect-error -- form prop not in @signozhq/ui Button type - TODO: Fix this - @SagarRajput
 						form="create-sa-form"
 						variant="solid"
 						color="primary"

frontend/src/components/CustomTimePicker/CalendarContainer.tsx

@@ -1,5 +1,5 @@
 import { Calendar } from '@signozhq/ui/calendar';
-import { Button } from '@signozhq/ui/button';
+import { Button } from 'antd';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import dayjs from 'dayjs';
 import { Calendar as CalendarIcon, Check, X } from '@signozhq/icons';
@@ -78,20 +78,18 @@ function CalendarContainer({
 
 				<div className="calendar-actions">
 					<Button
-						className="cancel-btn"
+						type="primary"
+						className="periscope-btn secondary cancel-btn"
 						onClick={onCancel}
-						prefix={<X size={12} />}
-						variant="outlined"
-						color="secondary"
+						icon={<X size={12} />}
 					>
 						Cancel
 					</Button>
 					<Button
-						className="apply-btn"
+						type="primary"
+						className="periscope-btn primary apply-btn"
 						onClick={onApply}
-						prefix={<Check size={12} />}
-						variant="solid"
-						color="primary"
+						icon={<Check size={12} />}
 					>
 						Apply
 					</Button>

frontend/src/components/CustomTimePicker/CustomTimePicker.styles.scss

@@ -108,7 +108,7 @@
 }
 
 .info-text:hover {
-	& {
+	&.ant-btn-text {
 		background-color: unset !important;
 	}
 }

frontend/src/components/CustomTimePicker/CustomTimePickerPopoverContent.tsx

@@ -8,6 +8,7 @@ import {
 } from 'react';
 import { useLocation } from 'react-router-dom';
 import { Color } from '@signozhq/design-tokens';
+import { Button } from 'antd';
 import logEvent from 'api/common/logEvent';
 import cx from 'classnames';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
@@ -31,7 +32,6 @@ import TimezonePicker from './TimezonePicker';
 import { Timezone } from './timezoneUtils';
 
 import './CustomTimePicker.styles.scss';
-import { Button } from '@signozhq/ui/button';
 
 const TO_MILLISECONDS_FACTOR = 1000_000;
 
@@ -177,14 +177,13 @@ function CustomTimePickerPopoverContent({
 			<div className="relative-date-time-section">
 				{options.map((option) => (
 					<Button
+						type="text"
 						className="time-btns"
 						key={option.label + option.value}
 						onClick={(): void => {
 							handleExitLiveLogs();
 							onSelectHandler(option.label, option.value);
 						}}
-						variant="ghost"
-						color="secondary"
 					>
 						{option.label}
 					</Button>
@@ -250,15 +249,15 @@ function CustomTimePickerPopoverContent({
 					{isLogsExplorerPage && isLogsListView && (
 						<Button
 							className={cx('data-time-live', isLiveLogsEnabled ? 'active' : '')}
+							type="text"
 							onClick={handleGoLive}
-							variant="ghost"
-							color="secondary"
 						>
 							Live
 						</Button>
 					)}
 					{options.map((option) => (
 						<Button
+							type="text"
 							key={option.label + option.value}
 							onClick={(e: React.MouseEvent<HTMLButtonElement>): void => {
 								e.stopPropagation();
@@ -272,8 +271,6 @@ function CustomTimePickerPopoverContent({
 									? option.value === 'custom' && !isLiveLogsEnabled && 'active'
 									: selectedTime === option.value && !isLiveLogsEnabled && 'active',
 							)}
-							variant="ghost"
-							color="secondary"
 						>
 							<span className="time-label">{option.label}</span>
 
@@ -373,12 +370,11 @@ function CustomTimePickerPopoverContent({
 
 					<div className="timezone-container__right">
 						<Button
-							className="timezone-change-button"
+							type="text"
+							size="small"
+							className="periscope-btn text timezone-change-button"
 							onClick={handleTimezoneHintClick}
-							size="sm"
-							variant="ghost"
-							prefix={<PenLine size={10} />}
-							color="none"
+							icon={<PenLine size={10} />}
 						>
 							Change Timezone
 						</Button>

frontend/src/components/DownloadOptionsMenu/DownloadOptionsMenu.test.tsx

@@ -106,7 +106,7 @@ describe.each([
 		renderWithStore(dataSource);
 		const button = screen.getByTestId(testId);
 		expect(button).toBeInTheDocument();
-		expect(button).not.toBeDisabled();
+		expect(button).toHaveClass('periscope-btn', 'ghost');
 	});
 
 	it('shows popover with export options when download button is clicked', () => {

frontend/src/components/DownloadOptionsMenu/DownloadOptionsMenu.tsx

@@ -1,7 +1,6 @@
 import { useCallback, useMemo, useState } from 'react';
-import { Popover, Radio, Tooltip } from 'antd';
+import { Button, Popover, Radio, Tooltip } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
-import { Button } from '@signozhq/ui/button';
 import { TelemetryFieldKey } from 'api/v5/v5';
 import { useExportRawData } from 'hooks/useDownloadOptionsMenu/useDownloadOptionsMenu';
 import { Download, LoaderCircle } from '@signozhq/icons';
@@ -105,11 +104,12 @@ export default function DownloadOptionsMenu({
 				)}
 
 				<Button
+					type="primary"
+					icon={<Download size={16} />}
 					onClick={handleExport}
 					className="export-button"
 					disabled={isDownloading}
 					loading={isDownloading}
-					prefix={<Download size={16} />}
 				>
 					Export
 				</Button>
@@ -137,18 +137,16 @@ export default function DownloadOptionsMenu({
 		>
 			<Tooltip title="Download" placement="top">
 				<Button
-					data-testid={`periscope-btn-download-${dataSource}`}
-					disabled={isDownloading}
-					variant="outlined"
-					color="secondary"
-					size="icon"
-					prefix={
+					className="periscope-btn ghost"
+					icon={
 						isDownloading ? (
 							<LoaderCircle size={14} className="animate-spin" />
 						) : (
 							<Download size={14} />
 						)
 					}
+					data-testid={`periscope-btn-download-${dataSource}`}
+					disabled={isDownloading}
 				/>
 			</Tooltip>
 		</Popover>

frontend/src/components/DropDown/DropDown.tsx

@@ -1,9 +1,8 @@
 import { useState } from 'react';
 import { Ellipsis } from '@signozhq/icons';
-import { Dropdown, MenuProps } from 'antd';
+import { Button, Dropdown, MenuProps } from 'antd';
 
 import './DropDown.styles.scss';
-import { Button } from '@signozhq/ui/button';
 
 function DropDown({
 	element,
@@ -32,12 +31,12 @@ function DropDown({
 			open={isDdOpen}
 		>
 			<Button
+				type="link"
 				className={`dropdown-button`}
 				onClick={(e): void => {
 					e.preventDefault();
 					setDdOpen(true);
 				}}
-				variant="link"
 			>
 				<Ellipsis className="dropdown-icon" size={16} />
 			</Button>

frontend/src/components/ErrorModal/ErrorModal.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Color } from '@signozhq/design-tokens';
-import { Modal, Tag } from 'antd';
+import { Button, Modal, Tag } from 'antd';
 import { CircleAlert, X } from '@signozhq/icons';
 import KeyValueLabel from 'periscope/components/KeyValueLabel';
 import { useAppContext } from 'providers/App/App';
@@ -9,7 +9,6 @@ import APIError from 'types/api/error';
 import ErrorContent from './components/ErrorContent';
 
 import './ErrorModal.styles.scss';
-import { Button } from '@signozhq/ui/button';
 
 type Props = {
 	error: APIError;
@@ -74,11 +73,10 @@ function ErrorModal({
 							<div className="error-modal__version-placeholder" />
 						)}
 						<Button
+							type="default"
 							className="close-button"
 							onClick={handleClose}
 							data-testid="close-button"
-							variant="outlined"
-							color="secondary"
 						>
 							<X size={16} color={Color.BG_VANILLA_400} />
 						</Button>

frontend/src/components/ExplorerCard/ExplorerCard.tsx

@@ -1,8 +1,16 @@
 import { useState } from 'react';
 import { useCopyToClipboard } from 'react-use';
-import { Col, Dropdown, MenuProps, Popover, Row, Select, Space } from 'antd';
+import {
+	Button,
+	Col,
+	Dropdown,
+	MenuProps,
+	Popover,
+	Row,
+	Select,
+	Space,
+} from 'antd';
 import { Typography } from '@signozhq/ui/typography';
-import { Button } from '@signozhq/ui/button';
 import axios from 'axios';
 import TextToolTip from 'components/TextToolTip';
 import { SOMETHING_WENT_WRONG } from 'constants/api';
@@ -151,6 +159,7 @@ function ExplorerCard({
 		],
 	};
 
+	const saveButtonType = isQueryUpdated ? 'default' : 'primary';
 	const saveButtonIcon = isQueryUpdated ? null : <Save size="md" />;
 
 	const showSaveView = false;
@@ -201,7 +210,7 @@ function ExplorerCard({
 									</Space>
 								)}
 								{isQueryUpdated && (
-									<Button onClick={onUpdateQueryHandler} prefix={<Save />}>
+									<Button type="primary" icon={<Save />} onClick={onUpdateQueryHandler}>
 										Save changes
 									</Button>
 								)}
@@ -221,10 +230,9 @@ function ExplorerCard({
 									onOpenChange={handleOpenChange}
 								>
 									<Button
+										type={saveButtonType}
+										icon={saveButtonIcon}
 										data-testid="traces-save-view-action"
-										variant="outlined"
-										color="secondary"
-										prefix={saveButtonIcon ?? undefined}
 									>
 										{isQueryUpdated
 											? SaveButtonText.SAVE_AS_NEW_VIEW

frontend/src/components/FieldsSelector/AddedFields.tsx

@@ -54,7 +54,7 @@ function SortableField({
 				<span className={styles.fieldKey}>{field.name}</span>
 			</div>
 			<Button
-				className={styles.removeBtn}
+				className={cx(styles.removeBtn, 'periscope-btn')}
 				variant="outlined"
 				color="destructive"
 				size="sm"

frontend/src/components/FieldsSelector/OtherFields.tsx

@@ -89,7 +89,7 @@ function OtherFields({
 									<span className={styles.fieldKey}>{attr.name}</span>
 									{!isAtLimit && (
 										<Button
-											className={styles.addBtn}
+											className={cx(styles.addBtn, 'periscope-btn')}
 											variant="outlined"
 											color="secondary"
 											size="sm"

frontend/src/components/HeaderRightSection/FeedbackModal.tsx

@@ -1,9 +1,8 @@
 import { useCallback, useEffect, useState } from 'react';
 import { useLocation } from 'react-router-dom';
 import { toast } from '@signozhq/ui/sonner';
-import { Input, Radio, RadioChangeEvent } from 'antd';
+import { Button, Input, Radio, RadioChangeEvent } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
-import { Button } from '@signozhq/ui/button';
 import logEvent from 'api/common/logEvent';
 import { handleContactSupport } from 'container/Integrations/utils';
 import { useGetTenantLicense } from 'hooks/useGetTenantLicense';
@@ -126,11 +125,11 @@ function FeedbackModal({ onClose }: { onClose: () => void }): JSX.Element {
 
 			<div className="feedback-modal-content-footer">
 				<Button
+					className="periscope-btn primary"
+					type="primary"
 					onClick={handleSubmit}
 					loading={isLoading}
 					disabled={feedback.length === 0}
-					variant="solid"
-					color="primary"
 				>
 					Submit
 				</Button>

frontend/src/components/HeaderRightSection/HeaderRightSection.tsx

@@ -141,7 +141,6 @@ function HeaderRightSection({
 				>
 					<Button
 						variant="ghost"
-						color="secondary"
 						size="icon"
 						className="share-feedback-btn"
 						aria-label="Feedback"
@@ -165,15 +164,14 @@ function HeaderRightSection({
 				>
 					<Button
 						variant="ghost"
-						color="secondary"
 						size="icon"
 						aria-label="Announcements"
+						prefix={<Inbox size={14} />}
 						onClick={(): void => {
 							logEvent('Announcements: Clicked', {
 								page: location.pathname,
 							});
 						}}
-						prefix={<Inbox size={14} />}
 					/>
 				</Popover>
 			)}
@@ -192,7 +190,6 @@ function HeaderRightSection({
 				>
 					<Button
 						variant="ghost"
-						color="secondary"
 						size="icon"
 						aria-label="Share"
 						prefix={<Globe size={14} />}

frontend/src/components/HeaderRightSection/ShareURLModal.tsx

@@ -4,9 +4,8 @@ import { useSelector } from 'react-redux';
 import { matchPath, useLocation } from 'react-router-dom';
 import { useCopyToClipboard } from 'react-use';
 import { Color } from '@signozhq/design-tokens';
-import { Switch } from 'antd';
+import { Button, Switch } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
-import { Button } from '@signozhq/ui/button';
 import logEvent from 'api/common/logEvent';
 import { QueryParams } from 'constants/query';
 import ROUTES from 'constants/routes';
@@ -156,10 +155,9 @@ function ShareURLModal(): JSX.Element {
 					</div>
 
 					<Button
+						className="periscope-btn secondary"
 						onClick={handleCopyURL}
-						variant="outlined"
-						color="secondary"
-						prefix={isURLCopied ? <Check size={14} /> : <Link2 size={14} />}
+						icon={isURLCopied ? <Check size={14} /> : <Link2 size={14} />}
 					>
 						Copy page link
 					</Button>

frontend/src/components/HostMetricsDetail/WaitlistFragment/WaitlistFragment.tsx

@@ -1,8 +1,8 @@
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Color } from '@signozhq/design-tokens';
+import { Button } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
-import { Button } from '@signozhq/ui/button';
 import logEvent from 'api/common/logEvent';
 import { useNotifications } from 'hooks/useNotifications';
 import { CircleCheckBig, HandPlatter } from '@signozhq/icons';
@@ -57,18 +57,17 @@ export default function WaitlistFragment({
 			</Typography.Text>
 
 			<Button
-				className="join-waitlist-btn"
+				className="periscope-btn join-waitlist-btn"
+				type="default"
 				loading={isSubmitting}
-				onClick={handleJoinWaitlist}
-				variant="outlined"
-				color="secondary"
-				prefix={
+				icon={
 					isSuccess ? (
 						<CircleCheckBig size={16} color={Color.BG_FOREST_500} />
 					) : (
 						<HandPlatter size={16} />
 					)
 				}
+				onClick={handleJoinWaitlist}
 			>
 				Get early access
 			</Button>

frontend/src/components/InputNumber/InputNumber.styles.scss

@@ -0,0 +1,12 @@
+/* Hide native browser spinners for our number input, matching antd defaults. */
+.signoz-input-number {
+	&::-webkit-outer-spin-button,
+	&::-webkit-inner-spin-button {
+		-webkit-appearance: none;
+		margin: 0;
+	}
+
+	&[type='number'] {
+		-moz-appearance: textfield;
+	}
+}

frontend/src/components/InputNumber/InputNumber.tsx

@@ -0,0 +1,130 @@
+import './InputNumber.styles.scss';
+
+import {
+	ChangeEvent,
+	CSSProperties,
+	FocusEventHandler,
+	forwardRef,
+	KeyboardEventHandler,
+	ReactNode,
+} from 'react';
+import { Input } from '@signozhq/ui/input';
+import cx from 'classnames';
+
+export type InputNumberProps = {
+	value?: number | null;
+	defaultValue?: number | null;
+	onChange?: (value: number | null) => void;
+	min?: number;
+	max?: number;
+	step?: number;
+	/** When set, values emitted via onChange are rounded to this many decimals. */
+	precision?: number;
+	placeholder?: string;
+	disabled?: boolean;
+	prefix?: ReactNode;
+	suffix?: ReactNode;
+	className?: string;
+	rootClassName?: string;
+	style?: CSSProperties;
+	id?: string;
+	name?: string;
+	testId?: string;
+	autoFocus?: boolean;
+	onKeyDown?: KeyboardEventHandler<HTMLInputElement>;
+	onBlur?: FocusEventHandler<HTMLInputElement>;
+	onFocus?: FocusEventHandler<HTMLInputElement>;
+	'aria-label'?: string;
+	'data-testid'?: string;
+};
+
+const toInputValue = (value: number | null | undefined): string | undefined => {
+	if (value === null || value === undefined || Number.isNaN(value)) {
+		return '';
+	}
+	return String(value);
+};
+
+const parseValue = (raw: string, precision?: number): number | null => {
+	if (raw === '' || raw === '-') {
+		return null;
+	}
+	const parsed = Number(raw);
+	if (Number.isNaN(parsed)) {
+		return null;
+	}
+	if (precision === undefined) {
+		return parsed;
+	}
+	const factor = 10 ** precision;
+	return Math.round(parsed * factor) / factor;
+};
+
+const InputNumber = forwardRef<HTMLInputElement, InputNumberProps>(
+	(
+		{
+			value,
+			defaultValue,
+			onChange,
+			min,
+			max,
+			step,
+			precision,
+			placeholder,
+			disabled,
+			prefix,
+			suffix,
+			className,
+			rootClassName,
+			style,
+			id,
+			name,
+			testId,
+			autoFocus,
+			onKeyDown,
+			onBlur,
+			onFocus,
+			'aria-label': ariaLabel,
+			'data-testid': dataTestId,
+		},
+		ref,
+	): JSX.Element => {
+		const handleChange = (event: ChangeEvent<HTMLInputElement>): void => {
+			onChange?.(parseValue(event.target.value, precision));
+		};
+
+		return (
+			<Input
+				ref={ref}
+				type="number"
+				value={value === undefined ? undefined : toInputValue(value)}
+				defaultValue={
+					defaultValue === undefined ? undefined : toInputValue(defaultValue)
+				}
+				onChange={handleChange}
+				min={min}
+				max={max}
+				step={step}
+				placeholder={placeholder}
+				disabled={disabled}
+				prefix={prefix}
+				suffix={suffix}
+				className={cx('signoz-input-number', className)}
+				containerClassName={cx('signoz-input-number-container', rootClassName)}
+				style={style}
+				id={id}
+				name={name}
+				testId={testId ?? dataTestId}
+				autoFocus={autoFocus}
+				onKeyDown={onKeyDown}
+				onBlur={onBlur}
+				onFocus={onFocus}
+				aria-label={ariaLabel}
+			/>
+		);
+	},
+);
+
+InputNumber.displayName = 'InputNumber';
+
+export default InputNumber;

frontend/src/components/InputNumber/index.ts

@@ -0,0 +1,2 @@
+export { default } from './InputNumber';
+export type { InputNumberProps } from './InputNumber';

frontend/src/components/InputWithLabel/InputWithLabel.tsx

@@ -1,7 +1,6 @@
 import { useState } from 'react';
-import { Input } from 'antd';
+import { Button, Input } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
-import { Button } from '@signozhq/ui/button';
 import cx from 'classnames';
 import { X } from '@signozhq/icons';
 
@@ -56,12 +55,9 @@ function InputWithLabel({
 			{labelAfter && <Typography.Text className="label">{label}</Typography.Text>}
 			{onClose && (
 				<Button
-					className="close-btn"
+					className="periscope-btn ghost close-btn"
+					icon={closeIcon || <X size={16} />}
 					onClick={onClose}
-					variant="outlined"
-					color="secondary"
-					size="icon"
-					prefix={(closeIcon as JSX.Element) || <X size={16} />}
 				/>
 			)}
 		</div>

frontend/src/components/LaunchChatSupport/LaunchChatSupport.styles.scss

@@ -2,7 +2,7 @@
 	color: var(--bg-amber-500);
 	border-color: var(--bg-amber-500);
 
-	> button:hover {
+	> .ant-btn:hover {
 		color: var(--bg-amber-400) !important;
 		border-color: var(--bg-amber-300) !important;
 	}

frontend/src/components/LaunchChatSupport/LaunchChatSupport.tsx

@@ -1,9 +1,8 @@
 import { useMemo, useState } from 'react';
 import { useMutation } from 'react-query';
 import { useLocation } from 'react-router-dom';
-import { Modal, Tooltip } from 'antd';
+import { Button, Modal, Tooltip } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
-import { Button } from '@signozhq/ui/button';
 import logEvent from 'api/common/logEvent';
 import updateCreditCardApi from 'api/v1/checkout/create';
 import cx from 'classnames';
@@ -169,11 +168,9 @@ function LaunchChatSupport({
 				overlayClassName="tooltip-overlay"
 			>
 				<Button
-					className={cx('facing-issue-button', className)}
+					className={cx('periscope-btn', 'facing-issue-button', className)}
 					onClick={handleFacingIssuesClick}
-					variant="outlined"
-					color="secondary"
-					prefix={<CircleHelp size={14} />}
+					icon={<CircleHelp size={14} />}
 				>
 					{buttonText || 'Facing issues?'}
 				</Button>
@@ -192,19 +189,19 @@ function LaunchChatSupport({
 						key="cancel"
 						onClick={(): void => setIsAddCreditCardModalOpen(false)}
 						className="cancel-btn"
-						variant="outlined"
-						color="secondary"
-						prefix={<X size={16} />}
+						icon={<X size={16} />}
 					>
 						Cancel
 					</Button>,
 					<Button
 						key="submit"
+						type="primary"
+						icon={<CreditCard size={16} />}
+						size="middle"
 						loading={isLoadingBilling}
 						disabled={isLoadingBilling}
 						onClick={handleAddCreditCard}
 						className="add-credit-card-btn"
-						prefix={<CreditCard size={16} />}
 					>
 						Add Credit Card
 					</Button>,

frontend/src/components/LearnMore/LearnMore.tsx

@@ -1,9 +1,9 @@
 import { Color } from '@signozhq/design-tokens';
+import { Button } from 'antd';
 import { ArrowUpRight } from '@signozhq/icons';
 import { openInNewTab } from 'utils/navigation';
 
 import './LearnMore.styles.scss';
-import { Button } from '@signozhq/ui/button';
 
 type LearnMoreProps = {
 	text?: string;
@@ -19,7 +19,7 @@ function LearnMore({ text, url, onClick }: LearnMoreProps): JSX.Element {
 		}
 	};
 	return (
-		<Button className="learn-more" onClick={handleClick} variant="link">
+		<Button type="link" className="learn-more" onClick={handleClick}>
 			<div className="learn-more__text">{text}</div>
 			<ArrowUpRight size={16} color={Color.BG_ROBIN_400} />
 		</Button>

frontend/src/components/LogDetail/LogDetails.styles.scss

@@ -17,7 +17,7 @@
 		.log-detail-drawer__title-right {
 			display: flex;
 			align-items: center;
-			button {
+			.ant-btn {
 				display: flex;
 				align-items: center;
 			}

frontend/src/components/LogDetail/index.tsx

@@ -50,7 +50,6 @@ import {
 import { JsonView } from 'periscope/components/JsonView';
 import { useAppContext } from 'providers/App/App';
 import { AppState } from 'store/reducers';
-import { ILogBody } from 'types/api/logs/log';
 import { Query, TagFilter } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource, StringOperators } from 'types/common/queryBuilder';
 import { GlobalReducer } from 'types/reducer/globalTime';
@@ -218,17 +217,20 @@ function LogDetailInner({
 
 	const logBody = useMemo(() => {
 		if (!isBodyJsonQueryEnabled) {
-			return (log?.body as string) ?? '';
+			return log?.body || '';
 		}
-		// Feature enabled: body is always a map; message is always a string
-		const bodyObj = log?.body as ILogBody;
-		if (!bodyObj) {
-			return '';
+
+		try {
+			const json = JSON.parse(log?.body || '');
+
+			if (typeof json?.message === 'string' && json.message !== '') {
+				return json.message;
+			}
+
+			return log?.body || '';
+		} catch {
+			return log?.body || '';
 		}
-		if (bodyObj.message) {
-			return bodyObj.message;
-		}
-		return JSON.stringify(bodyObj);
 	}, [isBodyJsonQueryEnabled, log?.body]);
 
 	const htmlBody = useMemo(

frontend/src/components/Logs/ListLogView/ListLogView.styles.scss

@@ -166,7 +166,7 @@
 		border-left: 1px solid var(--l1-border) !important;
 	}
 
-	button {
+	.ant-btn-default {
 		border: none;
 		box-shadow: none;
 	}

frontend/src/components/Logs/LogLinesActionButtons/LogLinesActionButtons.styles.scss

@@ -9,7 +9,7 @@
 	border: 1px solid var(--l1-border);
 	background: var(--l2-background);
 
-	button {
+	.ant-btn-default {
 		border: none;
 		box-shadow: none;
 		padding: 9px;

frontend/src/components/Logs/LogLinesActionButtons/LogLinesActionButtons.tsx

@@ -1,9 +1,8 @@
 import { memo, MouseEventHandler } from 'react';
 import { Link, TextSelect } from '@signozhq/icons';
-import { Tooltip } from 'antd';
+import { Button, Tooltip } from 'antd';
 
 import './LogLinesActionButtons.styles.scss';
-import { Button } from '@signozhq/ui/button';
 
 export interface LogLinesActionButtonsProps {
 	handleShowContext: MouseEventHandler<HTMLElement>;
@@ -20,22 +19,18 @@ function LogLinesActionButtons({
 		<div className={`log-line-action-buttons ${customClassName}`}>
 			<Tooltip title="Show in Context">
 				<Button
+					size="small"
+					icon={<TextSelect size={14} />}
 					className="show-context-btn"
 					onClick={handleShowContext}
-					size="sm"
-					variant="outlined"
-					color="secondary"
-					prefix={<TextSelect size={14} />}
 				/>
 			</Tooltip>
 			<Tooltip title="Copy Link">
 				<Button
+					size="small"
+					icon={<Link size={14} />}
 					onClick={onLogCopy}
 					className="copy-log-btn"
-					size="sm"
-					variant="outlined"
-					color="secondary"
-					prefix={<Link size={14} />}
 				/>
 			</Tooltip>
 		</div>

frontend/src/components/Logs/RawLogView/index.tsx

@@ -9,10 +9,7 @@ import { Color } from '@signozhq/design-tokens';
 import { Tooltip } from 'antd';
 import { VIEW_TYPES } from 'components/LogDetail/constants';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
-import {
-	getBodyDisplayString,
-	getSanitizedLogBody,
-} from 'container/LogDetailedView/utils';
+import { getSanitizedLogBody } from 'container/LogDetailedView/utils';
 import { useCopyLogLink } from 'hooks/logs/useCopyLogLink';
 // hooks
 import { useIsDarkMode } from 'hooks/useDarkMode';
@@ -102,7 +99,7 @@ function RawLogView({
 		// Check if body is selected
 		const showBody = selectedFields.some((field) => field.name === 'body');
 		if (showBody) {
-			parts.push(`${attributesText} ${getBodyDisplayString(data.body)}`);
+			parts.push(`${attributesText} ${data.body}`);
 		} else {
 			parts.push(attributesText);
 		}

frontend/src/components/Logs/TableView/useLogsTableColumns.tsx

@@ -2,10 +2,7 @@ import type { ReactElement } from 'react';
 import { useMemo } from 'react';
 import TanStackTable from 'components/TanStackTableView';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
-import {
-	getBodyDisplayString,
-	getSanitizedLogBody,
-} from 'container/LogDetailedView/utils';
+import { getSanitizedLogBody } from 'container/LogDetailedView/utils';
 import { FontSize } from 'container/OptionsMenu/types';
 import { FlatLogData } from 'lib/logs/flatLogData';
 import { useTimezone } from 'providers/Timezone';
@@ -90,7 +87,7 @@ export function useLogsTableColumns({
 			? {
 					id: 'body',
 					header: 'Body',
-					accessorFn: (log): string => getBodyDisplayString(log.body),
+					accessorFn: (log): string => log.body,
 					canBeHidden: false,
 					width: { default: '100%', min: 300 },
 					cell: ({ value, isActive }): ReactElement => (

frontend/src/components/LogsFormatOptionsMenu/LogsFormatOptionsMenu.tsx

@@ -1,9 +1,9 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
-import { Input, InputNumber, Popover, Tooltip } from 'antd';
+import { Button, Input, Popover, Tooltip } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
-import { Button } from '@signozhq/ui/button';
 import type { DefaultOptionType } from 'antd/es/select';
 import cx from 'classnames';
+import InputNumber from 'components/InputNumber';
 import { LogViewMode } from 'container/LogsTable';
 import { FontSize, OptionsMenuConfig } from 'container/OptionsMenu/types';
 import useDebouncedFn from 'hooks/useDebouncedFunction';
@@ -224,8 +224,7 @@ function OptionsMenu({
 					<Button
 						onClick={(): void => setIsFontSizeOptionsOpen(false)}
 						className="back-btn"
-						variant="ghost"
-						color="secondary"
+						type="text"
 					>
 						<ChevronLeft size={14} className="icon" />
 						<Typography.Text className="text">Select font size</Typography.Text>
@@ -237,8 +236,7 @@ function OptionsMenu({
 								setFontSizeValue(FontSize.SMALL);
 							}}
 							className="option-btn"
-							variant="ghost"
-							color="secondary"
+							type="text"
 						>
 							<Typography.Text className="text">{FontSize.SMALL}</Typography.Text>
 							{fontSizeValue === FontSize.SMALL && (
@@ -250,8 +248,7 @@ function OptionsMenu({
 								setFontSizeValue(FontSize.MEDIUM);
 							}}
 							className="option-btn"
-							variant="ghost"
-							color="secondary"
+							type="text"
 						>
 							<Typography.Text className="text">{FontSize.MEDIUM}</Typography.Text>
 							{fontSizeValue === FontSize.MEDIUM && (
@@ -263,8 +260,7 @@ function OptionsMenu({
 								setFontSizeValue(FontSize.LARGE);
 							}}
 							className="option-btn"
-							variant="ghost"
-							color="secondary"
+							type="text"
 						>
 							<Typography.Text className="text">{FontSize.LARGE}</Typography.Text>
 							{fontSizeValue === FontSize.LARGE && (
@@ -343,11 +339,10 @@ function OptionsMenu({
 						<div className="title">Font Size</div>
 						<Button
 							className="value"
+							type="text"
 							onClick={(): void => {
 								setIsFontSizeOptionsOpen(true);
 							}}
-							variant="ghost"
-							color="secondary"
 						>
 							<Typography.Text className="font-value">{fontSizeValue}</Typography.Text>
 							<ChevronRight size={14} className="icon" />
@@ -478,11 +473,9 @@ function LogsFormatOptionsMenu({
 		>
 			<Tooltip title="Options">
 				<Button
+					className="periscope-btn ghost"
+					icon={<SlidersVertical size="md" />}
 					data-testid="periscope-btn-format-options"
-					variant="outlined"
-					color="secondary"
-					size="icon"
-					prefix={<SlidersVertical size={14} />}
 				/>
 			</Tooltip>
 		</Popover>

frontend/src/components/MessagingQueueHealthCheck/MessagingQueueHealthCheck.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useMemo, useState } from 'react';
+import { Button } from 'antd';
 import cx from 'classnames';
 import { useOnboardingStatus } from 'hooks/messagingQueue/useOnboardingStatus';
 import { Bolt, FolderTree } from '@signozhq/icons';
@@ -7,7 +8,6 @@ import { MessagingQueueHealthCheckService } from 'pages/MessagingQueues/Messagin
 import AttributeCheckList from './AttributeCheckList';
 
 import './MessagingQueueHealthCheck.styles.scss';
-import { Button } from '@signozhq/ui/button';
 
 interface MessagingQueueHealthCheckProps {
 	serviceToInclude: string[];
@@ -94,9 +94,7 @@ function MessagingQueueHealthCheck({
 					'config-btn',
 					missingConfiguration ? 'missing-config-btn' : '',
 				)}
-				variant="outlined"
-				color="secondary"
-				prefix={<Bolt size={12} />}
+				icon={<Bolt size={12} />}
 			>
 				<div className="config-btn-content">
 					{missingConfiguration

frontend/src/components/NewSelect/CustomMultiSelect.tsx

@@ -18,9 +18,8 @@ import {
 	RefreshCw,
 } from '@signozhq/icons';
 import { Color } from '@signozhq/design-tokens';
-import { Checkbox, Select } from 'antd';
+import { Button, Checkbox, Select } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
-import { Button } from '@signozhq/ui/button';
 import cx from 'classnames';
 import TextToolTip from 'components/TextToolTip/TextToolTip';
 import { SOMETHING_WENT_WRONG } from 'constants/api';
@@ -768,11 +767,11 @@ const CustomMultiSelect: React.FC<CustomMultiSelectProps> = ({
 								<div className="option-badge">{capitalize(option.type)}</div>
 							)}
 							{option.value && ensureValidOption(option.value) && (
-								<Button className="only-btn" variant="ghost" color="secondary">
+								<Button type="text" className="only-btn">
 									{currentToggleTagValue({ option: option.value })}
 								</Button>
 							)}
-							<Button className="toggle-btn" variant="ghost" color="secondary">
+							<Button type="text" className="toggle-btn">
 								Toggle
 							</Button>
 						</div>

frontend/src/components/QueryBuilderV2/QueryV2/QueryAddOns/HavingFilter/HavingFilter.tsx

@@ -13,12 +13,12 @@ import { javascript } from '@codemirror/lang-javascript';
 import { copilot } from '@uiw/codemirror-theme-copilot';
 import { githubLight } from '@uiw/codemirror-theme-github';
 import CodeMirror, { EditorView, keymap } from '@uiw/react-codemirror';
+import { Button } from 'antd';
 import { Having } from 'api/v5/v5';
 import { useQueryBuilderV2Context } from 'components/QueryBuilderV2/QueryBuilderV2Context';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { ChevronUp } from '@signozhq/icons';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
-import { Button } from '@signozhq/ui/button';
 
 const havingOperators = [
 	{
@@ -368,12 +368,9 @@ function HavingFilter({
 					}}
 				/>
 				<Button
-					className="close-btn"
+					className="close-btn periscope-btn ghost"
+					icon={<ChevronUp size={16} />}
 					onClick={onClose}
-					variant="outlined"
-					color="secondary"
-					size="icon"
-					prefix={<ChevronUp size={16} />}
 				/>
 			</div>
 		</div>

frontend/src/components/QueryBuilderV2/QueryV2/QueryAddOns/QueryAddOns.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
-import { Radio, RadioChangeEvent, Tooltip } from 'antd';
+import { Button, Radio, RadioChangeEvent, Tooltip } from 'antd';
 import InputWithLabel from 'components/InputWithLabel/InputWithLabel';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { GroupByFilter } from 'container/QueryBuilder/filters/GroupByFilter/GroupByFilter';
@@ -17,7 +17,6 @@ import HavingFilter from './HavingFilter/HavingFilter';
 import { buildDefaultLegendFromGroupBy } from './utils';
 
 import './QueryAddOns.styles.scss';
-import { Button } from '@signozhq/ui/button';
 
 interface AddOn {
 	icon: React.ReactNode;
@@ -371,12 +370,9 @@ function QueryAddOns({
 									/>
 								</div>
 								<Button
-									className="close-btn"
+									className="close-btn periscope-btn ghost"
+									icon={<ChevronUp size={16} />}
 									onClick={(): void => handleRemoveView('group_by')}
-									variant="outlined"
-									color="secondary"
-									size="icon"
-									prefix={<ChevronUp size={16} />}
 								/>
 							</div>
 						</div>
@@ -459,12 +455,9 @@ function QueryAddOns({
 								</div>
 								{!isListViewPanel && (
 									<Button
-										className="close-btn"
+										className="close-btn periscope-btn ghost"
+										icon={<ChevronUp size={16} />}
 										onClick={(): void => handleRemoveView('order_by')}
-										variant="outlined"
-										color="secondary"
-										size="icon"
-										prefix={<ChevronUp size={16} />}
 									/>
 								)}
 							</div>
@@ -495,12 +488,9 @@ function QueryAddOns({
 									</div>
 
 									<Button
-										className="close-btn"
+										className="close-btn periscope-btn ghost"
+										icon={<ChevronUp size={16} />}
 										onClick={(): void => handleRemoveView('reduce_to')}
-										variant="outlined"
-										color="secondary"
-										size="icon"
-										prefix={<ChevronUp size={16} />}
 									/>
 								</div>
 							</div>

frontend/src/components/QueryBuilderV2/QueryV2/QueryAggregation/QueryAggregationSelect.tsx

@@ -23,7 +23,7 @@ import CodeMirror, {
 	ViewPlugin,
 	ViewUpdate,
 } from '@uiw/react-codemirror';
-import { Popover, Tooltip } from 'antd';
+import { Button, Popover, Tooltip } from 'antd';
 import { getKeySuggestions } from 'api/querySuggestions/getKeySuggestions';
 import { QUERY_BUILDER_KEY_TYPES } from 'constants/antlrQueryConstants';
 import { QueryBuilderKeys } from 'constants/queryBuilder';
@@ -36,7 +36,6 @@ import { TracesAggregatorOperator } from 'types/common/queryBuilder';
 import { useQueryBuilderV2Context } from '../../QueryBuilderV2Context';
 
 import './QueryAggregation.styles.scss';
-import { Button } from '@signozhq/ui/button';
 
 const chipDecoration = Decoration.mark({
 	class: 'chip-decorator',
@@ -721,10 +720,9 @@ function QueryAggregationSelect({
 						overlayClassName="query-aggregation-error-popover"
 					>
 						<Button
-							className="query-aggregation-error-btn"
-							variant="ghost"
-							size="icon"
-							prefix={<TriangleAlert size={14} color={Color.BG_CHERRY_500} />}
+							type="text"
+							icon={<TriangleAlert size={14} color={Color.BG_CHERRY_500} />}
+							className="periscope-btn ghost query-aggregation-error-btn"
 						/>
 					</Popover>
 				</div>

frontend/src/components/QueryBuilderV2/QueryV2/QueryFooter/QueryFooter.tsx

@@ -1,7 +1,6 @@
 import { useMemo } from 'react';
-import { Tooltip } from 'antd';
+import { Button, Tooltip } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
-import { Button } from '@signozhq/ui/button';
 import WarningPopover from 'components/WarningPopover/WarningPopover';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
@@ -57,11 +56,9 @@ function TraceOperatorSection({
 				}
 			>
 				<Button
-					className="add-trace-operator-button"
+					className="add-trace-operator-button periscope-btn"
+					icon={<DraftingCompass size={16} />}
 					onClick={(): void => addTraceOperator?.()}
-					variant="outlined"
-					color="secondary"
-					prefix={<DraftingCompass size={16} />}
 				>
 					<div className="qb-trace-operator-button-container-text">
 						Add Trace Matching
@@ -95,12 +92,9 @@ export default function QueryFooter({
 				<div className="qb-add-new-query">
 					<Tooltip title={<div style={{ textAlign: 'center' }}>Add New Query</div>}>
 						<Button
-							className="add-new-query-button"
+							className="add-new-query-button periscope-btn "
+							icon={<Plus size={16} />}
 							onClick={addNewBuilderQuery}
-							variant="outlined"
-							color="secondary"
-							size="icon"
-							prefix={<Plus size={16} />}
 						/>
 					</Tooltip>
 				</div>
@@ -124,11 +118,9 @@ export default function QueryFooter({
 							}
 						>
 							<Button
-								className="add-formula-button"
+								className="add-formula-button periscope-btn "
+								icon={<Sigma size={16} />}
 								onClick={addNewFormula}
-								variant="outlined"
-								color="secondary"
-								prefix={<Sigma size={16} />}
 							>
 								Add Formula
 							</Button>

frontend/src/components/QueryBuilderV2/QueryV2/QuerySearch/QuerySearch.tsx

@@ -14,7 +14,7 @@ import { Color } from '@signozhq/design-tokens';
 import { copilot } from '@uiw/codemirror-theme-copilot';
 import { githubLight } from '@uiw/codemirror-theme-github';
 import CodeMirror, { EditorView, keymap, Prec } from '@uiw/react-codemirror';
-import { Card, Collapse, Popover, Tag, Tooltip } from 'antd';
+import { Button, Card, Collapse, Popover, Tag, Tooltip } from 'antd';
 import { getKeySuggestions } from 'api/querySuggestions/getKeySuggestions';
 import { getValueSuggestions } from 'api/querySuggestions/getValueSuggestion';
 import cx from 'classnames';
@@ -49,7 +49,6 @@ import { queryExamples } from './constants';
 import { combineInitialAndUserExpression } from './utils';
 
 import './QuerySearch.styles.scss';
-import { Button } from '@signozhq/ui/button';
 
 const { Panel } = Collapse;
 
@@ -1485,17 +1484,15 @@ function QuerySearch({
 						>
 							{validation.isValid ? (
 								<Button
-									variant="ghost"
-									color="secondary"
-									size="icon"
-									prefix={<CircleCheck size={14} />}
+									type="text"
+									icon={<CircleCheck size="md" />}
+									className="periscope-btn ghost"
 								/>
 							) : (
 								<Button
-									color="destructive"
-									variant="ghost"
-									size="icon"
-									prefix={<TriangleAlert size={14} />}
+									type="text"
+									icon={<TriangleAlert size={14} color={Color.BG_CHERRY_500} />}
+									className="periscope-btn ghost"
 								/>
 							)}
 						</Popover>

frontend/src/components/QueryBuilderV2/QueryV2/TraceOperator/TraceOperator.tsx

@@ -1,6 +1,5 @@
 import { useCallback } from 'react';
-import { Tooltip } from 'antd';
-import { Button } from '@signozhq/ui/button';
+import { Button, Tooltip } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import cx from 'classnames';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
@@ -109,7 +108,7 @@ export default function TraceOperator({
 				)}
 			</div>
 			<Tooltip title="Remove Trace Operator" placement="topLeft">
-				<Button onClick={removeTraceOperator} variant="outlined" color="secondary">
+				<Button className="periscope-btn ghost" onClick={removeTraceOperator}>
 					<Trash2 size={14} />
 				</Button>
 			</Tooltip>

frontend/src/components/QueryBuilderV2/QueryV2/TraceOperator/TraceOperatorEditor.tsx

@@ -15,7 +15,7 @@ import { Color } from '@signozhq/design-tokens';
 import { copilot } from '@uiw/codemirror-theme-copilot';
 import { githubLight } from '@uiw/codemirror-theme-github';
 import CodeMirror, { EditorView, keymap, Prec } from '@uiw/react-codemirror';
-import { Popover } from 'antd';
+import { Button, Popover } from 'antd';
 import cx from 'classnames';
 import {
 	TRACE_OPERATOR_OPERATORS,
@@ -34,7 +34,6 @@ import { getInvolvedQueriesInTraceOperator } from './utils/utils';
 
 import '../QuerySearch/QuerySearch.styles.scss';
 import { CircleCheck, TriangleAlert } from '@signozhq/icons';
-import { Button } from '@signozhq/ui/button';
 
 // Custom extension to stop events
 const stopEventsExtension = EditorView.domEventHandlers({
@@ -466,16 +465,15 @@ function TraceOperatorEditor({
 						>
 							{validation.isValid ? (
 								<Button
-									variant="ghost"
-									color="secondary"
-									size="icon"
-									prefix={<CircleCheck size={14} />}
+									type="text"
+									icon={<CircleCheck size="md" />}
+									className="periscope-btn ghost"
 								/>
 							) : (
 								<Button
-									variant="ghost"
-									size="icon"
-									prefix={<TriangleAlert size={14} color={Color.BG_CHERRY_500} />}
+									type="text"
+									icon={<TriangleAlert size={14} color={Color.BG_CHERRY_500} />}
+									className="periscope-btn ghost"
 								/>
 							)}
 						</Popover>

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/Checkbox.tsx

@@ -1,7 +1,6 @@
 /* eslint-disable sonarjs/no-identical-functions */
 import { Fragment, useMemo, useState } from 'react';
-import { Checkbox, Input, Skeleton } from 'antd';
-import { Button } from '@signozhq/ui/button';
+import { Button, Checkbox, Input, Skeleton } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import cx from 'classnames';
 import { removeKeysFromExpression } from 'components/QueryBuilderV2/utils';
@@ -661,14 +660,14 @@ export default function CheckboxFilter(props: ICheckboxProps): JSX.Element {
 													{String(value)}
 												</Typography.Text>
 											)}
-											<Button className="only-btn" variant="ghost" color="secondary">
+											<Button type="text" className="only-btn">
 												{isSomeFilterPresentForCurrentAttribute
 													? currentFilterState[value] && !isMultipleValuesTrueForTheKey
 														? 'All'
 														: 'Only'
 													: 'Only'}
 											</Button>
-											<Button className="toggle-btn" variant="ghost" color="secondary">
+											<Button type="text" className="toggle-btn">
 												Toggle
 											</Button>
 										</div>

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/LogsQuickFilterEmptyState.tsx

@@ -1,7 +1,7 @@
 import { Color } from '@signozhq/design-tokens';
+import { Button } from 'antd';
 import EmptyQuickFilterIcon from 'assets/CustomIcons/EmptyQuickFilterIcon';
 import { ArrowUpRight } from '@signozhq/icons';
-import { Button } from '@signozhq/ui/button';
 
 const QUICK_FILTER_DOC_PATHS: Record<string, string> = {
 	severity_text: 'severity-text',
@@ -39,9 +39,9 @@ function LogsQuickFilterEmptyState({
 				</div>
 			</div>
 			<Button
+				type="link"
 				className="go-to-docs__button"
 				onClick={handleLearnMoreClick}
-				variant="link"
 			>
 				<div className="go-to-docs__button-text">Learn more</div>
 				<ArrowUpRight size={14} color={Color.BG_ROBIN_400} />

frontend/src/components/QuickFilters/FilterRenderers/Duration/Duration.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
-import { Collapse } from 'antd';
+import { Button, Collapse } from 'antd';
 import {
 	IQuickFiltersConfig,
 	QuickFiltersSource,
@@ -21,7 +21,6 @@ import { Query, TagFilterItem } from 'types/api/queryBuilder/queryBuilderData';
 import { v4 as uuid } from 'uuid';
 
 import './Duration.styles.scss';
-import { Button } from '@signozhq/ui/button';
 
 export type FilterType = Record<
 	AllTraceFilterKeys,
@@ -300,9 +299,9 @@ function Duration({
 			/>
 			{activeKeys.includes('durationNano') && (
 				<Button
+					type="link"
 					onClick={onClearHandler}
 					data-testid="collapse-duration-clearBtn"
-					variant="link"
 				>
 					Clear All
 				</Button>

frontend/src/components/QuickFilters/QuickFiltersSettings/AddedFilters.tsx

@@ -14,10 +14,10 @@ import {
 	verticalListSortingStrategy,
 } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
+import { Button } from 'antd';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
 import { GripVertical } from '@signozhq/icons';
 import { Filter as FilterType } from 'types/api/quickFilters/getCustomFilters';
-import { Button } from '@signozhq/ui/button';
 
 function SortableFilter({
 	filter,
@@ -50,13 +50,11 @@ function SortableFilter({
 			</div>
 			{allowRemove && (
 				<Button
-					className="remove-filter-btn"
+					className="remove-filter-btn periscope-btn"
+					size="small"
 					onClick={(): void => {
 						onRemove(filter as FilterType);
 					}}
-					size="sm"
-					variant="outlined"
-					color="secondary"
 				>
 					Remove
 				</Button>

frontend/src/components/QuickFilters/QuickFiltersSettings/OtherFilters.tsx

@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { Skeleton } from 'antd';
+import { Button, Skeleton } from 'antd';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
 import { SIGNAL_DATA_SOURCE_MAP } from 'components/QuickFilters/QuickFiltersSettings/constants';
 import { SignalType } from 'components/QuickFilters/types';
@@ -12,7 +12,6 @@ import { TagFilter } from 'types/api/queryBuilder/queryBuilderData';
 import { QueryKeyDataSuggestionsProps } from 'types/api/querySuggestions/types';
 import { Filter as FilterType } from 'types/api/quickFilters/getCustomFilters';
 import { DataSource } from 'types/common/queryBuilder';
-import { Button } from '@signozhq/ui/button';
 
 function OtherFiltersSkeleton(): JSX.Element {
 	return (
@@ -147,11 +146,9 @@ function OtherFilters({
 			<div key={filter.key} className="qf-filter-item other-filters-item">
 				<div className="qf-filter-key">{filter.key}</div>
 				<Button
-					className="add-filter-btn"
+					className="add-filter-btn periscope-btn"
+					size="small"
 					onClick={(): void => handleAddFilter(filter as FilterType)}
-					size="sm"
-					variant="outlined"
-					color="secondary"
 				>
 					Add
 				</Button>

frontend/src/components/QuickFilters/QuickFiltersSettings/QuickFiltersSettings.tsx

@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { Input } from 'antd';
+import { Button, Input } from 'antd';
 import { Check, TableColumnsSplit, X } from '@signozhq/icons';
 import { Filter as FilterType } from 'types/api/quickFilters/getCustomFilters';
 
@@ -9,7 +9,6 @@ import useQuickFilterSettings from './hooks/useQuickFilterSettings';
 import OtherFilters from './OtherFilters';
 
 import './QuickFiltersSettings.styles.scss';
-import { Button } from '@signozhq/ui/button';
 
 function QuickFiltersSettings({
 	signal,
@@ -87,17 +86,17 @@ function QuickFiltersSettings({
 			{hasUnsavedChanges && (
 				<div className="qf-footer">
 					<Button
+						type="default"
 						onClick={handleDiscardChanges}
-						variant="outlined"
-						color="secondary"
-						prefix={<X size={16} />}
+						icon={<X size={16} />}
 					>
 						Discard
 					</Button>
 					<Button
+						type="primary"
 						onClick={handleSaveChanges}
+						icon={<Check size={16} />}
 						loading={isUpdatingCustomFilters}
-						prefix={<Check size={16} />}
 					>
 						Save changes
 					</Button>

frontend/src/components/RefreshPaymentStatus/RefreshPaymentStatus.tsx

@@ -1,14 +1,16 @@
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Tooltip } from 'antd';
+import { Button, Tooltip } from 'antd';
 import refreshPaymentStatus from 'api/v3/licenses/put';
+import cx from 'classnames';
 import { RefreshCcw } from '@signozhq/icons';
 import { useAppContext } from 'providers/App/App';
-import { Button } from '@signozhq/ui/button';
 
 function RefreshPaymentStatus({
+	btnShape,
 	type,
 }: {
+	btnShape?: 'default' | 'round' | 'circle';
 	type?: 'button' | 'text' | 'tooltip';
 }): JSX.Element {
 	const { t } = useTranslation(['failedPayment']);
@@ -33,11 +35,12 @@ function RefreshPaymentStatus({
 		<span className="refresh-payment-status-btn-wrapper">
 			<Tooltip title={type === 'tooltip' ? t('refreshPaymentStatus') : ''}>
 				<Button
+					type={type === 'text' ? 'text' : 'default'}
+					shape={btnShape}
+					className={cx('periscope-btn', { text: type === 'text' })}
 					onClick={handleRefreshPaymentStatus}
+					icon={<RefreshCcw size={14} />}
 					loading={isLoading}
-					variant="outlined"
-					color="secondary"
-					prefix={<RefreshCcw size={14} />}
 				>
 					{type !== 'tooltip' ? t('refreshPaymentStatus') : ''}
 				</Button>
@@ -46,6 +49,7 @@ function RefreshPaymentStatus({
 	);
 }
 RefreshPaymentStatus.defaultProps = {
+	btnShape: 'default',
 	type: 'button',
 };
 

frontend/src/components/ResizeTable/DynamicColumnTable.tsx

@@ -4,7 +4,7 @@ import type {
 	TableColumnsType as ColumnsType,
 	TableColumnType as ColumnType,
 } from 'antd';
-import { Dropdown, Flex, MenuProps, Switch } from 'antd';
+import { Button, Dropdown, Flex, MenuProps, Switch } from 'antd';
 import logEvent from 'api/common/logEvent';
 import LaunchChatSupport from 'components/LaunchChatSupport/LaunchChatSupport';
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
@@ -21,7 +21,6 @@ import {
 } from './utils';
 
 import './DynamicColumnTable.syles.scss';
-import { Button } from '@signozhq/ui/button';
 
 function DynamicColumnTable({
 	tablesource,
@@ -134,11 +133,9 @@ function DynamicColumnTable({
 					>
 						<Button
 							className="dynamicColumnTable-button filter-btn"
+							size="middle"
+							icon={<SlidersHorizontal size={14} />}
 							data-testid="additional-filters-button"
-							variant="outlined"
-							color="secondary"
-							size="icon"
-							prefix={<SlidersHorizontal size={14} />}
 						/>
 					</Dropdown>
 				)}

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

@@ -127,6 +127,7 @@ function KeyFormPhase({
 					>
 						<Button
 							type="submit"
+							// @ts-expect-error -- form prop not in @signozhq/ui Button type - TODO: Fix this - @SagarRajput
 							form={FORM_ID}
 							variant="solid"
 							color="primary"

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

@@ -190,6 +190,7 @@ function EditKeyForm({
 					>
 						<Button
 							type="submit"
+							// @ts-expect-error -- form prop not in @signozhq/ui Button type - TODO: Fix this - @SagarRajput
 							form={FORM_ID}
 							variant="solid"
 							color="primary"

frontend/src/components/SignozModal/SignozModal.style.scss

@@ -74,7 +74,7 @@
 	}
 
 	.ant-modal-footer {
-		button {
+		.ant-btn {
 			display: flex;
 			align-items: center;
 			gap: 4px;

frontend/src/components/Tags/Tags.tsx

@@ -1,10 +1,9 @@
 import React, { Dispatch, SetStateAction, useState } from 'react';
 import { Check, Plus, X } from '@signozhq/icons';
-import { Flex, Tag } from 'antd';
+import { Button, Flex, Tag } from 'antd';
 import Input from 'components/Input';
 
 import './Tags.styles.scss';
-import { Button } from '@signozhq/ui/button';
 
 function Tags({ tags, setTags }: AddTagsProps): JSX.Element {
 	const [inputValue, setInputValue] = useState<string>('');
@@ -72,19 +71,19 @@ function Tags({ tags, setTags }: AddTagsProps): JSX.Element {
 
 					<div className="confirm-cancel-actions">
 						<Button
+							type="primary"
+							className="periscope-btn"
+							size="small"
+							icon={<Check size={14} />}
 							onClick={handleInputConfirm}
-							size="sm"
-							prefix={<Check size={14} />}
-							variant="outlined"
-							color="secondary"
 						/>
 
 						<Button
+							type="primary"
+							className="periscope-btn"
+							size="small"
+							icon={<X size={14} />}
 							onClick={hideInput}
-							size="sm"
-							prefix={<X size={14} />}
-							variant="outlined"
-							color="secondary"
 						/>
 					</div>
 				</div>
@@ -92,14 +91,15 @@ function Tags({ tags, setTags }: AddTagsProps): JSX.Element {
 
 			{!inputVisible && (
 				<Button
+					type="primary"
+					size="small"
 					style={{
 						fontSize: '11px',
 					}}
 					onClick={showInput}
-					size="sm"
-					prefix={<Plus size={14} />}
 				>
 					<Flex justify="center" align="center" gap={4}>
+						<Plus size="md" />
 						New Tag
 					</Flex>
 				</Button>

frontend/src/components/TanStackTableView/TanStackTable.tsx

@@ -626,10 +626,6 @@ function TanStackTableInner<TData>(
 										onChange={(value): void => {
 											setLimit(+value);
 											pagination.onLimitChange?.(+value);
-											if (page !== 1) {
-												setPage(1);
-												pagination.onPageChange?.(1);
-											}
 										}}
 										items={paginationPageSizeItems}
 									/>

frontend/src/components/TanStackTableView/__tests__/TanStackTableView.test.tsx

@@ -401,62 +401,6 @@ describe('TanStackTableView Integration', () => {
 				expect(onLimitChange).toHaveBeenCalledWith(20);
 			});
 		});
-
-		it('resets page to 1 when limit changes', async () => {
-			const user = userEvent.setup();
-			const onUrlUpdate = jest.fn<void, [UrlUpdateEvent]>();
-			const onPageChange = jest.fn();
-
-			renderTanStackTable({
-				props: {
-					pagination: { total: 100, defaultPage: 1, defaultLimit: 10, onPageChange },
-					enableQueryParams: true,
-				},
-				onUrlUpdate,
-			});
-
-			await waitFor(() => {
-				expect(screen.getByRole('navigation')).toBeInTheDocument();
-			});
-
-			// Navigate to page 2
-			const nav = screen.getByRole('navigation');
-			const page2 = Array.from(nav.querySelectorAll('button')).find(
-				(btn) => btn.textContent?.trim() === '2',
-			);
-			if (!page2) {
-				throw new Error('Page 2 button not found in pagination');
-			}
-			await user.click(page2);
-
-			await waitFor(() => {
-				const lastPage = onUrlUpdate.mock.calls
-					.map((call) => call[0].searchParams.get('page'))
-					.filter(Boolean)
-					.pop();
-				expect(lastPage).toBe('2');
-			});
-
-			// Change page size
-			const comboboxTrigger = document.querySelector(
-				'button[aria-haspopup="dialog"]',
-			) as HTMLElement;
-			await user.click(comboboxTrigger);
-
-			const option20 = await screen.findByRole('option', { name: '20' });
-			await user.click(option20);
-
-			// Verify page reset to 1 (nuqs removes default values from URL)
-			await waitFor(() => {
-				const lastCall = onUrlUpdate.mock.calls[onUrlUpdate.mock.calls.length - 1];
-				const lastPage = lastCall[0].searchParams.get('page');
-				expect(lastPage === '1' || lastPage === null).toBe(true);
-				expect(lastCall[0].searchParams.get('limit')).toBe('20');
-			});
-
-			// Verify onPageChange callback was called with 1
-			expect(onPageChange).toHaveBeenCalledWith(1);
-		});
 	});
 
 	describe('sorting', () => {

frontend/src/components/TimePreferenceDropDown/index.tsx

@@ -1,7 +1,6 @@
 import { Dispatch, SetStateAction, useCallback, useMemo } from 'react';
 import { ChevronDown, Globe } from '@signozhq/icons';
-import { Dropdown } from 'antd';
-import { Button } from '@signozhq/ui/button';
+import { Button, Dropdown } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import TimeItems, {
 	timePreferance,
@@ -41,7 +40,7 @@ function TimePreference({
 			className="time-selection-target"
 			trigger={['click']}
 		>
-			<Button variant="outlined" color="secondary">
+			<Button>
 				<div className="button-selected-text">
 					<Globe size={14} />
 					<Typography.Text className="selected-value">

frontend/src/constants/routes.ts

@@ -29,6 +29,7 @@ const ROUTES = {
 	ALERTS_NEW: '/alerts/new',
 	ALERT_HISTORY: '/alerts/history',
 	ALERT_OVERVIEW: '/alerts/overview',
+	ALERT_TYPE_SELECTION: '/alerts/type-selection',
 	ALL_CHANNELS: '/settings/channels',
 	CHANNELS_NEW: '/settings/channels/new',
 	CHANNELS_EDIT: '/settings/channels/edit/:channelId',

frontend/src/container/AIAssistant/AIAssistantModal/AIAssistantModal.tsx

@@ -161,7 +161,6 @@ export default function AIAssistantModal(): JSX.Element | null {
 							<TooltipSimple title={showHistory ? 'Back to chat' : 'Conversations'}>
 								<Button
 									variant="ghost"
-									color="secondary"
 									size="icon"
 									onClick={(): void => setShowHistory((v) => !v)}
 									aria-label="Toggle conversations"
@@ -174,7 +173,6 @@ export default function AIAssistantModal(): JSX.Element | null {
 							<TooltipSimple title="New conversation">
 								<Button
 									variant="ghost"
-									color="secondary"
 									size="icon"
 									onClick={handleNew}
 									aria-label="New conversation"
@@ -186,7 +184,6 @@ export default function AIAssistantModal(): JSX.Element | null {
 							<TooltipSimple title="Open full screen">
 								<Button
 									variant="ghost"
-									color="secondary"
 									size="icon"
 									onClick={handleExpand}
 									disabled={!activeConversationId}
@@ -199,7 +196,6 @@ export default function AIAssistantModal(): JSX.Element | null {
 							<TooltipSimple title="Minimize to side panel">
 								<Button
 									variant="ghost"
-									color="secondary"
 									size="icon"
 									onClick={handleMinimize}
 									aria-label="Minimize to side panel"
@@ -211,7 +207,6 @@ export default function AIAssistantModal(): JSX.Element | null {
 							<TooltipSimple title="Close">
 								<Button
 									variant="ghost"
-									color="secondary"
 									size="icon"
 									onClick={closeModal}
 									aria-label="Close"

frontend/src/container/AIAssistant/components/ChatInput/ChatInput.tsx

@@ -738,7 +738,6 @@ export default function ChatInput({
 							<span className={styles.attachmentName}>{f.name}</span>
 							<Button
 								variant="ghost"
-								color="secondary"
 								size="icon"
 								className={styles.attachmentRemove}
 								onClick={(): void => removeFile(f.uid)}
@@ -1008,7 +1007,6 @@ export default function ChatInput({
 							<TooltipSimple title="Voice input">
 								<Button
 									variant="ghost"
-									color="secondary"
 									size="icon"
 									onClick={(): void => startVoiceInput('button')}
 									disabled={disabled}

frontend/src/container/AlertHistory/Statistics/TopContributorsCard/TopContributorsCard.tsx

@@ -1,6 +1,7 @@
 import { useMemo, useState } from 'react';
 import { useLocation } from 'react-router-dom';
 import { Color } from '@signozhq/design-tokens';
+import { Button } from 'antd';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import history from 'lib/history';
 import { ArrowRight } from '@signozhq/icons';
@@ -10,7 +11,6 @@ import { TopContributorsCardProps } from './types';
 import ViewAllDrawer from './ViewAllDrawer';
 
 import './TopContributorsCard.styles.scss';
-import { Button } from '@signozhq/ui/button';
 
 function TopContributorsCard({
 	topContributorsData,
@@ -52,12 +52,7 @@ function TopContributorsCard({
 				<div className="top-contributors-card__header">
 					<div className="title">top contributors</div>
 					{topContributorsData.length > 3 && (
-						<Button
-							className="view-all"
-							onClick={toggleViewAllDrawer}
-							variant="ghost"
-							color="secondary"
-						>
+						<Button type="text" className="view-all" onClick={toggleViewAllDrawer}>
 							<div className="label">View all</div>
 							<div className="icon">
 								<ArrowRight

frontend/src/container/AllAlertChannels/AlertChannels.tsx

@@ -1,6 +1,7 @@
 import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { generatePath } from 'react-router-dom';
+import { Button } from 'antd';
 import type { ColumnsType } from 'antd/lib/table';
 import { ResizeTable } from 'components/ResizeTable';
 import ROUTES from 'constants/routes';
@@ -11,7 +12,6 @@ import { useAppContext } from 'providers/App/App';
 import { Channels } from 'types/api/channels/getAll';
 
 import Delete from './Delete';
-import { Button } from '@signozhq/ui/button';
 
 function AlertChannels({ allChannels }: AlertChannelsProps): JSX.Element {
 	const { t } = useTranslation(['channels']);
@@ -51,7 +51,7 @@ function AlertChannels({ allChannels }: AlertChannelsProps): JSX.Element {
 			width: 80,
 			render: (id: string): JSX.Element => (
 				<>
-					<Button onClick={(): void => onClickEditHandler(id)} variant="link">
+					<Button onClick={(): void => onClickEditHandler(id)} type="link">
 						{t('column_channel_edit')}
 					</Button>
 					<Delete id={id} notifications={notifications} />

frontend/src/container/AllAlertChannels/Delete.tsx

@@ -1,10 +1,10 @@
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useQueryClient } from 'react-query';
+import { Button } from 'antd';
 import type { NotificationInstance } from 'antd/es/notification/interface';
 import deleteChannel from 'api/channels/delete';
 import APIError from 'types/api/error';
-import { Button } from '@signozhq/ui/button';
 
 function Delete({ notifications, id }: DeleteProps): JSX.Element {
 	const { t } = useTranslation(['channels']);
@@ -38,8 +38,8 @@ function Delete({ notifications, id }: DeleteProps): JSX.Element {
 		<Button
 			loading={loading}
 			disabled={loading}
+			type="link"
 			onClick={onClickHandler}
-			variant="link"
 		>
 			Delete
 		</Button>

frontend/src/container/AllError/index.tsx

@@ -1,4 +1,3 @@
-import { Button } from '@signozhq/ui/button';
 import { Typography } from '@signozhq/ui/typography';
 import { useCallback, useEffect, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -6,7 +5,7 @@ import { useQueries } from 'react-query';
 // eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux';
 import { Link, useLocation } from 'react-router-dom';
-import { Card, Input, Space, TableProps, Tooltip, Flex } from 'antd';
+import { Button, Card, Input, Space, TableProps, Tooltip, Flex } from 'antd';
 import { Search } from '@signozhq/icons';
 import type { ColumnType, TablePaginationConfig } from 'antd/es/table';
 import type { FilterValue, SorterResult } from 'antd/es/table/interface';
@@ -267,8 +266,9 @@ function AllErrors(): JSX.Element {
 						onPressEnter={handleSearch(confirm, String(selectedKeys[0]), filterKey)}
 					/>
 					<Button
+						type="primary"
 						onClick={handleSearch(confirm, String(selectedKeys[0]), filterKey)}
-						size="sm"
+						size="small"
 					>
 						<Flex align="center" justify="center" gap={4}>
 							<Search size="md" />

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/DomainDetails.styles.scss

@@ -706,7 +706,7 @@
 	.views-tabs {
 		color: var(--l2-foreground);
 
-		button {
+		.ant-btn {
 			box-shadow: none;
 			position: relative;
 		}

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/DomainDetails.tsx

@@ -2,8 +2,7 @@ import { useCallback, useEffect, useMemo, useState } from 'react';
 // eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux';
 import { Spacing } from '@signozhq/design-tokens';
-import { Divider, Drawer, Radio } from 'antd';
-import { Button, ButtonGroup } from '@signozhq/ui/button';
+import { Button, Divider, Drawer, Radio } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import type { RadioChangeEvent } from 'antd/lib';
 import DateTimeSelectionV2 from 'container/TopNav/DateTimeSelectionV2';
@@ -177,7 +176,7 @@ function DomainDetails({
 							modalInitialStartTime={modalTimeRange.startTime * 1000}
 							modalInitialEndTime={modalTimeRange.endTime * 1000}
 						/>
-						<ButtonGroup className="domain-details-drawer-header-ctas">
+						<Button.Group className="domain-details-drawer-header-ctas">
 							<Button
 								className="domain-navigate-cta"
 								onClick={(): void => {
@@ -186,12 +185,9 @@ function DomainDetails({
 									setEndPointsGroupBy([]);
 									setSelectedView(VIEW_TYPES.ALL_ENDPOINTS);
 								}}
+								icon={<ArrowUp size={16} />}
 								disabled={selectedDomainIndex === 0}
 								title="Previous domain"
-								variant="outlined"
-								color="secondary"
-								size="icon"
-								prefix={<ArrowUp size={16} />}
 							/>
 							<Button
 								className="domain-navigate-cta"
@@ -201,14 +197,11 @@ function DomainDetails({
 									setEndPointsGroupBy([]);
 									setSelectedView(VIEW_TYPES.ALL_ENDPOINTS);
 								}}
+								icon={<ArrowDown size={16} />}
 								disabled={selectedDomainIndex === domainListLength - 1}
 								title="Next domain"
-								variant="outlined"
-								color="secondary"
-								size="icon"
-								prefix={<ArrowDown size={16} />}
 							/>
-						</ButtonGroup>
+						</Button.Group>
 					</div>
 				</div>
 			}

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/components/ErrorState.tsx

@@ -1,4 +1,4 @@
-import { Button } from '@signozhq/ui/button';
+import { Button } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import { RotateCw } from '@signozhq/icons';
 
@@ -22,9 +22,7 @@ function ErrorState({ refetch }: { refetch: () => void }): JSX.Element {
 				<Button
 					className="refresh-cta"
 					onClick={(): void => refetch()}
-					variant="outlined"
-					color="secondary"
-					prefix={<RotateCw size={16} />}
+					icon={<RotateCw size={16} />}
 				>
 					Refresh this panel
 				</Button>

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/components/StatusCodeBarCharts.tsx

@@ -1,8 +1,7 @@
 import { useCallback, useMemo, useRef, useState } from 'react';
 import { UseQueryResult } from 'react-query';
 import { Color } from '@signozhq/design-tokens';
-import { Card, Skeleton } from 'antd';
-import { Button, ButtonGroup } from '@signozhq/ui/button';
+import { Button, Card, Skeleton } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import cx from 'classnames';
 import { useNavigateToExplorer } from 'components/CeleryTask/useNavigateToExplorer';
@@ -248,25 +247,23 @@ function StatusCodeBarCharts({
 			<Card bordered className="endpoint-details-card">
 				<div className="header">
 					<Typography.Text>Call response status</Typography.Text>
-					<ButtonGroup>
+					<Button.Group className="views-tabs">
 						<Button
+							value={0}
 							className={currentWidgetInfoIndex === 0 ? 'selected_view tab' : 'tab'}
 							disabled={false}
 							onClick={(): void => setCurrentWidgetInfoIndex(0)}
-							variant="outlined"
-							color="secondary"
 						>
 							Number of calls
 						</Button>
 						<Button
+							value={1}
 							className={currentWidgetInfoIndex === 1 ? 'selected_view tab' : 'tab'}
 							onClick={(): void => setCurrentWidgetInfoIndex(1)}
-							variant="outlined"
-							color="secondary"
 						>
 							Latency
 						</Button>
-					</ButtonGroup>
+					</Button.Group>
 				</div>
 				<div className="graph-container" ref={graphRef}>
 					{renderCardContent(endPointStatusCodeBarChartsDataQuery)}

frontend/src/container/BillingContainer/BillingContainer.tsx

@@ -1,4 +1,3 @@
-import { Button } from '@signozhq/ui/button';
 import { Typography } from '@signozhq/ui/typography';
 import { useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -7,6 +6,7 @@ import { CircleCheck, CloudDownload } from '@signozhq/icons';
 import { Color } from '@signozhq/design-tokens';
 import {
 	Alert,
+	Button,
 	Card,
 	Col,
 	Flex,
@@ -445,11 +445,12 @@ export default function BillingContainer(): JSX.Element {
 					</Flex>
 					<Flex gap={8}>
 						<Button
+							type="default"
+							size="middle"
 							loading={isLoadingBilling || isLoadingManageBilling}
 							disabled={isLoading || isFetchingBillingData}
 							onClick={handleCsvDownload}
-							variant="outlined"
-							color="secondary"
+							className="periscope-btn"
 						>
 							<Flex align="center" justify="center" gap={4}>
 								<CloudDownload size="md" />
@@ -458,6 +459,8 @@ export default function BillingContainer(): JSX.Element {
 						</Button>
 						<Button
 							data-testid="header-billing-button"
+							type="primary"
+							size="middle"
 							loading={isLoadingBilling || isLoadingManageBilling}
 							disabled={isLoading}
 							onClick={handleBilling}
@@ -581,6 +584,8 @@ export default function BillingContainer(): JSX.Element {
 						<Col span={4} style={{ display: 'flex', justifyContent: 'flex-end' }}>
 							<Button
 								data-testid="upgrade-plan-button"
+								type="primary"
+								size="middle"
 								loading={isLoadingBilling || isLoadingManageBilling}
 								onClick={handleBilling}
 							>

frontend/src/container/Controls/index.tsx

@@ -1,12 +1,11 @@
 import { memo, useMemo } from 'react';
 import { ChevronLeft, ChevronRight } from '@signozhq/icons';
-import { Flex, Select } from 'antd';
+import { Button, Flex, Select } from 'antd';
 import { DEFAULT_PER_PAGE_OPTIONS, Pagination } from 'hooks/queryPagination';
 import { popupContainer } from 'utils/selectPopupContainer';
 
 import { defaultSelectStyle } from './config';
 import { Container } from './styles';
-import { Button } from '@signozhq/ui/button';
 
 function Controls({
 	offset = 0,
@@ -38,10 +37,10 @@ function Controls({
 		<Container>
 			<Button
 				loading={isLoading}
+				size="small"
+				type="link"
 				disabled={isPreviousDisabled}
 				onClick={handleNavigatePrevious}
-				size="sm"
-				variant="link"
 			>
 				<Flex align="center" gap="4px">
 					<ChevronLeft size={16} /> Previous
@@ -49,10 +48,10 @@ function Controls({
 			</Button>
 			<Button
 				loading={isLoading}
+				size="small"
+				type="link"
 				disabled={isNextDisabled}
 				onClick={handleNavigateNext}
-				size="sm"
-				variant="link"
 			>
 				<Flex align="center" gap="4px">
 					Next <ChevronRight size={16} />

frontend/src/container/CreateAlertRule/AlertRuleDocumentationRedirection.test.tsx

@@ -1,23 +1,12 @@
 import ROUTES from 'constants/routes';
 import * as usePrefillAlertConditions from 'container/FormAlertRules/usePrefillAlertConditions';
+import AlertTypeSelectionPage from 'pages/AlertTypeSelection';
 import CreateAlertPage from 'pages/CreateAlert';
 import { act, fireEvent, render } from 'tests/test-utils';
 import { AlertTypes } from 'types/api/alerts/alertTypes';
 
 import { ALERT_TYPE_TO_TITLE, ALERT_TYPE_URL_MAP } from './constants';
 
-jest.mock('react-router-dom-v5-compat', () => ({
-	...jest.requireActual('react-router-dom-v5-compat'),
-	useNavigationType: jest.fn(() => 'PUSH'),
-	useLocation: jest.fn(() => ({
-		pathname: '/alerts/new',
-		search: '',
-		hash: '',
-		state: null,
-	})),
-	useSearchParams: jest.fn(() => [new URLSearchParams(), jest.fn()]),
-}));
-
 jest
 	.spyOn(usePrefillAlertConditions, 'usePrefillAlertConditions')
 	.mockReturnValue({
@@ -65,13 +54,20 @@ describe('Alert rule documentation redirection', () => {
 		window.open = mockWindowOpen;
 	});
 
+	jest.mock('react-router-dom', () => ({
+		...jest.requireActual('react-router-dom'),
+		useLocation: (): { pathname: string } => ({
+			pathname: `${process.env.FRONTEND_API_ENDPOINT}${ROUTES.ALERT_TYPE_SELECTION}`,
+		}),
+	}));
+
 	beforeEach(() => {
 		act(() => {
 			renderResult = render(
-				<CreateAlertPage />,
+				<AlertTypeSelectionPage />,
 				{},
 				{
-					initialRoute: ROUTES.ALERTS_NEW,
+					initialRoute: ROUTES.ALERT_TYPE_SELECTION,
 				},
 			);
 		});

frontend/src/container/CreateAlertRule/AnomalyAlertDocumentationRedirection.test.tsx

@@ -15,18 +15,6 @@ jest.mock('react-router-dom', () => ({
 	}),
 }));
 
-jest.mock('react-router-dom-v5-compat', () => ({
-	...jest.requireActual('react-router-dom-v5-compat'),
-	useNavigationType: jest.fn(() => 'PUSH'),
-	useLocation: jest.fn(() => ({
-		pathname: '/alerts/new',
-		search: 'ruleType=anomaly_rule',
-		hash: '',
-		state: null,
-	})),
-	useSearchParams: jest.fn(() => [new URLSearchParams(), jest.fn()]),
-}));
-
 window.ResizeObserver =
 	window.ResizeObserver ||
 	jest.fn().mockImplementation(() => ({

frontend/src/container/CreateAlertRule/CreateAlertRule.styles.scss

@@ -1,75 +0,0 @@
-.create-alert-tabs {
-	&__extra {
-		display: flex;
-		align-items: center;
-		gap: 16px;
-	}
-}
-
-.create-alert-wrapper {
-	margin-top: 10px;
-
-	.divider {
-		border-color: var(--l1-border);
-		margin: 16px 0;
-	}
-
-	.breadcrumb-divider {
-		margin-top: 10px;
-	}
-}
-
-.create-alert__breadcrumb {
-	padding-left: 16px;
-
-	ol {
-		align-items: center;
-	}
-
-	.breadcrumb-item {
-		color: var(--l2-foreground);
-		font-size: 14px;
-		line-height: 20px;
-		letter-spacing: 0.25px;
-		padding: 0;
-	}
-
-	.ant-breadcrumb-separator,
-	.breadcrumb-item--last {
-		color: var(--muted-foreground);
-		font-family: 'Geist Mono';
-	}
-}
-
-.alerts-container {
-	.top-level-tab.periscope-tab {
-		padding: 2px 0;
-	}
-
-	.ant-tabs {
-		&-nav {
-			padding: 0 8px;
-			margin-bottom: 0 !important;
-
-			&::before {
-				border-bottom: 1px solid var(--l1-border) !important;
-			}
-		}
-
-		&-tab {
-			&[data-node-key='TriggeredAlerts'] {
-				margin-left: 16px;
-			}
-
-			&:not(:first-of-type) {
-				margin-left: 24px !important;
-			}
-
-			[aria-selected='false'] {
-				.periscope-tab {
-					color: var(--l2-foreground);
-				}
-			}
-		}
-	}
-}

frontend/src/container/CreateAlertRule/SelectAlertType/__tests__/SelectAlertType.test.tsx

@@ -1,111 +0,0 @@
-import { fireEvent, render, screen } from '@testing-library/react';
-import { FeatureKeys } from 'constants/features';
-import { getAppContextMockState } from 'container/RoutingPolicies/__tests__/testUtils';
-import * as appHooks from 'providers/App/App';
-import { AlertTypes } from 'types/api/alerts/alertTypes';
-
-import SelectAlertType from '..';
-
-const useAppContextSpy = jest.spyOn(appHooks, 'useAppContext');
-
-describe('SelectAlertType', () => {
-	const mockOnSelect = jest.fn();
-
-	beforeEach(() => {
-		jest.clearAllMocks();
-		useAppContextSpy.mockReturnValue(getAppContextMockState());
-	});
-
-	it('should render all alert type options when anomaly detection is enabled', () => {
-		useAppContextSpy.mockReturnValue({
-			...getAppContextMockState({}),
-			featureFlags: [
-				{
-					name: FeatureKeys.ANOMALY_DETECTION,
-					active: true,
-					usage: 0,
-					usage_limit: -1,
-					route: '',
-				},
-			],
-		});
-
-		render(<SelectAlertType onSelect={mockOnSelect} />);
-
-		expect(screen.getByText('metric_based_alert')).toBeInTheDocument();
-		expect(screen.getByText('log_based_alert')).toBeInTheDocument();
-		expect(screen.getByText('traces_based_alert')).toBeInTheDocument();
-		expect(screen.getByText('exceptions_based_alert')).toBeInTheDocument();
-		expect(screen.getByText('anomaly_based_alert')).toBeInTheDocument();
-	});
-
-	it('should render all alert type options except anomaly based alert when anomaly detection is disabled', () => {
-		render(<SelectAlertType onSelect={mockOnSelect} />);
-
-		expect(screen.getByText('metric_based_alert')).toBeInTheDocument();
-		expect(screen.getByText('log_based_alert')).toBeInTheDocument();
-		expect(screen.getByText('traces_based_alert')).toBeInTheDocument();
-		expect(screen.getByText('exceptions_based_alert')).toBeInTheDocument();
-		expect(screen.queryByText('anomaly_based_alert')).not.toBeInTheDocument();
-	});
-
-	it('should call onSelect with metrics based alert type', () => {
-		render(<SelectAlertType onSelect={mockOnSelect} />);
-		fireEvent.click(screen.getByText('metric_based_alert'));
-
-		expect(mockOnSelect).toHaveBeenCalledWith(
-			AlertTypes.METRICS_BASED_ALERT,
-			false,
-		);
-	});
-
-	it('should call onSelect with anomaly based alert type', () => {
-		useAppContextSpy.mockReturnValue({
-			...getAppContextMockState({}),
-			featureFlags: [
-				{
-					name: FeatureKeys.ANOMALY_DETECTION,
-					active: true,
-					usage: 0,
-					usage_limit: -1,
-					route: '',
-				},
-			],
-		});
-
-		render(<SelectAlertType onSelect={mockOnSelect} />);
-		fireEvent.click(screen.getByText('anomaly_based_alert'));
-
-		expect(mockOnSelect).toHaveBeenCalledWith(
-			AlertTypes.ANOMALY_BASED_ALERT,
-			false,
-		);
-	});
-
-	it('should call onSelect with log based alert type', () => {
-		render(<SelectAlertType onSelect={mockOnSelect} />);
-		fireEvent.click(screen.getByText('log_based_alert'));
-
-		expect(mockOnSelect).toHaveBeenCalledWith(AlertTypes.LOGS_BASED_ALERT, false);
-	});
-
-	it('should call onSelect with traces based alert type', () => {
-		render(<SelectAlertType onSelect={mockOnSelect} />);
-		fireEvent.click(screen.getByText('traces_based_alert'));
-
-		expect(mockOnSelect).toHaveBeenCalledWith(
-			AlertTypes.TRACES_BASED_ALERT,
-			false,
-		);
-	});
-
-	it('should call onSelect with exceptions based alert type', () => {
-		render(<SelectAlertType onSelect={mockOnSelect} />);
-		fireEvent.click(screen.getByText('exceptions_based_alert'));
-
-		expect(mockOnSelect).toHaveBeenCalledWith(
-			AlertTypes.EXCEPTIONS_BASED_ALERT,
-			false,
-		);
-	});
-});

frontend/src/container/CreateAlertRule/__tests__/CreateAlertRule.test.tsx

@@ -1,37 +1,13 @@
-import { fireEvent, screen } from '@testing-library/react';
-import { FeatureKeys } from 'constants/features';
+import { render, screen } from '@testing-library/react';
 import { QueryParams } from 'constants/query';
 import { initialQueriesMap } from 'constants/queryBuilder';
-import { getAppContextMockState } from 'container/RoutingPolicies/__tests__/testUtils';
 import * as useCompositeQueryParamHooks from 'hooks/queryBuilder/useGetCompositeQueryParam';
-import * as navigateHooks from 'hooks/useSafeNavigate';
 import * as useUrlQueryHooks from 'hooks/useUrlQuery';
-import * as appHooks from 'providers/App/App';
-import { render } from 'tests/test-utils';
 import { AlertTypes } from 'types/api/alerts/alertTypes';
 import { DataSource } from 'types/common/queryBuilder';
 
 import CreateAlertRule from '../index';
 
-jest.mock('react-router-dom-v5-compat', () => ({
-	...jest.requireActual('react-router-dom-v5-compat'),
-	useNavigationType: jest.fn(() => 'PUSH'),
-	useLocation: jest.fn(() => ({
-		pathname: '/alerts/new',
-		search: '',
-		hash: '',
-		state: null,
-	})),
-	useSearchParams: jest.fn(() => [new URLSearchParams(), jest.fn()]),
-}));
-
-jest.mock('container/TopNav/DateTimeSelectionV2', () => ({
-	__esModule: true,
-	default: function MockDateTimeSelector(): JSX.Element {
-		return <div data-testid="datetime-selector">Mock DateTime Selector</div>;
-	},
-}));
-
 jest.mock('container/FormAlertRules', () => ({
 	__esModule: true,
 	default: function MockFormAlertRules({
@@ -72,14 +48,10 @@ const useCompositeQueryParamSpy = jest.spyOn(
 	'useGetCompositeQueryParam',
 );
 const useUrlQuerySpy = jest.spyOn(useUrlQueryHooks, 'default');
-const useSafeNavigateSpy = jest.spyOn(navigateHooks, 'useSafeNavigate');
-const useAppContextSpy = jest.spyOn(appHooks, 'useAppContext');
 
 const mockSetUrlQuery = jest.fn();
 const mockToString = jest.fn();
 const mockGetUrlQuery = jest.fn();
-const mockSafeNavigate = jest.fn();
-const mockDeleteUrlQuery = jest.fn();
 
 const FORM_ALERT_RULES_TEXT = 'Form Alert Rules';
 const CREATE_ALERT_V2_TEXT = 'Create Alert V2';
@@ -91,13 +63,8 @@ describe('CreateAlertRule', () => {
 			set: mockSetUrlQuery,
 			toString: mockToString,
 			get: mockGetUrlQuery,
-			delete: mockDeleteUrlQuery,
 		} as Partial<URLSearchParams> as URLSearchParams);
 		useCompositeQueryParamSpy.mockReturnValue(initialQueriesMap.metrics);
-		useSafeNavigateSpy.mockReturnValue({
-			safeNavigate: mockSafeNavigate,
-		});
-		useAppContextSpy.mockReturnValue(getAppContextMockState());
 	});
 
 	it('should render classic flow when showClassicCreateAlertsPage is true', () => {
@@ -105,53 +72,18 @@ describe('CreateAlertRule', () => {
 			if (key === QueryParams.showClassicCreateAlertsPage) {
 				return 'true';
 			}
-			if (key === QueryParams.alertType) {
-				return AlertTypes.METRICS_BASED_ALERT;
-			}
 			return null;
 		});
 		render(<CreateAlertRule />);
 		expect(screen.getByText(FORM_ALERT_RULES_TEXT)).toBeInTheDocument();
 	});
 
-	it('should render new flow when alertType is provided', () => {
-		mockGetUrlQuery.mockImplementation((key: string) => {
-			if (key === QueryParams.alertType) {
-				return AlertTypes.METRICS_BASED_ALERT;
-			}
-			return null;
-		});
+	it('should render new flow by default', () => {
+		mockGetUrlQuery.mockReturnValue(null);
 		render(<CreateAlertRule />);
 		expect(screen.getByText(CREATE_ALERT_V2_TEXT)).toBeInTheDocument();
 	});
 
-	it('should render type selection when no alertType in URL and no compositeQuery', () => {
-		mockGetUrlQuery.mockReturnValue(null);
-		useCompositeQueryParamSpy.mockReturnValue(null);
-		render(<CreateAlertRule />);
-		expect(screen.queryByText(FORM_ALERT_RULES_TEXT)).not.toBeInTheDocument();
-		expect(screen.queryByText(CREATE_ALERT_V2_TEXT)).not.toBeInTheDocument();
-	});
-
-	it('should skip type selection and render alert form when compositeQuery is present', () => {
-		mockGetUrlQuery.mockReturnValue(null);
-		useCompositeQueryParamSpy.mockReturnValue({
-			...initialQueriesMap.metrics,
-			builder: {
-				...initialQueriesMap.metrics.builder,
-				queryData: [
-					{
-						...initialQueriesMap.metrics.builder.queryData[0],
-						dataSource: DataSource.METRICS,
-					},
-				],
-			},
-		});
-		render(<CreateAlertRule />);
-		expect(screen.getByText(CREATE_ALERT_V2_TEXT)).toBeInTheDocument();
-		expect(screen.getByText(AlertTypes.METRICS_BASED_ALERT)).toBeInTheDocument();
-	});
-
 	it('should render classic flow when ruleType is anomaly_rule even if showClassicCreateAlertsPage is not true', () => {
 		mockGetUrlQuery.mockImplementation((key: string) => {
 			if (key === QueryParams.showClassicCreateAlertsPage) {
@@ -179,13 +111,8 @@ describe('CreateAlertRule', () => {
 		expect(screen.getByText(AlertTypes.LOGS_BASED_ALERT)).toBeInTheDocument();
 	});
 
-	it('should use alertType from URL over compositeQuery dataSource', () => {
-		mockGetUrlQuery.mockImplementation((key: string) => {
-			if (key === QueryParams.alertType) {
-				return AlertTypes.LOGS_BASED_ALERT;
-			}
-			return null;
-		});
+	it('should use alertType from compositeQuery dataSource when alertType is not in URL', () => {
+		mockGetUrlQuery.mockReturnValue(null);
 		useCompositeQueryParamSpy.mockReturnValue({
 			...initialQueriesMap.metrics,
 			builder: {
@@ -200,123 +127,14 @@ describe('CreateAlertRule', () => {
 		});
 		render(<CreateAlertRule />);
 		expect(screen.getByText(CREATE_ALERT_V2_TEXT)).toBeInTheDocument();
-		expect(screen.getByText(AlertTypes.LOGS_BASED_ALERT)).toBeInTheDocument();
+		expect(screen.getByText(AlertTypes.TRACES_BASED_ALERT)).toBeInTheDocument();
 	});
 
-	describe('handleSelectType navigation', () => {
-		beforeEach(() => {
-			mockGetUrlQuery.mockReturnValue(null);
-			useCompositeQueryParamSpy.mockReturnValue(null);
-		});
-
-		it('should navigate with threshold alert params for metrics alert', () => {
-			render(<CreateAlertRule />);
-			fireEvent.click(screen.getByText('metric_based_alert'));
-
-			expect(mockSetUrlQuery).toHaveBeenCalledWith(
-				QueryParams.ruleType,
-				'threshold_rule',
-			);
-			expect(mockSetUrlQuery).toHaveBeenCalledWith(
-				QueryParams.alertType,
-				AlertTypes.METRICS_BASED_ALERT,
-			);
-			expect(mockSafeNavigate).toHaveBeenCalled();
-		});
-
-		it('should navigate with threshold alert params for logs alert', () => {
-			render(<CreateAlertRule />);
-			fireEvent.click(screen.getByText('log_based_alert'));
-
-			expect(mockSetUrlQuery).toHaveBeenCalledWith(
-				QueryParams.ruleType,
-				'threshold_rule',
-			);
-			expect(mockSetUrlQuery).toHaveBeenCalledWith(
-				QueryParams.alertType,
-				AlertTypes.LOGS_BASED_ALERT,
-			);
-			expect(mockSafeNavigate).toHaveBeenCalled();
-		});
-
-		it('should navigate with threshold alert params for traces alert', () => {
-			render(<CreateAlertRule />);
-			fireEvent.click(screen.getByText('traces_based_alert'));
-
-			expect(mockSetUrlQuery).toHaveBeenCalledWith(
-				QueryParams.ruleType,
-				'threshold_rule',
-			);
-			expect(mockSetUrlQuery).toHaveBeenCalledWith(
-				QueryParams.alertType,
-				AlertTypes.TRACES_BASED_ALERT,
-			);
-			expect(mockSafeNavigate).toHaveBeenCalled();
-		});
-
-		it('should navigate with threshold alert params for exceptions alert', () => {
-			render(<CreateAlertRule />);
-			fireEvent.click(screen.getByText('exceptions_based_alert'));
-
-			expect(mockSetUrlQuery).toHaveBeenCalledWith(
-				QueryParams.ruleType,
-				'threshold_rule',
-			);
-			expect(mockSetUrlQuery).toHaveBeenCalledWith(
-				QueryParams.alertType,
-				AlertTypes.EXCEPTIONS_BASED_ALERT,
-			);
-			expect(mockSafeNavigate).toHaveBeenCalled();
-		});
-
-		it('should navigate with anomaly detection params for anomaly alert', () => {
-			useAppContextSpy.mockReturnValue({
-				...getAppContextMockState({}),
-				featureFlags: [
-					{
-						name: FeatureKeys.ANOMALY_DETECTION,
-						active: true,
-						usage: 0,
-						usage_limit: -1,
-						route: '',
-					},
-				],
-			});
-
-			render(<CreateAlertRule />);
-			fireEvent.click(screen.getByText('anomaly_based_alert'));
-
-			expect(mockSetUrlQuery).toHaveBeenCalledWith(
-				QueryParams.ruleType,
-				'anomaly_rule',
-			);
-			expect(mockSetUrlQuery).toHaveBeenCalledWith(
-				QueryParams.alertType,
-				AlertTypes.METRICS_BASED_ALERT,
-			);
-			expect(mockSafeNavigate).toHaveBeenCalled();
-		});
-
-		it('should navigate even when showClassicCreateAlertsPage flag is present', () => {
-			mockGetUrlQuery.mockImplementation((key: string) => {
-				if (key === QueryParams.showClassicCreateAlertsPage) {
-					return 'true';
-				}
-				return null;
-			});
-
-			render(<CreateAlertRule />);
-			fireEvent.click(screen.getByText('metric_based_alert'));
-
-			expect(mockSetUrlQuery).toHaveBeenCalledWith(
-				QueryParams.ruleType,
-				'threshold_rule',
-			);
-			expect(mockSetUrlQuery).toHaveBeenCalledWith(
-				QueryParams.alertType,
-				AlertTypes.METRICS_BASED_ALERT,
-			);
-			expect(mockSafeNavigate).toHaveBeenCalled();
-		});
+	it('should default to METRICS_BASED_ALERT when no alertType and no compositeQuery', () => {
+		mockGetUrlQuery.mockReturnValue(null);
+		useCompositeQueryParamSpy.mockReturnValue(null);
+		render(<CreateAlertRule />);
+		expect(screen.getByText(CREATE_ALERT_V2_TEXT)).toBeInTheDocument();
+		expect(screen.getByText(AlertTypes.METRICS_BASED_ALERT)).toBeInTheDocument();
 	});
 });

frontend/src/container/CreateAlertRule/defaults.ts

@@ -208,11 +208,3 @@ export const ALERTS_VALUES_MAP: Record<AlertTypes, AlertDef> = {
 	[AlertTypes.TRACES_BASED_ALERT]: traceAlertDefaults,
 	[AlertTypes.EXCEPTIONS_BASED_ALERT]: exceptionAlertDefaults,
 };
-
-export const ALERT_TYPE_BREADCRUMB_TITLE: Record<AlertTypes, string> = {
-	[AlertTypes.ANOMALY_BASED_ALERT]: 'Anomaly-Based Alert',
-	[AlertTypes.METRICS_BASED_ALERT]: 'Metric-Based Alert',
-	[AlertTypes.LOGS_BASED_ALERT]: 'Log-Based Alert',
-	[AlertTypes.TRACES_BASED_ALERT]: 'Traces-Based Alert',
-	[AlertTypes.EXCEPTIONS_BASED_ALERT]: 'Exceptions-Based Alert',
-};

frontend/src/container/CreateAlertRule/index.tsx

@@ -1,34 +1,21 @@
-import { useCallback, useEffect, useMemo } from 'react';
-import { Form, Tabs, TabsProps } from 'antd';
-import logEvent from 'api/common/logEvent';
-import ConfigureIcon from 'assets/AlertHistory/ConfigureIcon';
-import AlertBreadcrumb from 'components/AlertBreadcrumb';
-import HeaderRightSection from 'components/HeaderRightSection/HeaderRightSection';
+import { useMemo } from 'react';
+import { Form } from 'antd';
 import { ENTITY_VERSION_V5 } from 'constants/app';
 import { QueryParams } from 'constants/query';
-import ROUTES from 'constants/routes';
 import CreateAlertV2 from 'container/CreateAlertV2';
 import FormAlertRules, { AlertDetectionTypes } from 'container/FormAlertRules';
-import DateTimeSelector from 'container/TopNav/DateTimeSelectionV2';
 import { useGetCompositeQueryParam } from 'hooks/queryBuilder/useGetCompositeQueryParam';
-import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import useUrlQuery from 'hooks/useUrlQuery';
-import { AlertListTabs } from 'pages/AlertList/types';
-import { GalleryVerticalEnd, Pyramid } from '@signozhq/icons';
 import { AlertTypes } from 'types/api/alerts/alertTypes';
 import { AlertDef } from 'types/api/alerts/def';
 
 import { ALERT_TYPE_VS_SOURCE_MAPPING } from './config';
-import { ALERTS_VALUES_MAP, ALERT_TYPE_BREADCRUMB_TITLE } from './defaults';
-import SelectAlertType from './SelectAlertType';
-
-import './CreateAlertRule.styles.scss';
+import { ALERTS_VALUES_MAP } from './defaults';
 
 function CreateRules(): JSX.Element {
 	const [formInstance] = Form.useForm();
 	const compositeQuery = useGetCompositeQueryParam();
 	const queryParams = useUrlQuery();
-	const { safeNavigate } = useSafeNavigate();
 
 	const ruleTypeFromURL = queryParams.get(QueryParams.ruleType);
 	const alertTypeFromURL = queryParams.get(QueryParams.alertType);
@@ -36,15 +23,6 @@ function CreateRules(): JSX.Element {
 	const showClassicCreateAlertsPageFlag =
 		queryParams.get(QueryParams.showClassicCreateAlertsPage) === 'true';
 
-	const isTypeSelectionMode =
-		!alertTypeFromURL && !ruleTypeFromURL && !compositeQuery;
-
-	useEffect(() => {
-		if (isTypeSelectionMode) {
-			logEvent('Alert: New alert data source selection page visited', {});
-		}
-	}, [isTypeSelectionMode]);
-
 	const alertType = useMemo(() => {
 		if (ruleTypeFromURL === AlertDetectionTypes.ANOMALY_DETECTION_ALERT) {
 			return AlertTypes.ANOMALY_BASED_ALERT;
@@ -67,142 +45,22 @@ function CreateRules(): JSX.Element {
 		[alertType, version],
 	);
 
-	const handleTabChange = useCallback(
-		(tab: string): void => {
-			queryParams.set('tab', tab);
-			queryParams.delete('subTab');
-			queryParams.delete('search');
-			safeNavigate(`${ROUTES.LIST_ALL_ALERT}?${queryParams.toString()}`);
-		},
-		[safeNavigate, queryParams],
-	);
+	// Load old alerts flow always for anomaly based alerts and when showClassicCreateAlertsPage is true
+	if (
+		showClassicCreateAlertsPageFlag ||
+		alertType === AlertTypes.ANOMALY_BASED_ALERT
+	) {
+		return (
+			<FormAlertRules
+				alertType={alertType}
+				formInstance={formInstance}
+				initialValue={initialAlertValue}
+				ruleId=""
+			/>
+		);
+	}
 
-	const handleSelectType = useCallback(
-		(type: AlertTypes, newTab?: boolean): void => {
-			if (type === AlertTypes.ANOMALY_BASED_ALERT) {
-				queryParams.set(
-					QueryParams.ruleType,
-					AlertDetectionTypes.ANOMALY_DETECTION_ALERT,
-				);
-				queryParams.set(QueryParams.alertType, AlertTypes.METRICS_BASED_ALERT);
-			} else {
-				queryParams.set(QueryParams.ruleType, AlertDetectionTypes.THRESHOLD_ALERT);
-				queryParams.set(QueryParams.alertType, type);
-			}
-
-			safeNavigate(`${ROUTES.ALERTS_NEW}?${queryParams.toString()}`, { newTab });
-		},
-		[queryParams, safeNavigate],
-	);
-
-	const alertContent = useMemo(() => {
-		if (isTypeSelectionMode) {
-			return <SelectAlertType onSelect={handleSelectType} />;
-		}
-
-		if (
-			showClassicCreateAlertsPageFlag ||
-			alertType === AlertTypes.ANOMALY_BASED_ALERT
-		) {
-			return (
-				<FormAlertRules
-					alertType={alertType}
-					formInstance={formInstance}
-					initialValue={initialAlertValue}
-					ruleId=""
-				/>
-			);
-		}
-		return <CreateAlertV2 alertType={alertType} />;
-	}, [
-		isTypeSelectionMode,
-		handleSelectType,
-		showClassicCreateAlertsPageFlag,
-		alertType,
-		formInstance,
-		initialAlertValue,
-	]);
-
-	const items: TabsProps['items'] = [
-		{
-			label: (
-				<div className="periscope-tab top-level-tab">
-					<GalleryVerticalEnd size={14} />
-					Triggered Alerts
-				</div>
-			),
-			key: AlertListTabs.TRIGGERED_ALERTS,
-			children: null,
-		},
-		{
-			label: (
-				<div className="periscope-tab top-level-tab">
-					<Pyramid size={14} />
-					Alert Rules
-				</div>
-			),
-			key: AlertListTabs.ALERT_RULES,
-			children: (
-				<div className="create-alert-wrapper">
-					<AlertBreadcrumb
-						className="create-alert__breadcrumb"
-						items={
-							isTypeSelectionMode
-								? [
-										{
-											title: 'Alert Rules',
-											route: `${ROUTES.LIST_ALL_ALERT}?tab=${AlertListTabs.ALERT_RULES}`,
-										},
-										{ title: 'Select Alert Type', isLast: true },
-									]
-								: [
-										{
-											title: 'Alert Rules',
-											route: `${ROUTES.LIST_ALL_ALERT}?tab=${AlertListTabs.ALERT_RULES}`,
-										},
-										{ title: 'Select Alert Type', route: ROUTES.ALERTS_NEW },
-										{
-											title: ALERT_TYPE_BREADCRUMB_TITLE[alertType],
-											isLast: true,
-										},
-									]
-						}
-					/>
-					{alertContent}
-				</div>
-			),
-		},
-		{
-			label: (
-				<div className="periscope-tab top-level-tab">
-					<ConfigureIcon width={14} height={14} />
-					Configuration
-				</div>
-			),
-			key: AlertListTabs.CONFIGURATION,
-			children: null,
-		},
-	];
-
-	return (
-		<Tabs
-			destroyInactiveTabPane
-			items={items}
-			activeKey={AlertListTabs.ALERT_RULES}
-			onChange={handleTabChange}
-			className="alerts-container create-alert-tabs"
-			tabBarExtraContent={
-				<div className="create-alert-tabs__extra">
-					<DateTimeSelector showAutoRefresh />
-					<HeaderRightSection
-						enableAnnouncements={false}
-						enableShare
-						enableFeedback
-					/>
-				</div>
-			}
-		/>
-	);
+	return <CreateAlertV2 alertType={alertType} />;
 }
 
 export default CreateRules;

frontend/src/container/CreateAlertV2/AlertCondition/AlertCondition.tsx

@@ -1,5 +1,5 @@
 import { useQuery } from 'react-query';
-import { Tooltip } from 'antd';
+import { Button, Tooltip } from 'antd';
 import getAllChannels from 'api/channels/getAll';
 import classNames from 'classnames';
 import { ChartLine } from '@signozhq/icons';
@@ -16,7 +16,6 @@ import AnomalyThreshold from './AnomalyThreshold';
 import { ANOMALY_TAB_TOOLTIP, THRESHOLD_TAB_TOOLTIP } from './constants';
 
 import './styles.scss';
-import { Button } from '@signozhq/ui/button';
 
 function AlertCondition(): JSX.Element {
 	const { alertType, setAlertType } = useCreateAlertState();
@@ -83,8 +82,6 @@ function AlertCondition(): JSX.Element {
 										handleAlertTypeChange(tab.value as AlertTypes);
 									}
 								}}
-								variant="outlined"
-								color="secondary"
 							>
 								{tab.icon}
 								{tab.label}

frontend/src/container/CreateAlertV2/AlertCondition/AlertThreshold.tsx

@@ -1,6 +1,5 @@
 import { useEffect } from 'react';
-import { Select, Tooltip } from 'antd';
-import { Button } from '@signozhq/ui/button';
+import { Button, Select, Tooltip } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import classNames from 'classnames';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
@@ -295,11 +294,11 @@ function AlertThreshold({
 					/>
 				))}
 				<Button
+					type="dashed"
+					icon={<Plus size={16} />}
 					onClick={addThreshold}
 					className="add-threshold-btn"
 					data-testid="add-threshold-button"
-					variant="dashed"
-					prefix={<Plus size={16} />}
 				>
 					Add Threshold
 				</Button>

frontend/src/container/CreateAlertV2/AlertCondition/ThresholdItem.tsx

@@ -1,6 +1,5 @@
 import { useMemo, useState } from 'react';
-import { Input, Select, Tooltip } from 'antd';
-import { Button, ButtonGroup } from '@signozhq/ui/button';
+import { Button, Input, Select, Tooltip } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import { CircleX, Trash } from '@signozhq/icons';
 import { useAppContext } from 'providers/App/App';
@@ -167,18 +166,16 @@ function ThresholdItem({
 							/>
 							<Tooltip title="Remove recovery threshold">
 								<Button
+									type="default"
+									icon={<Trash size={16} />}
 									onClick={removeRecoveryThreshold}
 									className="icon-btn"
 									data-testid="remove-recovery-threshold-button"
-									variant="outlined"
-									color="secondary"
-									size="icon"
-									prefix={<Trash size={16} />}
 								/>
 							</Tooltip>
 						</>
 					)}
-					<ButtonGroup>
+					<Button.Group>
 						{/* TODO: Add recovery threshold back once the functionality is implemented */}
 						{/* {!showRecoveryThreshold && (
 							<Tooltip title="Add recovery threshold">
@@ -193,17 +190,15 @@ function ThresholdItem({
 						{showRemoveButton && (
 							<Tooltip title="Remove threshold">
 								<Button
+									type="default"
+									icon={<CircleX size={16} />}
 									onClick={(): void => removeThreshold(threshold.id)}
 									className="icon-btn"
 									data-testid="remove-threshold-button"
-									variant="outlined"
-									color="secondary"
-									size="icon"
-									prefix={<CircleX size={16} />}
 								/>
 							</Tooltip>
 						)}
-					</ButtonGroup>
+					</Button.Group>
 				</div>
 			</div>
 		</div>

frontend/src/container/CreateAlertV2/AlertCondition/styles.scss

@@ -333,7 +333,7 @@
 }
 
 .condensed-evaluation-settings-container {
-	button {
+	.ant-btn {
 		display: flex;
 		align-items: center;
 		min-width: 240px;

frontend/src/container/CreateAlertV2/AlertCondition/utils.tsx

@@ -1,5 +1,4 @@
-import { Flex, SelectProps, Switch } from 'antd';
-import { Button } from '@signozhq/ui/button';
+import { Button, Flex, SelectProps, Switch } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import type { BaseOptionType, DefaultOptionType } from 'antd/es/select';
 import { getInvolvedQueriesInTraceOperator } from 'components/QueryBuilderV2/QueryV2/TraceOperator/utils/utils';
@@ -389,10 +388,10 @@ export function NotificationChannelsNotFoundContent({
 						Create one
 						<Button
 							style={{ padding: '0 4px' }}
+							type="link"
 							onClick={(): void => {
 								openInNewTab(ROUTES.CHANNELS_NEW);
 							}}
-							variant="link"
 						>
 							here.
 						</Button>
@@ -401,7 +400,7 @@ export function NotificationChannelsNotFoundContent({
 					<Typography.Text>Please ask your admin to create one.</Typography.Text>
 				)}
 			</Flex>
-			<Button onClick={refreshChannels} variant="ghost" color="secondary">
+			<Button type="text" onClick={refreshChannels}>
 				Refresh
 			</Button>
 		</Flex>
@@ -430,10 +429,10 @@ export function RoutingPolicyBanner({
 					}}
 				/>
 				<Button
+					type="link"
 					className="view-routing-policies-button"
 					data-testid="view-routing-policies-button"
 					onClick={(): void => safeNavigate(ROUTING_POLICIES_ROUTE)}
-					variant="link"
 				>
 					View Routing Policies
 					<ArrowRight size={14} />

frontend/src/container/CreateAlertV2/CreateAlertHeader/CreateAlertHeader.tsx

@@ -9,7 +9,6 @@ import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import useUrlQuery from 'hooks/useUrlQuery';
 import { RotateCcw } from '@signozhq/icons';
-import { useAlertRuleOptional } from 'providers/Alert';
 import { Labels } from 'types/api/alerts/def';
 
 import { useCreateAlertState } from '../context';
@@ -19,7 +18,6 @@ import './styles.scss';
 
 function CreateAlertHeader(): JSX.Element {
 	const { alertState, setAlertState, isEditMode } = useCreateAlertState();
-	const alertRuleContext = useAlertRuleOptional();
 
 	const { currentQuery } = useQueryBuilder();
 	const { safeNavigate } = useSafeNavigate();
@@ -76,13 +74,9 @@ function CreateAlertHeader(): JSX.Element {
 				<Input
 					type="text"
 					value={alertState.name}
-					onChange={(e): void => {
-						const newName = e.target.value;
-						setAlertState({ type: 'SET_ALERT_NAME', payload: newName });
-						if (isEditMode && alertRuleContext?.setAlertRuleName) {
-							alertRuleContext.setAlertRuleName(newName);
-						}
-					}}
+					onChange={(e): void =>
+						setAlertState({ type: 'SET_ALERT_NAME', payload: e.target.value })
+					}
 					className="alert-header__input title"
 					placeholder="Enter alert rule name"
 					data-testid="alert-name-input"