fix(create-alert-v2): tooltip not showing due to pointer-events none

docs/api/openapi.yml

@@ -309,6 +309,10 @@ components:
       properties:
         duration:
           type: string
+        endTime:
+          format: date-time
+          nullable: true
+          type: string
         repeatOn:
           items:
             $ref: '#/components/schemas/AlertmanagertypesRepeatOn'
@@ -316,7 +320,11 @@ components:
           type: array
         repeatType:
           $ref: '#/components/schemas/AlertmanagertypesRepeatType'
+        startTime:
+          format: date-time
+          type: string
       required:
+      - startTime
       - duration
       - repeatType
       type: object
@@ -350,7 +358,6 @@ components:
           type: string
       required:
       - timezone
-      - startTime
       type: object
     AuthtypesAttributeMapping:
       properties:

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

@@ -162,11 +162,21 @@ export interface AlertmanagertypesRecurrenceDTO {
 	 * @type string
 	 */
 	duration: string;
+	/**
+	 * @type string,null
+	 * @format date-time
+	 */
+	endTime?: string | null;
 	/**
 	 * @type array,null
 	 */
 	repeatOn?: AlertmanagertypesRepeatOnDTO[] | null;
 	repeatType: AlertmanagertypesRepeatTypeDTO;
+	/**
+	 * @type string
+	 * @format date-time
+	 */
+	startTime: string;
 }
 
 export interface AlertmanagertypesScheduleDTO {
@@ -180,7 +190,7 @@ export interface AlertmanagertypesScheduleDTO {
 	 * @type string
 	 * @format date-time
 	 */
-	startTime: string;
+	startTime?: string;
 	/**
 	 * @type string
 	 */

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

@@ -11,6 +11,7 @@
 }
 
 .divider {
-	--divider-color: var(--l1-border);
-	--divider-margin: 10px 0 16px 0;
+	border-color: var(--l1-border);
+	margin: 16px 0;
+	margin-top: 10px;
 }

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

@@ -41,22 +41,14 @@ $item-spacing: 8px;
 		width: 100%;
 		background: transparent;
 		border: none;
-		border-radius: 0;
-		box-shadow: none;
 		outline: none;
-		height: auto;
 		color: var(--l1-foreground);
 		font-size: 14px;
 		line-height: 20px;
 		letter-spacing: -0.07px;
 		padding: 0;
-
-		&:focus,
-		&:focus-visible,
-		&:hover {
-			border: none;
+		&.ant-input:focus {
 			box-shadow: none;
-			outline: none;
 		}
 
 		&::placeholder {

frontend/src/components/CustomTimePicker/TimezonePicker.tsx

@@ -6,7 +6,7 @@ import {
 	useState,
 } from 'react';
 import { Color } from '@signozhq/design-tokens';
-import { Input } from '@signozhq/ui/input';
+import { Input } from 'antd';
 import logEvent from 'api/common/logEvent';
 import cx from 'classnames';
 import { TimezonePickerShortcuts } from 'constants/shortcuts/TimezonePickerShortcuts';

frontend/src/components/ExplorerCard/SaveViewWithName.tsx

@@ -1,6 +1,5 @@
 import { useTranslation } from 'react-i18next';
-import { Input } from '@signozhq/ui/input';
-import { Card, Form } from 'antd';
+import { Card, Form, Input } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';

frontend/src/components/InputWithLabel/InputWithLabel.tsx

@@ -1,6 +1,5 @@
 import { useState } from 'react';
-import { Input } from '@signozhq/ui/input';
-import { Button } from 'antd';
+import { Button, Input } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import cx from 'classnames';
 import { X } from '@signozhq/icons';

frontend/src/components/LogsFormatOptionsMenu/LogsFormatOptionsMenu.tsx

@@ -1,6 +1,5 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
-import { Input } from '@signozhq/ui/input';
-import { Button, InputNumber, Popover, Tooltip } from 'antd';
+import { Button, Input, InputNumber, Popover, Tooltip } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import type { DefaultOptionType } from 'antd/es/select';
 import cx from 'classnames';

frontend/src/components/QueryBuilderV2/QueryV2/QueryAddOns/QueryAddOns.styles.scss

@@ -266,14 +266,6 @@
 			border-left: transparent;
 			border-top-left-radius: 0px;
 			border-bottom-left-radius: 0px;
-
-			&:focus:not(:focus-visible),
-			&.ant-btn:focus:not(:focus-visible) {
-				border-color: var(--l2-border);
-				border-left-color: transparent;
-				outline: none;
-				box-shadow: none;
-			}
 		}
 	}
 }
@@ -299,21 +291,5 @@
 		.cm-placeholder {
 			font-size: 12px !important;
 		}
-
-		$add-on-row-height: 38px;
-
-		.periscope-input-with-label {
-			.input {
-				.ant-select {
-					height: $add-on-row-height;
-				}
-			}
-		}
-
-		.input-with-label {
-			.input {
-				height: $add-on-row-height;
-			}
-		}
 	}
 }

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

@@ -11,7 +11,7 @@ import cx from 'classnames';
 import { ENTITY_VERSION_V4, ENTITY_VERSION_V5 } from 'constants/app';
 import { PANEL_TYPES } from 'constants/queryBuilder';
 import QBEntityOptions from 'container/QueryBuilder/components/QBEntityOptions/QBEntityOptions';
-import { QueryProps } from 'container/QueryBuilder/type';
+import { QueryProps } from 'container/QueryBuilder/components/Query/Query.interfaces';
 import SpanScopeSelector from 'container/QueryBuilder/filters/QueryBuilderSearchV2/SpanScopeSelector';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useQueryOperations } from 'hooks/queryBuilder/useQueryBuilderOperations';

frontend/src/components/QuickFilters/FilterRenderers/Checkbox/Checkbox.styles.scss

@@ -4,23 +4,6 @@
 	padding: 12px;
 	gap: 12px;
 	border-bottom: 1px solid var(--l1-border);
-
-	.search {
-		input {
-			--input-background: var(--l2-background);
-			--input-hover-background: var(--l2-background);
-			--input-focus-background: var(--l2-background);
-			&::placeholder {
-				color: var(--l3-foreground);
-			}
-			--input-font-size: 14px;
-			--input-border-color: var(--l1-border);
-			--input-focus-border-color: var(--primary-background);
-			--input-focus-outline-width: 0;
-			--input-focus-outline-offset: 0;
-		}
-	}
-
 	.filter-header-checkbox {
 		display: flex;
 		align-items: center;

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 { Input } from '@signozhq/ui/input';
-import { Button, Skeleton } from 'antd';
+import { Button, Input, Skeleton } from 'antd';
 import { Checkbox } from '@signozhq/ui/checkbox';
 import { Typography } from '@signozhq/ui/typography';
 import cx from 'classnames';

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

@@ -1,6 +1,5 @@
 import { useMemo } from 'react';
-import { Input } from '@signozhq/ui/input';
-import { Button } from 'antd';
+import { Button, Input } from 'antd';
 import { Check, TableColumnsSplit, X } from '@signozhq/icons';
 import { Filter as FilterType } from 'types/api/quickFilters/getCustomFilters';
 

frontend/src/components/RouteTab/RouteTab.styles.scss

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

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

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

frontend/src/components/RouteTab/index.tsx

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

frontend/src/components/RouteTab/types.ts

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

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

@@ -1,6 +1,5 @@
 import { useMemo, useState } from 'react';
-import { Input } from '@signozhq/ui/input';
-import { Button, Select, Tooltip } from 'antd';
+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';

frontend/src/container/CreateAlertV2/EvaluationSettings/AdvancedOptions.tsx

@@ -1,5 +1,4 @@
-import { Input } from '@signozhq/ui/input';
-import { Collapse } from 'antd';
+import { Collapse, Input } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 
 import { useCreateAlertState } from '../context';

frontend/src/container/CreateAlertV2/EvaluationSettings/EvaluationWindowPopover/EvaluationWindowDetails.tsx

@@ -1,6 +1,5 @@
 import { useMemo } from 'react';
-import { Input } from '@signozhq/ui/input';
-import { Select } from 'antd';
+import { Input, Select } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 
 import { ADVANCED_OPTIONS_TIME_UNIT_OPTIONS } from '../../context/constants';

frontend/src/container/CreateAlertV2/EvaluationSettings/TimeInput/TimeInput.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, useState } from 'react';
-import { Input } from '@signozhq/ui/input';
+import { Input } from 'antd';
+
 import './TimeInput.scss';
 
 export interface TimeInputProps {

frontend/src/container/CreateAlertV2/Footer/Footer.tsx

@@ -196,7 +196,11 @@ function Footer(): JSX.Element {
 			</Button>
 		);
 		if (alertValidationMessage) {
-			button = <Tooltip title={alertValidationMessage}>{button}</Tooltip>;
+			button = (
+				<Tooltip title={alertValidationMessage}>
+					<span>{button}</span>
+				</Tooltip>
+			);
 		}
 		return button;
 	}, [
@@ -224,7 +228,11 @@ function Footer(): JSX.Element {
 			</Button>
 		);
 		if (alertValidationMessage) {
-			button = <Tooltip title={alertValidationMessage}>{button}</Tooltip>;
+			button = (
+				<Tooltip title={alertValidationMessage}>
+					<span>{button}</span>
+				</Tooltip>
+			);
 		}
 		return button;
 	}, [

frontend/src/container/CreateAlertV2/NotificationSettings/NotificationSettings.tsx

@@ -1,5 +1,4 @@
-import { Input } from '@signozhq/ui/input';
-import { Select } from 'antd';
+import { Input, Select } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 
 import { useCreateAlertState } from '../context';

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

@@ -16,10 +16,9 @@ import {
 	Plus,
 	X,
 } from '@signozhq/icons';
-import { Button, Card, Modal, Popover, Tooltip } from 'antd';
+import { Button, Card, Input, Modal, Popover, Tooltip } from 'antd';
 import { Badge } from '@signozhq/ui/badge';
 import { Typography } from '@signozhq/ui/typography';
-import { Input } from '@signozhq/ui/input';
 import logEvent from 'api/common/logEvent';
 import ConfigureIcon from 'assets/Integrations/ConfigureIcon';
 import { PANEL_GROUP_TYPES, PANEL_TYPES } from 'constants/queryBuilder';

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

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

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

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

frontend/src/container/DashboardContainer/visualization/components/ChartManager/ChartManager.tsx

@@ -1,6 +1,5 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
-import { Input } from '@signozhq/ui/input';
-import { Button } from 'antd';
+import { Button, Input } from 'antd';
 import { PrecisionOption, PrecisionOptionsEnum } from 'components/Graph/types';
 import { ResizeTable } from 'components/ResizeTable';
 import { useNotifications } from 'hooks/useNotifications';

frontend/src/container/ExplorerOptions/ExplorerOptions.styles.scss

@@ -23,10 +23,6 @@
 			}
 		}
 	}
-
-	&__divider {
-		--divider-vertical-margin: 0;
-	}
 }
 
 .hide-update {
@@ -59,6 +55,12 @@
 	.hidden {
 		display: none;
 	}
+
+	.ant-divider {
+		margin: 0;
+		height: 28px;
+		border: 1px solid var(--l1-border);
+	}
 }
 
 .explorer-options {

frontend/src/container/ExplorerOptions/ExplorerOptions.tsx

@@ -22,6 +22,7 @@ import { Color } from '@signozhq/design-tokens';
 import {
 	Button,
 	ColorPicker,
+	Input,
 	Modal,
 	RefSelectProps,
 	Select,
@@ -29,7 +30,6 @@ import {
 } from 'antd';
 import { Divider } from '@signozhq/ui/divider';
 import { Typography } from '@signozhq/ui/typography';
-import { Input } from '@signozhq/ui/input';
 import getLocalStorageKey from 'api/browser/localstorage/get';
 import setLocalStorageKey from 'api/browser/localstorage/set';
 import logEvent from 'api/common/logEvent';
@@ -874,9 +874,7 @@ function ExplorerOptions({
 						<>
 							<Divider
 								type="vertical"
-								className={cx('explorer-options-container__divider', {
-									hidden: !isEditDeleteSupported,
-								})}
+								className={isEditDeleteSupported ? '' : 'hidden'}
 							/>
 							<Tooltip title="Update this view" placement="top">
 								<Button

frontend/src/container/FormAlertChannels/Settings/Email.tsx

@@ -1,7 +1,7 @@
 import { Dispatch, SetStateAction } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Input } from '@signozhq/ui/input';
-import { Form } from 'antd';
+import { Form, Input } from 'antd';
+
 import { EmailChannel } from '../../CreateAlertChannels/config';
 
 function EmailForm({ setSelectedConfig }: EmailFormProps): JSX.Element {

frontend/src/container/FormAlertChannels/Settings/Webhook.tsx

@@ -1,7 +1,6 @@
 import { Dispatch, SetStateAction } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Input } from '@signozhq/ui/input';
-import { Form } from 'antd';
+import { Form, Input } from 'antd';
 import { MarkdownRenderer } from 'components/MarkdownRenderer/MarkdownRenderer';
 
 import { WebhookChannel } from '../../CreateAlertChannels/config';

frontend/src/container/FormAlertChannels/index.tsx

@@ -1,8 +1,7 @@
 import { Dispatch, ReactElement, SetStateAction } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Input } from '@signozhq/ui/input';
+import { Form, FormInstance, Input, Select } from 'antd';
 import { Switch } from '@signozhq/ui/switch';
-import { Form, FormInstance, Select } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import type { Store } from 'antd/lib/form/interface';
 import ROUTES from 'constants/routes';

frontend/src/container/GridCardLayout/GridCardLayout.tsx

@@ -6,8 +6,7 @@ import { useIsFetching } from 'react-query';
 import { useDispatch } from 'react-redux';
 import { useLocation } from 'react-router-dom';
 import { Color } from '@signozhq/design-tokens';
-import { Input } from '@signozhq/ui/input';
-import { Button, Form, Modal } from 'antd';
+import { Button, Form, Input, Modal } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
 import cx from 'classnames';

frontend/src/container/IngestionSettings/MultiIngestionSettings.tsx

@@ -5,12 +5,12 @@ import { useCopyToClipboard } from 'react-use';
 import { Color } from '@signozhq/design-tokens';
 import { Badge } from '@signozhq/ui/badge';
 import { Button } from '@signozhq/ui/button';
-import { Input } from '@signozhq/ui/input';
 import {
 	Col,
 	Collapse,
 	DatePicker,
 	Form,
+	Input,
 	InputNumber,
 	Modal,
 	Row,

frontend/src/container/Integrations/CloudIntegration/AmazonWebServices/RegionForm/RenderConnectionParams.tsx

@@ -1,5 +1,4 @@
-import { Input } from '@signozhq/ui/input';
-import { Form } from 'antd';
+import { Form, Input } from 'antd';
 import { CloudintegrationtypesCredentialsDTO } from 'api/generated/services/sigNoz.schemas';
 
 function RenderConnectionFields({

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

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

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

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

frontend/src/container/Licenses/ApplyLicenseForm.tsx

@@ -1,7 +1,6 @@
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Input } from '@signozhq/ui/input';
-import { Button, Form } from 'antd';
+import { Button, Form, Input } from 'antd';
 import apply from 'api/v3/licenses/post';
 import { useNotifications } from 'hooks/useNotifications';
 import APIError from 'types/api/error';

frontend/src/container/ListAlertRules/AlertsEmptyState/AlertsEmptyState.styles.scss

@@ -94,8 +94,11 @@
 			margin-bottom: 24px;
 			width: 100%;
 
-			&__divider {
-				--divider-border-width: 1px;
+			.ant-divider::before,
+			.ant-divider::after {
+				border-bottom: 2px dotted var(--l1-border);
+				border-top: 2px dotted var(--l1-border);
+				height: 8px;
 			}
 
 			.ant-typography {

frontend/src/container/ListAlertRules/AlertsEmptyState/AlertsEmptyState.tsx

@@ -125,7 +125,7 @@ export function AlertsEmptyState(): JSX.Element {
 					</div>
 				</section>
 				<div className="get-started-text">
-					<Divider className="get-started-text__divider">
+					<Divider>
 						<Typography.Text className="get-started-text">
 							Or get started with these sample alerts
 						</Typography.Text>

frontend/src/container/ListOfDashboard/DashboardTemplates/DashboardTemplatesModal.tsx

@@ -1,7 +1,6 @@
 /* eslint-disable @typescript-eslint/explicit-function-return-type */
 import { ChangeEvent, useState } from 'react';
-import { Input } from '@signozhq/ui/input';
-import { Button, Modal } from 'antd';
+import { Button, Input, Modal } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import ApacheIcon from 'assets/CustomIcons/ApacheIcon';
 import DockerIcon from 'assets/CustomIcons/DockerIcon';

frontend/src/container/ListOfDashboard/DashboardsList.tsx

@@ -12,9 +12,17 @@ import { useTranslation } from 'react-i18next';
 import { generatePath } from 'react-router-dom';
 import { useCopyToClipboard } from 'react-use';
 import { Color } from '@signozhq/design-tokens';
-import { Input } from '@signozhq/ui/input';
 import { DropdownMenuSimple, type MenuItem } from '@signozhq/ui/dropdown-menu';
-import { Button, Flex, Modal, Popover, Skeleton, Table, Tooltip } from 'antd';
+import {
+	Button,
+	Flex,
+	Input,
+	Modal,
+	Popover,
+	Skeleton,
+	Table,
+	Tooltip,
+} from 'antd';
 import { Badge } from '@signozhq/ui/badge';
 import { Switch } from '@signozhq/ui/switch';
 import { Typography } from '@signozhq/ui/typography';

frontend/src/container/ListOfDashboard/RequestDashboardBtn.tsx

@@ -1,8 +1,7 @@
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { LoaderCircle, Check } from '@signozhq/icons';
-import { Input } from '@signozhq/ui/input';
-import { Button, Space } from 'antd';
+import { Button, Input, Space } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
 import { useNotifications } from 'hooks/useNotifications';

frontend/src/container/LogDetailedView/Overview.tsx

@@ -2,9 +2,8 @@ import { ReactNode, useState } from 'react';
 import MEditor, { EditorProps, Monaco } from '@monaco-editor/react';
 import { Color } from '@signozhq/design-tokens';
 import { Button } from '@signozhq/ui/button';
-import { Input } from '@signozhq/ui/input';
 import { Switch } from '@signozhq/ui/switch';
-import { Collapse } from 'antd';
+import { Collapse, Input } from 'antd';
 import { Divider } from '@signozhq/ui/divider';
 import { Badge } from '@signozhq/ui/badge';
 import { Typography } from '@signozhq/ui/typography';

frontend/src/container/LogsFilters/index.tsx

@@ -2,8 +2,7 @@ import { ChangeEvent, useCallback, useState } from 'react';
 // eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux';
 import { CirclePlus, X } from '@signozhq/icons';
-import { Input } from '@signozhq/ui/input';
-import { Col } from 'antd';
+import { Col, Input } from 'antd';
 import CategoryHeading from 'components/Logs/CategoryHeading';
 import { fieldSearchFilter } from 'lib/logs/fieldSearch';
 import { AppState } from 'store/reducers';

frontend/src/container/LogsSearchFilter/SearchFields/QueryBuilder/QueryBuilder.tsx

@@ -2,8 +2,7 @@ import { useCallback, useMemo, useState } from 'react';
 // eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux';
 import { SquareX, X } from '@signozhq/icons';
-import { Input } from '@signozhq/ui/input';
-import { Button, Select } from 'antd';
+import { Button, Input, Select } from 'antd';
 import CategoryHeading from 'components/Logs/CategoryHeading';
 import {
 	ConditionalOperators,

frontend/src/container/MetricsExplorer/Inspect/MetricTimeAggregation.tsx

@@ -1,7 +1,6 @@
+import { Input } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
-// TODO(@signozhq/ui-input): migrate this <Input> once @signozhq/ui Input
-// supports the `onWheel` handler (used to blur on scroll for number inputs).
-import { Input, Select } from 'antd';
+import { Select } from 'antd';
 import classNames from 'classnames';
 
 import { TIME_AGGREGATION_OPTIONS } from './constants';

frontend/src/container/MetricsExplorer/MetricDetails/Metadata.tsx

@@ -1,8 +1,7 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useQueryClient } from 'react-query';
 import type { TableColumnsType as ColumnsType } from 'antd';
-import { Input } from '@signozhq/ui/input';
-import { Button, Collapse, Select, Spin } from 'antd';
+import { Button, Collapse, Input, Select, Spin } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
 import {

frontend/src/container/NewWidget/LeftContainer/ExplorerColumnsRenderer.styles.scss

@@ -19,9 +19,9 @@
 		letter-spacing: 0.5px;
 	}
 
-	&__divider {
-		--divider-color: var(--l1-border);
-		--divider-margin: 8px 0;
+	.ant-divider {
+		margin: 8px 0 !important;
+		border: 0.5px solid var(--l1-border);
 	}
 
 	.explorer-columns-contents {

frontend/src/container/NewWidget/LeftContainer/ExplorerColumnsRenderer.tsx

@@ -7,8 +7,7 @@ import {
 	DropResult,
 } from 'react-beautiful-dnd';
 import { Color } from '@signozhq/design-tokens';
-import { Input } from '@signozhq/ui/input';
-import { Button, Tooltip } from 'antd';
+import { Button, Input, Tooltip } from 'antd';
 import {
 	DropdownMenu,
 	DropdownMenuContent,
@@ -235,7 +234,7 @@ function ExplorerColumnsRenderer({
 					</Tooltip>
 				)}
 			</div>
-			<Divider className="explorer-columns-renderer__divider" />
+			<Divider />
 			{!isError && (
 				<div className="explorer-columns-contents">
 					<DragDropContext onDragEnd={onDragEnd}>

frontend/src/container/NewWidget/RightContainer/ContextLinks/UpdateContextLinks.tsx

@@ -1,7 +1,5 @@
 import { useEffect, useMemo, useState } from 'react';
-// TODO(@signozhq/ui-input): migrate <Input> once @signozhq/ui Input
-// supports the `spellCheck` prop on the URL input below.
-import { Button, Col, Form, Input, Input as AntInput, Row } from 'antd';
+import { Button, Col, Form, Input as AntInput, Input, Row } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import { CONTEXT_LINK_FIELDS } from 'container/NewWidget/RightContainer/ContextLinks/constants';
 import {

frontend/src/container/OnboardingContainer/Steps/DataSource/DataSource.tsx

@@ -1,8 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Blocks, Check, LoaderCircle } from '@signozhq/icons';
-import { Input } from '@signozhq/ui/input';
-import { Button, Card, Form, Select, Space } from 'antd';
+import { Button, Card, Form, Input, Select, Space } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
 import cx from 'classnames';

frontend/src/container/OnboardingContainer/Steps/EnvironmentDetails/EnvironmentDetails.tsx

@@ -1,8 +1,7 @@
 import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Check, Server, LoaderCircle } from '@signozhq/icons';
-import { Input } from '@signozhq/ui/input';
-import { Button, Card, Form, Space } from 'antd';
+import { Button, Card, Form, Input, Space } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
 import cx from 'classnames';

frontend/src/container/OrganizationSettings/InviteTeamMembers/index.tsx

@@ -1,7 +1,6 @@
 import { useTranslation } from 'react-i18next';
 import { Plus, Trash2 } from '@signozhq/icons';
-import { Input } from '@signozhq/ui/input';
-import { Button, Form, FormInstance, Select, Space } from 'antd';
+import { Button, Form, FormInstance, Input, Select, Space } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import { requireErrorMessage } from 'utils/form/requireErrorMessage';
 

frontend/src/container/PipelinePage/PipelineListsView/AddNewPipeline/FormFields/NameInput.tsx

@@ -1,6 +1,6 @@
 import { useTranslation } from 'react-i18next';
-import { Input } from '@signozhq/ui/input';
-import { Form } from 'antd';
+import { Form, Input } from 'antd';
+
 import { ProcessorFormField } from '../../AddNewProcessor/config';
 import { formValidationRules } from '../../config';
 

frontend/src/container/PipelinePage/PipelineListsView/AddNewProcessor/FormFields/CSVInput.tsx

@@ -1,6 +1,4 @@
 import { ChangeEventHandler, useState } from 'react';
-// TODO(@signozhq/ui-input): migrate to @signozhq/ui Input once the antd
-// `InputProps` spread (`size`, etc.) is no longer needed on this wrapper.
 import { Input, InputProps } from 'antd';
 
 function CSVInput({ value, onChange, ...otherProps }: InputProps): JSX.Element {

frontend/src/container/PipelinePage/PipelineListsView/AddNewProcessor/FormFields/JsonFlattening.tsx

@@ -1,8 +1,7 @@
 import { useEffect, useState } from 'react';
 import { Info } from '@signozhq/icons';
-import { Input } from '@signozhq/ui/input';
 import { Switch } from '@signozhq/ui/switch';
-import { Flex, Form, Space, Tooltip } from 'antd';
+import { Flex, Form, Input, Space, Tooltip } from 'antd';
 import { ProcessorData } from 'types/api/pipeline/def';
 
 import { PREDEFINED_MAPPING } from '../config';

frontend/src/container/PipelinePage/PipelineListsView/AddNewProcessor/ProcessorForm.tsx

@@ -1,7 +1,6 @@
 import { useTranslation } from 'react-i18next';
-import { Input } from '@signozhq/ui/input';
+import { Form, Input, Select, Space } from 'antd';
 import { Switch } from '@signozhq/ui/switch';
-import { Form, Select, Space } from 'antd';
 import { ModalFooterTitle } from 'container/PipelinePage/styles';
 import { ProcessorData } from 'types/api/pipeline/def';
 

frontend/src/container/PlannedDowntime/PlannedDowntime.styles.scss

@@ -19,6 +19,12 @@
 			}
 		}
 
+		.ant-modal-body {
+			.ant-divider {
+				margin: 16px 0;
+				border: 0.5px solid var(--l1-border);
+			}
+		}
 		.downtime-schedule-btn {
 			display: flex;
 		}

frontend/src/container/PlannedDowntime/PlannedDowntime.tsx

@@ -2,8 +2,7 @@ import React, { ChangeEvent, useEffect, useState } from 'react';
 import { useHistory } from 'react-router-dom';
 import { Plus, Search } from '@signozhq/icons';
 import { Color } from '@signozhq/design-tokens';
-import { Input } from '@signozhq/ui/input';
-import { Button, Flex, Form, Tooltip } from 'antd';
+import { Button, Flex, Form, Input, Tooltip } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import {
 	useDeleteDowntimeScheduleByID,

frontend/src/container/PlannedDowntime/PlannedDowntimeForm.tsx

@@ -152,11 +152,6 @@ export function PlannedDowntimeForm(
 
 	const saveHandler = useCallback(
 		async (values: PlannedDowntimeFormData) => {
-			const { startTime, timezone } = values;
-			if (!startTime || !timezone) {
-				// unreachable
-				return;
-			}
 			const data: AlertmanagertypesPostablePlannedMaintenanceDTO = {
 				alertIds:
 					values.alertRuleScope === 'all'
@@ -167,9 +162,9 @@ export function PlannedDowntimeForm(
 				name: values.name,
 				scope: values.scope,
 				schedule: {
-					startTime: startTime.format(),
+					startTime: values.startTime?.format(),
 					endTime: values.endTime?.format(),
-					timezone,
+					timezone: values.timezone!,
 					recurrence: values.recurrence,
 				},
 			};
@@ -206,17 +201,25 @@ export function PlannedDowntimeForm(
 		],
 	);
 	const onFinish = async (values: PlannedDowntimeFormData): Promise<void> => {
-		const rec = values.recurrence;
-		const recurrence =
-			rec && rec.repeatType !== recurrenceOptions.doesNotRepeat.value
-				? {
-						duration: `${rec.duration}${durationUnit}`,
-						repeatOn: rec.repeatOn,
-						repeatType: rec.repeatType,
-					}
-				: undefined;
+		const { recurrence } = values;
+		const recurrenceData =
+			!recurrence ||
+			recurrence.repeatType === recurrenceOptions.doesNotRepeat.value
+				? undefined
+				: {
+						duration: recurrence.duration
+							? `${recurrence.duration}${durationUnit}`
+							: '',
+						startTime: values.startTime!.format(),
+						endTime: values.endTime?.format(),
+						repeatOn: recurrence.repeatOn,
+						repeatType: recurrence.repeatType,
+					};
 
-		await saveHandler({ ...values, recurrence });
+		await saveHandler({
+			...values,
+			recurrence: recurrenceData,
+		});
 	};
 
 	const handleFormData = (data: Partial<PlannedDowntimeFormData>): void => {
@@ -273,6 +276,9 @@ export function PlannedDowntimeForm(
 
 	const formattedInitialValues = useMemo((): PlannedDowntimeFormData => {
 		const { schedule } = initialValues;
+		const startTime = schedule?.recurrence?.startTime || schedule?.startTime;
+		const endTime = schedule?.recurrence?.endTime || schedule?.endTime;
+
 		const initialAlertIds = initialValues.alertIds || [];
 
 		return {
@@ -280,12 +286,8 @@ export function PlannedDowntimeForm(
 			alertRuleScope:
 				isEditMode && initialAlertIds.length === 0 ? 'all' : 'specific',
 			alertRules: getAlertOptionsFromIds(initialAlertIds, alertOptions),
-			startTime: schedule?.startTime
-				? dayjs(schedule.startTime).tz(schedule.timezone)
-				: null,
-			endTime: schedule?.endTime
-				? dayjs(schedule.endTime).tz(schedule.timezone)
-				: null,
+			startTime: startTime ? dayjs(startTime).tz(schedule.timezone) : null,
+			endTime: endTime ? dayjs(endTime).tz(schedule.timezone) : null,
 			recurrence: {
 				...schedule?.recurrence,
 				repeatType: !isScheduleRecurring(schedule)

frontend/src/container/PlannedDowntime/PlannedDowntimeList.tsx

@@ -142,6 +142,7 @@ export function CollapseListContent({
 	updated_by_name?: string;
 	alertOptions?: DefaultOptionType[];
 }): JSX.Element {
+	const repeats = schedule?.recurrence;
 	const renderItems = (title: string, value: ReactNode): JSX.Element => (
 		<div className="render-item-collapse-list">
 			<Typography>{title}</Typography>
@@ -192,7 +193,10 @@ export function CollapseListContent({
 				'Timezone',
 				<Typography>{schedule?.timezone || '-'}</Typography>,
 			)}
-			{renderItems('Repeats', <Typography>{recurrenceInfo(schedule)}</Typography>)}
+			{renderItems(
+				'Repeats',
+				<Typography>{recurrenceInfo(repeats, schedule?.timezone)}</Typography>,
+			)}
 			{renderItems(
 				'Alerts silenced',
 				alertOptions?.length ? (

frontend/src/container/PlannedDowntime/PlannedDowntimeutils.ts

@@ -6,7 +6,7 @@ import type {
 	DeleteDowntimeScheduleByIDPathParameters,
 	RenderErrorResponseDTO,
 	AlertmanagertypesPlannedMaintenanceDTO,
-	AlertmanagertypesScheduleDTO,
+	AlertmanagertypesRecurrenceDTO,
 } from 'api/generated/services/sigNoz.schemas';
 import type { ErrorType } from 'api/generatedAPIInstance';
 import { AxiosError } from 'axios';
@@ -66,17 +66,14 @@ export const getAlertOptionsFromIds = (
 	);
 
 export const recurrenceInfo = (
-	schedule?: AlertmanagertypesScheduleDTO | null,
+	recurrence?: AlertmanagertypesRecurrenceDTO | null,
+	timezone?: string,
 ): string => {
-	if (!schedule) {
-		return 'No';
-	}
-	const { startTime, endTime, timezone, recurrence } = schedule;
 	if (!recurrence) {
 		return 'No';
 	}
 
-	const { duration, repeatOn, repeatType } = recurrence;
+	const { startTime, duration, repeatOn, repeatType, endTime } = recurrence;
 
 	const formattedStartTime = startTime
 		? formatDateTime(startTime, timezone)
@@ -98,7 +95,7 @@ export const defaultInitialValues: Partial<AlertmanagertypesPlannedMaintenanceDT
 			timezone: '',
 			endTime: undefined,
 			recurrence: undefined,
-			startTime: '',
+			startTime: undefined,
 		},
 		alertIds: [],
 		createdAt: undefined,

frontend/src/container/PlannedDowntime/__test__/testUtils.ts

@@ -11,7 +11,7 @@ export const buildSchedule = (
 	schedule: Partial<AlertmanagertypesScheduleDTO>,
 ): AlertmanagertypesScheduleDTO => ({
 	timezone: schedule?.timezone ?? '',
-	startTime: schedule?.startTime ?? '',
+	startTime: schedule?.startTime,
 	endTime: schedule?.endTime,
 	recurrence: schedule?.recurrence,
 });

frontend/src/container/QueryBuilder/components/Formula/Formula.styles.scss

@@ -8,16 +8,4 @@
 	grid-template-columns: 60% 35%;
 	justify-content: space-between;
 	gap: 16px;
-
-	.input-with-label {
-		.label {
-			box-sizing: border-box;
-			height: 36px;
-		}
-
-		.input {
-			box-sizing: border-box;
-			height: 36px;
-		}
-	}
 }

frontend/src/container/QueryBuilder/components/Query/Query.interfaces.ts

@@ -0,0 +1,18 @@
+import { QueryBuilderProps } from 'container/QueryBuilder/QueryBuilder.interfaces';
+import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
+
+export type QueryProps = {
+	index: number;
+	isAvailableToDisable: boolean;
+	query: IBuilderQuery;
+	queryVariant?: 'static' | 'dropdown';
+	isListViewPanel?: boolean;
+	showFunctions?: boolean;
+	version: string;
+	showSpanScopeSelector?: boolean;
+	showOnlyWhereClause?: boolean;
+	showTraceOperator?: boolean;
+	hasTraceOperator?: boolean;
+	signalSource?: string;
+	isMultiQueryAllowed?: boolean;
+} & Pick<QueryBuilderProps, 'filterConfigs' | 'queryComponents'>;

frontend/src/container/QueryBuilder/components/Query/Query.styles.scss

@@ -0,0 +1,8 @@
+.qb-search-container {
+	display: block;
+	position: relative;
+}
+
+.qb-container {
+	padding: 0 24px;
+}

frontend/src/container/QueryBuilder/components/Query/Query.tsx

@@ -0,0 +1,628 @@
+/* eslint-disable sonarjs/cognitive-complexity */
+// ** Hooks
+import {
+	ChangeEvent,
+	memo,
+	ReactNode,
+	useCallback,
+	useMemo,
+	useState,
+} from 'react';
+import { useLocation } from 'react-use';
+import { Col, Input, Row, Tooltip } from 'antd';
+import { Typography } from '@signozhq/ui/typography';
+import { ENTITY_VERSION_V4 } from 'constants/app';
+// ** Constants
+import { ATTRIBUTE_TYPES, PANEL_TYPES } from 'constants/queryBuilder';
+import ROUTES from 'constants/routes';
+// ** Components
+import {
+	AdditionalFiltersToggler,
+	DataSourceDropdown,
+	FilterLabel,
+} from 'container/QueryBuilder/components';
+import {
+	AggregatorFilter,
+	GroupByFilter,
+	HavingFilter,
+	MetricNameSelector,
+	OperatorsSelect,
+	OrderByFilter,
+	ReduceToFilter,
+} from 'container/QueryBuilder/filters';
+import AggregateEveryFilter from 'container/QueryBuilder/filters/AggregateEveryFilter';
+import LimitFilter from 'container/QueryBuilder/filters/LimitFilter/LimitFilter';
+import QueryBuilderSearch from 'container/QueryBuilder/filters/QueryBuilderSearch';
+import QueryBuilderSearchV2 from 'container/QueryBuilder/filters/QueryBuilderSearchV2/QueryBuilderSearchV2';
+import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
+import { useQueryOperations } from 'hooks/queryBuilder/useQueryBuilderOperations';
+import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
+import { DataSource } from 'types/common/queryBuilder';
+import { transformToUpperCase } from 'utils/transformToUpperCase';
+
+import QBEntityOptions from '../QBEntityOptions/QBEntityOptions';
+import SpaceAggregationOptions from '../SpaceAggregationOptions/SpaceAggregationOptions';
+// ** Types
+import { QueryProps } from './Query.interfaces';
+
+import './Query.styles.scss';
+
+export const Query = memo(function Query({
+	index,
+	queryVariant,
+	query,
+	filterConfigs,
+	queryComponents,
+	isListViewPanel = false,
+	showFunctions = false,
+	version,
+}: QueryProps): JSX.Element {
+	const { panelType, currentQuery, cloneQuery } = useQueryBuilder();
+	const { pathname } = useLocation();
+
+	const [isCollapse, setIsCollapsed] = useState(false);
+
+	const {
+		operators,
+		spaceAggregationOptions,
+		isMetricsDataSource,
+		isTracePanelType,
+		listOfAdditionalFilters,
+		handleChangeAggregatorAttribute,
+		handleChangeQueryData,
+		handleChangeDataSource,
+		handleChangeOperator,
+		handleSpaceAggregationChange,
+		handleDeleteQuery,
+		handleQueryFunctionsUpdates,
+	} = useQueryOperations({
+		index,
+		query,
+		filterConfigs,
+		isListViewPanel,
+		entityVersion: version,
+	});
+
+	const handleChangeAggregateEvery = useCallback(
+		(value: IBuilderQuery['stepInterval']) => {
+			handleChangeQueryData('stepInterval', value);
+		},
+		[handleChangeQueryData],
+	);
+
+	const handleChangeLimit = useCallback(
+		(value: IBuilderQuery['limit']) => {
+			handleChangeQueryData('limit', value);
+		},
+		[handleChangeQueryData],
+	);
+
+	const handleChangeHavingFilter = useCallback(
+		(value: IBuilderQuery['having']) => {
+			handleChangeQueryData('having', value);
+		},
+		[handleChangeQueryData],
+	);
+
+	const handleChangeOrderByKeys = useCallback(
+		(value: IBuilderQuery['orderBy']) => {
+			handleChangeQueryData('orderBy', value);
+		},
+		[handleChangeQueryData],
+	);
+
+	const handleToggleDisableQuery = useCallback(() => {
+		handleChangeQueryData('disabled', !query.disabled);
+	}, [handleChangeQueryData, query]);
+
+	const handleChangeTagFilters = useCallback(
+		(value: IBuilderQuery['filters']) => {
+			handleChangeQueryData('filters', value);
+		},
+		[handleChangeQueryData],
+	);
+
+	const handleChangeReduceTo = useCallback(
+		(value: IBuilderQuery['reduceTo']) => {
+			handleChangeQueryData('reduceTo', value);
+		},
+		[handleChangeQueryData],
+	);
+
+	const handleChangeGroupByKeys = useCallback(
+		(value: IBuilderQuery['groupBy']) => {
+			handleChangeQueryData('groupBy', value);
+		},
+		[handleChangeQueryData],
+	);
+
+	const handleChangeQueryLegend = useCallback(
+		(event: ChangeEvent<HTMLInputElement>) => {
+			handleChangeQueryData('legend', event.target.value);
+		},
+		[handleChangeQueryData],
+	);
+
+	const handleToggleCollapsQuery = (): void => {
+		setIsCollapsed(!isCollapse);
+	};
+
+	const renderOrderByFilter = useCallback((): ReactNode => {
+		if (queryComponents?.renderOrderBy) {
+			return queryComponents.renderOrderBy({
+				query,
+				onChange: handleChangeOrderByKeys,
+			});
+		}
+
+		return (
+			<OrderByFilter
+				entityVersion={version}
+				query={query}
+				onChange={handleChangeOrderByKeys}
+				isListViewPanel={isListViewPanel}
+			/>
+		);
+	}, [
+		queryComponents,
+		query,
+		version,
+		handleChangeOrderByKeys,
+		isListViewPanel,
+	]);
+
+	const renderAggregateEveryFilter = useCallback(
+		(): JSX.Element | null =>
+			!filterConfigs?.stepInterval?.isHidden ? (
+				<Row gutter={[11, 5]}>
+					<Col flex="5.93rem">
+						<FilterLabel label="Aggregate Every" />
+					</Col>
+					<Col flex="1 1 6rem">
+						<AggregateEveryFilter
+							query={query}
+							disabled={filterConfigs?.stepInterval?.isDisabled || false}
+							onChange={handleChangeAggregateEvery}
+						/>
+					</Col>
+				</Row>
+			) : null,
+		[
+			filterConfigs?.stepInterval?.isHidden,
+			filterConfigs?.stepInterval?.isDisabled,
+			query,
+			handleChangeAggregateEvery,
+		],
+	);
+
+	const isExplorerPage = useMemo(
+		() =>
+			pathname === ROUTES.LOGS_EXPLORER || pathname === ROUTES.TRACES_EXPLORER,
+		[pathname],
+	);
+
+	const renderAdditionalFilters = useCallback((): ReactNode => {
+		switch (panelType) {
+			case PANEL_TYPES.TIME_SERIES: {
+				return (
+					<>
+						<Col span={11}>
+							<Row gutter={[11, 5]}>
+								<Col flex="5.93rem">
+									<FilterLabel label="Limit" />
+								</Col>
+								<Col flex="1 1 12.5rem">
+									<LimitFilter query={query} onChange={handleChangeLimit} />
+								</Col>
+							</Row>
+						</Col>
+						<Col span={24}>
+							<Row gutter={[11, 5]}>
+								<Col flex="5.93rem">
+									<FilterLabel label="HAVING" />
+								</Col>
+								<Col flex="1 1 12.5rem">
+									<HavingFilter
+										entityVersion={version}
+										onChange={handleChangeHavingFilter}
+										query={query}
+									/>
+								</Col>
+							</Row>
+						</Col>
+						<Col span={11}>
+							<Row gutter={[11, 5]}>
+								<Col flex="5.93rem">
+									<FilterLabel label="Order by" />
+								</Col>
+								<Col flex="1 1 12.5rem">{renderOrderByFilter()}</Col>
+							</Row>
+						</Col>
+
+						<Col span={11}>{renderAggregateEveryFilter()}</Col>
+					</>
+				);
+			}
+
+			case PANEL_TYPES.VALUE: {
+				return (
+					<>
+						<Col span={11}>
+							<Row gutter={[11, 5]}>
+								<Col flex="5.93rem">
+									<FilterLabel label="HAVING" />
+								</Col>
+								<Col flex="1 1 12.5rem">
+									<HavingFilter
+										onChange={handleChangeHavingFilter}
+										entityVersion={version}
+										query={query}
+									/>
+								</Col>
+							</Row>
+						</Col>
+						<Col span={11}>{renderAggregateEveryFilter()}</Col>
+					</>
+				);
+			}
+
+			default: {
+				return (
+					<>
+						{!filterConfigs?.limit?.isHidden && (
+							<Col span={11}>
+								<Row gutter={[11, 5]}>
+									<Col flex="5.93rem">
+										<FilterLabel label="Limit" />
+									</Col>
+									<Col flex="1 1 12.5rem">
+										<LimitFilter query={query} onChange={handleChangeLimit} />
+									</Col>
+								</Row>
+							</Col>
+						)}
+
+						{!filterConfigs?.having?.isHidden && (
+							<Col span={11}>
+								<Row gutter={[11, 5]}>
+									<Col flex="5.93rem">
+										<FilterLabel label="HAVING" />
+									</Col>
+									<Col flex="1 1 12.5rem">
+										<HavingFilter
+											entityVersion={version}
+											onChange={handleChangeHavingFilter}
+											query={query}
+										/>
+									</Col>
+								</Row>
+							</Col>
+						)}
+						<Col span={11}>
+							<Row gutter={[11, 5]}>
+								<Col flex="5.93rem">
+									<FilterLabel label="Order by" />
+								</Col>
+								<Col flex="1 1 12.5rem">{renderOrderByFilter()}</Col>
+							</Row>
+						</Col>
+
+						<Col span={11}>{renderAggregateEveryFilter()}</Col>
+					</>
+				);
+			}
+		}
+	}, [
+		panelType,
+		query,
+		handleChangeLimit,
+		version,
+		handleChangeHavingFilter,
+		renderOrderByFilter,
+		renderAggregateEveryFilter,
+		filterConfigs?.limit?.isHidden,
+		filterConfigs?.having?.isHidden,
+	]);
+
+	const disableOperatorSelector =
+		!query?.aggregateAttribute?.key || query?.aggregateAttribute?.key === '';
+
+	const isVersionV4 = version && version === ENTITY_VERSION_V4;
+
+	return (
+		<Row gutter={[0, 12]} className={`query-builder-${version}`}>
+			<QBEntityOptions
+				isMetricsDataSource={isMetricsDataSource}
+				showFunctions={
+					(version && version === ENTITY_VERSION_V4) ||
+					query.dataSource === DataSource.LOGS ||
+					showFunctions ||
+					false
+				}
+				isCollapsed={isCollapse}
+				entityType="query"
+				entityData={query}
+				onToggleVisibility={handleToggleDisableQuery}
+				onDelete={handleDeleteQuery}
+				onCloneQuery={cloneQuery}
+				onCollapseEntity={handleToggleCollapsQuery}
+				query={query}
+				onQueryFunctionsUpdates={handleQueryFunctionsUpdates}
+				showDeleteButton={currentQuery.builder.queryData.length > 1}
+				isListViewPanel={isListViewPanel}
+				index={index}
+				queryVariant={queryVariant}
+			/>
+
+			{!isCollapse && (
+				<Row gutter={[0, 12]} className="qb-container">
+					<Col span={24}>
+						<Row align="middle" gutter={[5, 11]}>
+							{!isExplorerPage && (
+								<Col>
+									{queryVariant === 'dropdown' ? (
+										<DataSourceDropdown
+											onChange={handleChangeDataSource}
+											value={query.dataSource}
+											style={{ minWidth: '5.625rem' }}
+											isListViewPanel={isListViewPanel}
+										/>
+									) : (
+										<FilterLabel label={transformToUpperCase(query.dataSource)} />
+									)}
+								</Col>
+							)}
+
+							{isMetricsDataSource && (
+								<Col span={12}>
+									<Row gutter={[11, 5]}>
+										{version && version === 'v3' && (
+											<Col flex="5.93rem">
+												<Tooltip
+													title={
+														<div style={{ textAlign: 'center' }}>
+															Select Aggregate Operator
+															<Typography.Link
+																className="learn-more"
+																href="https://signoz.io/docs/userguide/query-builder/?utm_source=product&utm_medium=query-builder#aggregation"
+																target="_blank"
+																style={{ textDecoration: 'underline' }}
+															>
+																{' '}
+																<br />
+																Learn more
+															</Typography.Link>
+														</div>
+													}
+												>
+													<OperatorsSelect
+														value={query.aggregateOperator || ''}
+														onChange={handleChangeOperator}
+														operators={operators}
+													/>
+												</Tooltip>
+											</Col>
+										)}
+
+										<Col flex="auto">
+											<MetricNameSelector
+												onChange={handleChangeAggregatorAttribute}
+												query={query}
+											/>
+										</Col>
+
+										{version &&
+											version === ENTITY_VERSION_V4 &&
+											operators &&
+											Array.isArray(operators) &&
+											operators.length > 0 && (
+												<Col flex="5.93rem">
+													<Tooltip
+														title={
+															<div style={{ textAlign: 'center' }}>
+																Select Aggregate Operator
+																<Typography.Link
+																	className="learn-more"
+																	href="https://signoz.io/docs/metrics-management/types-and-aggregation/?utm_source=product&utm_medium=query-builder#aggregation"
+																	target="_blank"
+																	style={{ textDecoration: 'underline' }}
+																>
+																	{' '}
+																	<br />
+																	Learn more
+																</Typography.Link>
+															</div>
+														}
+													>
+														<OperatorsSelect
+															value={query.aggregateOperator || ''}
+															onChange={handleChangeOperator}
+															operators={operators}
+															disabled={disableOperatorSelector}
+														/>
+													</Tooltip>
+												</Col>
+											)}
+									</Row>
+								</Col>
+							)}
+
+							<Col flex="1 1 40rem">
+								<Row gutter={[11, 5]}>
+									{isMetricsDataSource && (
+										<Col>
+											<FilterLabel label="WHERE" />
+										</Col>
+									)}
+									<Col flex="1" className="qb-search-container">
+										{[DataSource.LOGS, DataSource.TRACES].includes(query.dataSource) ? (
+											<QueryBuilderSearchV2
+												query={query}
+												onChange={handleChangeTagFilters}
+												whereClauseConfig={filterConfigs?.filters}
+												hideSpanScopeSelector={query.dataSource !== DataSource.TRACES}
+											/>
+										) : (
+											<QueryBuilderSearch
+												query={query}
+												onChange={handleChangeTagFilters}
+												whereClauseConfig={filterConfigs?.filters}
+											/>
+										)}
+									</Col>
+								</Row>
+							</Col>
+						</Row>
+					</Col>
+					{!isMetricsDataSource && !isListViewPanel && (
+						<Col span={11}>
+							<Row gutter={[11, 5]}>
+								<Col flex="5.93rem">
+									<Tooltip
+										title={
+											<div style={{ textAlign: 'center' }}>
+												Select Aggregate Operator
+												<Typography.Link
+													href="https://signoz.io/docs/userguide/query-builder/?utm_source=product&utm_medium=query-builder#aggregation"
+													target="_blank"
+													style={{ textDecoration: 'underline' }}
+												>
+													{' '}
+													<br />
+													Learn more
+												</Typography.Link>
+											</div>
+										}
+									>
+										<OperatorsSelect
+											value={query.aggregateOperator || ''}
+											onChange={handleChangeOperator}
+											operators={operators}
+										/>
+									</Tooltip>
+								</Col>
+								<Col flex="1 1 12.5rem">
+									<AggregatorFilter
+										query={query}
+										onChange={handleChangeAggregatorAttribute}
+										disabled={
+											panelType === PANEL_TYPES.LIST || panelType === PANEL_TYPES.TRACE
+										}
+									/>
+								</Col>
+							</Row>
+						</Col>
+					)}
+					{!isListViewPanel && (
+						<Col span={24}>
+							<Row gutter={[11, 5]}>
+								<Col flex="5.93rem">
+									{isVersionV4 && isMetricsDataSource ? (
+										<SpaceAggregationOptions
+											panelType={panelType}
+											key={`${panelType}${query.spaceAggregation}${query.timeAggregation}`}
+											aggregatorAttributeType={
+												query?.aggregateAttribute?.type as ATTRIBUTE_TYPES
+											}
+											selectedValue={query.spaceAggregation}
+											disabled={disableOperatorSelector}
+											onSelect={handleSpaceAggregationChange}
+											operators={spaceAggregationOptions}
+										/>
+									) : (
+										<FilterLabel
+											label={panelType === PANEL_TYPES.VALUE ? 'Reduce to' : 'Group by'}
+										/>
+									)}
+								</Col>
+
+								<Col flex="1 1 12.5rem">
+									{panelType === PANEL_TYPES.VALUE ? (
+										<Row>
+											{isVersionV4 && isMetricsDataSource && (
+												<Col span={4}>
+													<FilterLabel label="Reduce to" />
+												</Col>
+											)}
+											<Col span={isVersionV4 && isMetricsDataSource ? 20 : 24}>
+												<ReduceToFilter query={query} onChange={handleChangeReduceTo} />
+											</Col>
+										</Row>
+									) : (
+										<GroupByFilter
+											disabled={isMetricsDataSource && !query.aggregateAttribute?.key}
+											query={query}
+											onChange={handleChangeGroupByKeys}
+										/>
+									)}
+								</Col>
+
+								{isVersionV4 &&
+									isMetricsDataSource &&
+									(panelType === PANEL_TYPES.TABLE || panelType === PANEL_TYPES.PIE) && (
+										<Col flex="1 1 12.5rem">
+											<Row>
+												<Col span={6}>
+													<FilterLabel label="Reduce to" />
+												</Col>
+
+												<Col span={18}>
+													<ReduceToFilter query={query} onChange={handleChangeReduceTo} />
+												</Col>
+											</Row>
+										</Col>
+									)}
+							</Row>
+						</Col>
+					)}
+					{!isTracePanelType && !isListViewPanel && (
+						<Col span={24}>
+							<AdditionalFiltersToggler
+								listOfAdditionalFilter={listOfAdditionalFilters}
+							>
+								<Row gutter={[0, 11]} justify="space-between">
+									{renderAdditionalFilters()}
+								</Row>
+							</AdditionalFiltersToggler>
+						</Col>
+					)}
+					{isListViewPanel && (
+						<Col span={24}>
+							<Row gutter={[0, 11]} justify="space-between">
+								{renderAdditionalFilters()}
+							</Row>
+						</Col>
+					)}
+					{panelType !== PANEL_TYPES.LIST && panelType !== PANEL_TYPES.TRACE && (
+						<Row style={{ width: '100%' }}>
+							<Tooltip
+								placement="right"
+								title={
+									<div style={{ textAlign: 'center' }}>
+										Name of legend
+										<Typography.Link
+											style={{ textDecoration: 'underline' }}
+											href="https://signoz.io/docs/userguide/query-builder/?utm_source=product&utm_medium=query-builder#legend-format"
+											target="_blank"
+										>
+											{' '}
+											<br />
+											Learn more
+										</Typography.Link>
+									</div>
+								}
+							>
+								<Input
+									onChange={handleChangeQueryLegend}
+									size="middle"
+									value={query.legend}
+									addonBefore="Legend Format"
+								/>
+							</Tooltip>
+						</Row>
+					)}
+				</Row>
+			)}
+		</Row>
+	);
+});

frontend/src/container/QueryBuilder/components/Query/index.ts

@@ -0,0 +1 @@
+export { Query } from './Query';

frontend/src/container/QueryBuilder/components/index.ts

@@ -5,3 +5,4 @@ export { Formula } from './Formula';
 export { HavingFilterTag } from './HavingFilterTag';
 export { ListItemWrapper } from './ListItemWrapper';
 export { ListMarker } from './ListMarker';
+export { Query } from './Query';

frontend/src/container/QueryBuilder/type.ts

@@ -1,6 +1,4 @@
 import { IQueryBuilderState } from 'constants/queryBuilder';
-import { QueryBuilderProps } from 'container/QueryBuilder/QueryBuilder.interfaces';
-import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 
 export interface InitialStateI {
 	search: string;
@@ -20,19 +18,3 @@ export type Option = {
 	isIndexed?: boolean;
 	type?: string;
 };
-
-export type QueryProps = {
-	index: number;
-	isAvailableToDisable: boolean;
-	query: IBuilderQuery;
-	queryVariant?: 'static' | 'dropdown';
-	isListViewPanel?: boolean;
-	showFunctions?: boolean;
-	version: string;
-	showSpanScopeSelector?: boolean;
-	showOnlyWhereClause?: boolean;
-	showTraceOperator?: boolean;
-	hasTraceOperator?: boolean;
-	signalSource?: string;
-	isMultiQueryAllowed?: boolean;
-} & Pick<QueryBuilderProps, 'filterConfigs' | 'queryComponents'>;

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

@@ -1,7 +1,6 @@
 import { useCallback, useMemo, useState } from 'react';
 import { useQuery } from 'react-query';
-import { Input } from '@signozhq/ui/input';
-import { Skeleton } from 'antd';
+import { Input, Skeleton } from 'antd';
 import { getKeySuggestions } from 'api/querySuggestions/getKeySuggestions';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
 import { QUERY_BUILDER_KEY_TYPES } from 'constants/antlrQueryConstants';

frontend/src/container/RoutingPolicies/RoutingPolicies.tsx

@@ -1,8 +1,7 @@
 import { ChangeEvent, useMemo } from 'react';
 import { Plus, Search } from '@signozhq/icons';
 import { Color } from '@signozhq/design-tokens';
-import { Input } from '@signozhq/ui/input';
-import { Button, Flex, Tooltip } from 'antd';
+import { Button, Flex, Input, Tooltip } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import { useAppContext } from 'providers/App/App';
 import { USER_ROLES } from 'types/roles';

frontend/src/container/RoutingPolicies/styles.scss

@@ -191,6 +191,13 @@
 				line-height: 20px;
 			}
 		}
+
+		.ant-modal-body {
+			.ant-divider {
+				margin: 16px 0;
+				border: 0.5px solid var(--l1-border);
+			}
+		}
 	}
 
 	.create-policy-container {

frontend/src/container/SpanDetailsDrawer/Attributes/Attributes.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useMemo, useState } from 'react';
-import { Input } from '@signozhq/ui/input';
+import { Input } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import cx from 'classnames';
 import CopyClipboardHOC from 'components/Logs/CopyClipboardHOC';

frontend/src/container/SpanDetailsDrawer/Events/Events.tsx

@@ -1,6 +1,5 @@
 import { useState } from 'react';
-import { Input } from '@signozhq/ui/input';
-import { Collapse, Modal } from 'antd';
+import { Collapse, Input, Modal } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import { getYAxisFormattedValue } from 'components/Graph/yAxisConfig';
 import { Diamond } from '@signozhq/icons';

frontend/src/container/SpanDetailsDrawer/SpanDetailsDrawer.tsx

@@ -9,10 +9,10 @@ import {
 	useState,
 } from 'react';
 import { useMutation, useQuery } from 'react-query';
-import { Input } from '@signozhq/ui/input';
 import {
 	Button,
 	Checkbox,
+	Input,
 	Modal,
 	Select,
 	Skeleton,

frontend/src/container/SpanDetailsDrawer/SpanRelatedSignals/SpanRelatedSignals.styles.scss

@@ -15,8 +15,11 @@
 		}
 	}
 
-	&__divider {
-		--divider-vertical-margin: 10px;
+	.ant-divider {
+		margin-inline-start: 10px !important;
+		margin-inline-end: 16px !important;
+		height: 16px;
+		border-color: var(--l1-border);
 	}
 	.ant-drawer-close {
 		margin: 0 !important;

frontend/src/container/SpanDetailsDrawer/SpanRelatedSignals/SpanRelatedSignals.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useMemo, useState } from 'react';
-import { Color } from '@signozhq/design-tokens';
+import { Color, Spacing } from '@signozhq/design-tokens';
 import { Button, Drawer } from 'antd';
 import { Divider } from '@signozhq/ui/divider';
 import { Typography } from '@signozhq/ui/typography';
@@ -179,10 +179,7 @@ function SpanRelatedSignals({
 			width="50%"
 			title={
 				<>
-					<Divider
-						type="vertical"
-						className="span-related-signals-drawer__divider"
-					/>
+					<Divider type="vertical" />
 					<Typography.Text className="title">
 						Related Signals - {selectedSpan.name}
 					</Typography.Text>
@@ -197,7 +194,7 @@ function SpanRelatedSignals({
 			}}
 			className="span-related-signals-drawer"
 			destroyOnClose
-			closeIcon={<X size={16} />}
+			closeIcon={<X size={16} style={{ marginTop: Spacing.MARGIN_1 }} />}
 		>
 			{selectedSpan && (
 				<div className="span-related-signals-drawer__content">

frontend/src/container/Trace/Filters/Panel/PanelBody/Duration/styles.ts

@@ -1,7 +1,5 @@
-// TODO(@signozhq/ui-input): migrate this styled(Input) once @signozhq/ui
-// Input supports `addonAfter` (the consumer renders `<InputComponent addonAfter="ms">`).
-import { Typography } from '@signozhq/ui/typography';
 import { Input } from 'antd';
+import { Typography } from '@signozhq/ui/typography';
 import styled from 'styled-components';
 
 export const DurationText = styled.div`

frontend/src/container/Trace/Search/AllTags/Tag/TagKey.tsx

@@ -8,8 +8,7 @@ import {
 import { useQuery } from 'react-query';
 // eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux';
-import { Input } from '@signozhq/ui/input';
-import { AutoComplete } from 'antd';
+import { AutoComplete, Input } from 'antd';
 import getTagFilters from 'api/trace/getTagFilter';
 import { AppState } from 'store/reducers';
 import { GlobalReducer } from 'types/reducer/globalTime';

frontend/src/container/Trace/TraceGraphFilter/index.tsx

@@ -2,8 +2,7 @@ import { useMemo, useState } from 'react';
 import { useQuery } from 'react-query';
 // eslint-disable-next-line no-restricted-imports
 import { useSelector } from 'react-redux';
-import { Input } from '@signozhq/ui/input';
-import { AutoComplete, Space } from 'antd';
+import { AutoComplete, Input, Space } from 'antd';
 import getTagFilters from 'api/trace/getTagFilter';
 import { AppState } from 'store/reducers';
 import { GlobalReducer } from 'types/reducer/globalTime';

frontend/src/container/TraceWaterfall/AddSpanToFunnelModal/AddSpanToFunnelModal.tsx

@@ -1,7 +1,6 @@
 import { ChangeEvent, useEffect, useMemo, useState } from 'react';
 import { ArrowLeft, Check, Loader, Plus, Search } from '@signozhq/icons';
-import { Input } from '@signozhq/ui/input';
-import { Button, Spin } from 'antd';
+import { Button, Input, Spin } from 'antd';
 import cx from 'classnames';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
 import SignozModal from 'components/SignozModal/SignozModal';

frontend/src/container/Version/styles.ts

@@ -1,4 +1,4 @@
-import { Input } from '@signozhq/ui/input';
+import { Input } from 'antd';
 import styled from 'styled-components';
 
 export const InputComponent = styled(Input)`

frontend/src/pages/AlertDetails/AlertDetails.styles.scss

@@ -41,9 +41,9 @@
 }
 
 .alert-details {
-	&__divider {
-		--divider-color: var(--l1-border);
-		--divider-margin: 16px 0;
+	.divider {
+		border-color: var(--l1-border);
+		margin: 16px 0;
 	}
 	.breadcrumb-divider {
 		margin-top: 10px;

frontend/src/pages/AlertDetails/AlertDetails.tsx

@@ -104,7 +104,7 @@ function AlertDetails(): JSX.Element {
 				/>
 
 				{alertRuleDetails && <AlertHeader alertDetails={alertRuleDetails} />}
-				<Divider className="alert-details__divider" />
+				<Divider className="divider" />
 				<div className="tabs-and-filters">
 					<RouteTab
 						routes={routes}

frontend/src/pages/AlertDetails/AlertHeader/ActionButtons/ActionButtons.styles.scss

@@ -3,9 +3,10 @@
 	align-items: center;
 	gap: 12px;
 	color: var(--l1-border);
-	&__divider {
-		--divider-color: var(--l1-border);
-		--divider-vertical-margin: 0;
+	.ant-divider-vertical {
+		height: 16px;
+		border-color: var(--l1-border);
+		margin: 0;
 	}
 	.dropdown-trigger-wrapper {
 		display: flex;

frontend/src/pages/AlertDetails/AlertHeader/ActionButtons/ActionButtons.tsx

@@ -122,7 +122,7 @@ function AlertActionButtons({
 				</Tooltip>
 				<CopyToClipboard textToCopy={window.location.href} />
 
-				<Divider type="vertical" className="alert-action-buttons__divider" />
+				<Divider type="vertical" />
 
 				<DropdownMenuSimple menu={{ items: menuItems }}>
 					<span className="dropdown-trigger-wrapper">

frontend/src/pages/MessagingQueues/MQDetails/DropRateView/EvaluationTimeSelector.tsx

@@ -1,6 +1,5 @@
 import { Dispatch, SetStateAction, useEffect, useState } from 'react';
-import { Input } from '@signozhq/ui/input';
-import { Select } from 'antd';
+import { Input, Select } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 
 import './DropRateView.styles.scss';

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

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

frontend/src/pages/MetricsApplication/MetricsApplication.tsx

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

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

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

frontend/src/pages/Pipelines/index.tsx

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

frontend/src/pages/SaveView/SaveView.styles.scss

@@ -28,10 +28,6 @@
 		.learn-more {
 			font-size: 14px;
 		}
-		.search-input-container {
-			margin-top: 16px;
-			margin-bottom: 8px;
-		}
 
 		.ant-input-affix-wrapper {
 			margin-top: 16px;

frontend/src/pages/SaveView/index.tsx

@@ -3,8 +3,7 @@ import { useTranslation } from 'react-i18next';
 import { useLocation } from 'react-router-dom';
 import { Color } from '@signozhq/design-tokens';
 import { Button } from '@signozhq/ui/button';
-import { Input } from '@signozhq/ui/input';
-import { ColorPicker, Modal, Table, TableProps } from 'antd';
+import { ColorPicker, Input, Modal, Table, TableProps } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
 import {
@@ -312,15 +311,12 @@ function SaveView(): JSX.Element {
 						Learn more
 					</Typography.Link>
 				</Typography.Text>
-				<div className="search-input-container">
-					<Input
-						placeholder="Search for views..."
-						prefix={<Search size={12} color={Color.BG_VANILLA_400} />}
-						value={searchValue}
-						onChange={handleSearch}
-						className="search-input"
-					/>
-				</div>
+				<Input
+					placeholder="Search for views..."
+					prefix={<Search size={12} color={Color.BG_VANILLA_400} />}
+					value={searchValue}
+					onChange={handleSearch}
+				/>
 
 				<Table
 					columns={columns}

frontend/src/pages/Settings/Settings.tsx

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

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

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

frontend/src/pages/TraceDetailV2/TraceDetailV2.tsx

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

frontend/src/pages/TraceDetailsV3/SpanDetailsPanel/SpanPercentile/SpanPercentilePanel.tsx

@@ -1,8 +1,7 @@
-import { Select, Skeleton } from 'antd';
+import { Input, Select, Skeleton } from 'antd';
 import { Checkbox } from '@signozhq/ui/checkbox';
 import { Button } from '@signozhq/ui/button';
 import { Typography } from '@signozhq/ui/typography';
-import { Input } from '@signozhq/ui/input';
 import cx from 'classnames';
 import { getYAxisFormattedValue } from 'components/Graph/yAxisConfig';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';

frontend/src/pages/TraceDetailsV3/TraceWaterfall/AddSpanToFunnelModal/AddSpanToFunnelModal.tsx

@@ -1,7 +1,6 @@
 import { ChangeEvent, useEffect, useMemo, useState } from 'react';
 import { Button } from '@signozhq/ui/button';
-import { Input } from '@signozhq/ui/input';
-import { Spin } from 'antd';
+import { Input, Spin } from 'antd';
 import cx from 'classnames';
 import OverlayScrollbar from 'components/OverlayScrollbar/OverlayScrollbar';
 import SignozModal from 'components/SignozModal/SignozModal';