refactor(query-builder): removed unused query component

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.126.1
+    image: signoz/signoz:v0.126.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.126.1
+    image: signoz/signoz:v0.126.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.126.1}
+    image: signoz/signoz:${VERSION:-v0.126.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.126.1}
+    image: signoz/signoz:${VERSION:-v0.126.0}
     container_name: signoz
     ports:
       - "8080:8080" # signoz port

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

@@ -25,7 +25,6 @@ const BANNED_COMPONENTS = {
 	Progress: 'Use @signozhq/ui/progress instead of antd Progress.',
 	Avatar: 'Use @signozhq/ui/avatar instead of antd Avatar.',
 	Divider: 'Use @signozhq/ui/divider Divider instead of antd Divider.',
-	Tag: 'Use @signozhq/ui/badge Bagde instead of antd Tag.',
 };
 
 export default {

frontend/src/components/ClientSideQBSearch/ClientSideQBSearch.tsx

@@ -9,7 +9,7 @@ import {
 	useState,
 } from 'react';
 import { Color } from '@signozhq/design-tokens';
-import { Select, Tooltip } from 'antd';
+import { Select, Tag, Tooltip } from 'antd';
 import {
 	OPERATORS,
 	QUERY_BUILDER_OPERATORS_BY_TYPES,
@@ -51,7 +51,6 @@ import { popupContainer } from 'utils/selectPopupContainer';
 import { v4 as uuid } from 'uuid';
 
 import './ClientSideQBSearch.styles.scss';
-import { Badge } from '@signozhq/ui/badge';
 
 export interface AttributeKey {
 	key: string;
@@ -548,14 +547,10 @@ function ClientSideQBSearch(
 
 		return (
 			<span className="qb-search-bar-tokenised-tags">
-				<Badge
-					color="vanilla"
-					className={tagDetails?.key?.type || ''}
+				<Tag
 					closable={!searchValue && closable}
-					onClose={(e): void => {
-						e.preventDefault();
-						onCloseHandler();
-					}}
+					onClose={onCloseHandler}
+					className={tagDetails?.key?.type || ''}
 				>
 					<Tooltip title={chipValue}>
 						<TypographyText
@@ -571,7 +566,7 @@ function ClientSideQBSearch(
 							{chipValue}
 						</TypographyText>
 					</Tooltip>
-				</Badge>
+				</Tag>
 			</span>
 		);
 	};

frontend/src/components/ErrorModal/ErrorModal.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Color } from '@signozhq/design-tokens';
-import { Button, Modal } 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 { Badge } from '@signozhq/ui/badge';
 
 type Props = {
 	error: APIError;
@@ -46,17 +45,14 @@ function ErrorModal({
 	return (
 		<>
 			{!triggerComponent ? (
-				<span
+				<Tag
 					className="error-modal__trigger"
-					role="button"
-					tabIndex={0}
+					icon={<CircleAlert size={14} color={Color.BG_CHERRY_500} />}
+					color="error"
 					onClick={(): void => setVisible(true)}
-					onKeyDown={undefined}
 				>
-					<Badge color="error">
-						<CircleAlert size={14} color={Color.BG_CHERRY_500} /> error
-					</Badge>
-				</span>
+					error
+				</Tag>
 			) : (
 				React.cloneElement(triggerComponent, {
 					onClick: () => setVisible(true),

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

@@ -14,8 +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 { Button, Card, Collapse, Popover, Tooltip } from 'antd';
-import { Badge } from '@signozhq/ui/badge';
+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';
@@ -665,26 +664,26 @@ function QuerySearch({
 	// Helper function to render a badge for the current context mode
 	const renderContextBadge = (): JSX.Element => {
 		if (!editingMode) {
-			return <Badge color="vanilla">Unknown</Badge>;
+			return <Tag>Unknown</Tag>;
 		}
 
 		switch (editingMode) {
 			case 'key':
-				return <Badge color="robin">Key</Badge>;
+				return <Tag color="blue">Key</Tag>;
 			case 'operator':
-				return <Badge color="sakura">Operator</Badge>;
+				return <Tag color="purple">Operator</Tag>;
 			case 'value':
-				return <Badge color="forest">Value</Badge>;
+				return <Tag color="green">Value</Tag>;
 			case 'conjunction':
-				return <Badge color="amber">Conjunction</Badge>;
+				return <Tag color="orange">Conjunction</Tag>;
 			case 'function':
-				return <Badge color="aqua">Function</Badge>;
+				return <Tag color="cyan">Function</Tag>;
 			case 'parenthesis':
-				return <Badge color="sakura">Parenthesis</Badge>;
+				return <Tag color="magenta">Parenthesis</Tag>;
 			case 'bracketList':
-				return <Badge color="cherry">Bracket List</Badge>;
+				return <Tag color="red">Bracket List</Tag>;
 			default:
-				return <Badge color="vanilla">Unknown</Badge>;
+				return <Tag>Unknown</Tag>;
 		}
 	};
 
@@ -1305,37 +1304,34 @@ function QuerySearch({
 					Currently editing: {renderContextBadge()}
 					{queryContext?.keyToken && (
 						<span className="triplet-info">
-							Key: <Badge color="vanilla">{queryContext.keyToken}</Badge>
+							Key: <Tag>{queryContext.keyToken}</Tag>
 						</span>
 					)}
 					{queryContext?.operatorToken && (
 						<span className="triplet-info">
-							Operator: <Badge color="vanilla">{queryContext.operatorToken}</Badge>
+							Operator: <Tag>{queryContext.operatorToken}</Tag>
 						</span>
 					)}
 					{queryContext?.valueToken && (
 						<span className="triplet-info">
-							Value: <Badge color="vanilla">{queryContext.valueToken}</Badge>
+							Value: <Tag>{queryContext.valueToken}</Tag>
 						</span>
 					)}
 					{queryContext?.currentPair && (
 						<span className="triplet-info query-pair-info">
-							Current pair: <Badge color="robin">{queryContext.currentPair.key}</Badge>
-							<Badge color="sakura">{queryContext.currentPair.operator}</Badge>
+							Current pair: <Tag color="blue">{queryContext.currentPair.key}</Tag>
+							<Tag color="purple">{queryContext.currentPair.operator}</Tag>
 							{queryContext.currentPair.value && (
-								<Badge color="forest">{queryContext.currentPair.value}</Badge>
+								<Tag color="green">{queryContext.currentPair.value}</Tag>
 							)}
-							<Badge
-								color={queryContext.currentPair.isComplete ? 'success' : 'warning'}
-							>
+							<Tag color={queryContext.currentPair.isComplete ? 'success' : 'warning'}>
 								{queryContext.currentPair.isComplete ? 'Complete' : 'Incomplete'}
-							</Badge>
+							</Tag>
 						</span>
 					)}
 					{queryContext?.queryPairs && queryContext.queryPairs.length > 0 && (
 						<span className="triplet-info">
-							Total pairs:{' '}
-							<Badge color="robin">{queryContext.queryPairs.length}</Badge>
+							Total pairs: <Tag color="blue">{queryContext.queryPairs.length}</Tag>
 						</span>
 					)}
 				</div>

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/components/Query/Query.interfaces';
+import { QueryProps } from 'container/QueryBuilder/type';
 import SpanScopeSelector from 'container/QueryBuilder/filters/QueryBuilderSearchV2/SpanScopeSelector';
 import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { useQueryOperations } from 'hooks/queryBuilder/useQueryBuilderOperations';

frontend/src/components/TableRenderer/LabelColumn.tsx

@@ -1,13 +1,12 @@
-import { Popover } from 'antd';
-import { Badge } from '@signozhq/ui/badge';
+import { Popover, Tag } from 'antd';
 
 import { LabelColumnProps } from './TableRenderer.types';
-import BadgeWithTooltip from './BadgeWithTooltip';
+import TagWithToolTip from './TagWithToolTip';
 import { getLabelAndValueContent } from './utils';
 
 import './LabelColumn.styles.scss';
 
-function LabelColumn({ labels, value }: LabelColumnProps): JSX.Element {
+function LabelColumn({ labels, value, color }: LabelColumnProps): JSX.Element {
 	const newLabels = labels.length > 3 ? labels.slice(0, 3) : labels;
 	const remainingLabels = labels.length > 3 ? labels.slice(3) : [];
 
@@ -15,7 +14,7 @@ function LabelColumn({ labels, value }: LabelColumnProps): JSX.Element {
 		<div className="label-column">
 			{newLabels.map(
 				(label: string): JSX.Element => (
-					<BadgeWithTooltip key={label} label={label} value={value} />
+					<TagWithToolTip key={label} label={label} color={color} value={value} />
 				),
 			)}
 			{remainingLabels.length > 0 && (
@@ -27,9 +26,9 @@ function LabelColumn({ labels, value }: LabelColumnProps): JSX.Element {
 							{labels.map(
 								(label: string): JSX.Element => (
 									<div key={label}>
-										<Badge className="label-column--tag" color="vanilla">
+										<Tag className="label-column--tag" color={color}>
 											{getLabelAndValueContent(label, value && value[label])}
-										</Badge>
+										</Tag>
 									</div>
 								),
 							)}
@@ -37,9 +36,9 @@ function LabelColumn({ labels, value }: LabelColumnProps): JSX.Element {
 					}
 					trigger="hover"
 				>
-					<Badge className="label-column--tag" color="vanilla">
+					<Tag className="label-column--tag" color={color}>
 						+{remainingLabels.length}
-					</Badge>
+					</Tag>
 				</Popover>
 			)}
 		</div>

frontend/src/components/TableRenderer/TagWithToolTip.tsx

@@ -1,34 +1,36 @@
-import { Tooltip } from 'antd';
-import { Badge } from '@signozhq/ui/badge';
+import { Tag, Tooltip } from 'antd';
 
 import { getLabelRenderingValue } from './utils';
 
-function BadgeWithTooltip({
+function TagWithToolTip({
 	label,
 	value,
-}: BadgeWithTooltipProps): JSX.Element {
+	color,
+}: TagWithToolTipProps): JSX.Element {
 	const tooltipTitle =
 		value && value[label] ? `${label}: ${value[label]}` : label;
 	return (
 		<div key={label}>
 			<Tooltip title={tooltipTitle}>
-				<Badge className="label-column--tag" color="vanilla">
+				<Tag className="label-column--tag" color={color}>
 					{getLabelRenderingValue(label, value && value[label])}
-				</Badge>
+				</Tag>
 			</Tooltip>
 		</div>
 	);
 }
 
-type BadgeWithTooltipProps = {
+type TagWithToolTipProps = {
 	label: string;
+	color?: string;
 	value?: {
 		[key: string]: string;
 	};
 };
 
-BadgeWithTooltip.defaultProps = {
+TagWithToolTip.defaultProps = {
 	value: undefined,
+	color: undefined,
 };
 
-export default BadgeWithTooltip;
+export default TagWithToolTip;

frontend/src/components/Tags/Tags.styles.scss

@@ -14,6 +14,11 @@
 	.ant-form-item {
 		margin-bottom: 0;
 	}
+
+	.ant-tag {
+		margin-right: 0;
+		background: var(--card);
+	}
 }
 
 .add-tag-container {

frontend/src/components/Tags/Tags.tsx

@@ -1,12 +1,11 @@
 import React, { Dispatch, SetStateAction, useState } from 'react';
 import { Check, Plus, X } from '@signozhq/icons';
-import { Button, Flex } from 'antd';
-import { Badge } from '@signozhq/ui/badge';
+import { Button, Flex, Tag } from 'antd';
 import Input from 'components/Input';
 
-import './Badges.styles.scss';
+import './Tags.styles.scss';
 
-function Badges({ tags, setTags }: AddTagsProps): JSX.Element {
+function Tags({ tags, setTags }: AddTagsProps): JSX.Element {
 	const [inputValue, setInputValue] = useState<string>('');
 	const [inputVisible, setInputVisible] = useState<boolean>(false);
 
@@ -47,18 +46,14 @@ function Badges({ tags, setTags }: AddTagsProps): JSX.Element {
 	return (
 		<div className="tags-container">
 			{tags.map<React.ReactNode>((tag) => (
-				<Badge
+				<Tag
 					key={tag}
-					color="vanilla"
-					style={{ userSelect: 'none' }}
 					closable
-					onClose={(e): void => {
-						e.preventDefault();
-						handleClose(tag);
-					}}
+					style={{ userSelect: 'none' }}
+					onClose={(): void => handleClose(tag)}
 				>
-					{tag}
-				</Badge>
+					<span>{tag}</span>
+				</Tag>
 			))}
 
 			{inputVisible && (
@@ -118,4 +113,4 @@ interface AddTagsProps {
 	setTags: Dispatch<SetStateAction<string[]>>;
 }
 
-export default Badges;
+export default Tags;

frontend/src/container/ApiMonitoring/utils.tsx

@@ -1,8 +1,7 @@
 import { ReactNode } from 'react';
 import { Color } from '@signozhq/design-tokens';
-import { TableColumnType as ColumnType, Tooltip } from 'antd';
+import { TableColumnType as ColumnType, Tag, Tooltip } from 'antd';
 import { Progress } from '@signozhq/ui/progress';
-import { Badge } from '@signozhq/ui/badge';
 import { convertFiltersToExpressionWithExistingQuery } from 'components/QueryBuilderV2/utils';
 import {
 	FiltersType,
@@ -973,9 +972,13 @@ export const getEndPointsColumnsConfig = (
 					})()}
 					{isGroupedByAttribute
 						? text.split(',').map((value) => (
-								<Badge key={value} color="vanilla" className="endpoint-group-tag-item">
+								<Tag
+									key={value}
+									color={Color.BG_SLATE_100}
+									className="endpoint-group-tag-item"
+								>
 									{value === '' ? '<no-value>' : value}
-								</Badge>
+								</Tag>
 							))
 						: endPointName}
 				</div>

frontend/src/container/BillingContainer/BillingContainer.tsx

@@ -14,8 +14,8 @@ import {
 	Skeleton,
 	Table,
 	TableColumnsType as ColumnsType,
+	Tag,
 } from 'antd';
-import { Badge } from '@signozhq/ui/badge';
 import getUsage, { UsageResponsePayloadProps } from 'api/billing/getUsage';
 import logEvent from 'api/common/logEvent';
 import updateCreditCardApi from 'api/v1/checkout/create';
@@ -434,7 +434,7 @@ export default function BillingContainer(): JSX.Element {
 					<Flex vertical>
 						<Typography.Title level={5} style={{ marginTop: 2, fontWeight: 500 }}>
 							{isCloudUserVal ? t('teams_cloud') : t('teams')}{' '}
-							{isFreeTrial ? <Badge color="success"> Free Trial </Badge> : ''}
+							{isFreeTrial ? <Tag color="success"> Free Trial </Tag> : ''}
 						</Typography.Title>
 
 						{!isLoading && !isFetchingBillingData && !showGracePeriodMessage ? (

frontend/src/container/CreateAlertRule/SelectAlertType/index.tsx

@@ -1,7 +1,6 @@
 import { useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Row } from 'antd';
-import { Badge } from '@signozhq/ui/badge';
+import { Row, Tag } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
 import { ALERTS_DATA_SOURCE_MAP } from 'constants/alerts';
@@ -67,7 +66,13 @@ function SelectAlertType({ onSelect }: SelectAlertTypeProps): JSX.Element {
 					<AlertTypeCard
 						key={option.selection}
 						title={option.title}
-						extra={option.isBeta ? <Badge color="robin">Beta</Badge> : undefined}
+						extra={
+							option.isBeta ? (
+								<Tag bordered={false} color="geekblue">
+									Beta
+								</Tag>
+							) : undefined
+						}
 						onClick={(e): void => {
 							onSelect(option.selection, isModifierKeyPressed(e));
 						}}

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

@@ -16,8 +16,7 @@ import {
 	Plus,
 	X,
 } from '@signozhq/icons';
-import { Button, Card, Input, Modal, Popover, Tooltip } from 'antd';
-import { Badge } from '@signozhq/ui/badge';
+import { Button, Card, Input, Modal, Popover, Tag, Tooltip } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import logEvent from 'api/common/logEvent';
 import ConfigureIcon from 'assets/Integrations/ConfigureIcon';
@@ -507,9 +506,9 @@ function DashboardDescription(props: DashboardDescriptionProps): JSX.Element {
 			{(tags?.length || 0) > 0 && (
 				<div className="dashboard-tags">
 					{tags?.map((tag) => (
-						<Badge key={tag} className="tag" color="vanilla">
+						<Tag key={tag} className="tag">
 							{tag}
-						</Badge>
+						</Tag>
 					))}
 				</div>
 			)}

frontend/src/container/DashboardContainer/DashboardSettings/DashboardVariableSettings/VariableItem/VariableItem.styles.scss

@@ -359,7 +359,7 @@
 				flex-flow: wrap;
 				gap: 8px;
 
-				[data-slot='badge'] {
+				.ant-tag {
 					height: 30px;
 					color: var(--l1-foreground);
 					font-family: 'Space Mono';

frontend/src/container/DashboardContainer/DashboardSettings/DashboardVariableSettings/VariableItem/VariableItem.tsx

@@ -5,8 +5,7 @@ import { useQuery } from 'react-query';
 import { useSelector } from 'react-redux';
 import { orange } from '@ant-design/colors';
 import { Color } from '@signozhq/design-tokens';
-import { Button, Collapse, Input, Select } from 'antd';
-import { Badge } from '@signozhq/ui/badge';
+import { Button, Collapse, Input, Select, Tag } from 'antd';
 import { Switch } from '@signozhq/ui/switch';
 import { Typography } from '@signozhq/ui/typography';
 import dashboardVariablesQuery from 'api/dashboard/variables/dashboardVariablesQuery';
@@ -543,9 +542,9 @@ function VariableItem({
 								}}
 							>
 								Dynamic
-								<Badge color="robin" className="sidenav-beta-tag">
+								<Tag bordered={false} className="sidenav-beta-tag" color="geekblue">
 									Beta
-								</Badge>
+								</Tag>
 							</Button>
 							<Button
 								type="text"
@@ -600,9 +599,9 @@ function VariableItem({
 								}}
 							>
 								Query
-								<Badge color="amber" className="sidenav-beta-tag">
+								<Tag bordered={false} className="sidenav-beta-tag" color="warning">
 									Not Recommended
-								</Badge>
+								</Tag>
 								<div onClick={(e): void => e.stopPropagation()}>
 									<TextToolTip
 										text="Learn why we don't recommend"
@@ -734,9 +733,7 @@ function VariableItem({
 										<Typography style={{ color: orange[5] }}>{errorPreview}</Typography>
 									) : (
 										map(previewValues, (value, idx) => (
-											<Badge key={`${value}${idx}`} color="vanilla">
-												{value.toString()}
-											</Badge>
+											<Tag key={`${value}${idx}`}>{value.toString()}</Tag>
 										))
 									)}
 								</div>

frontend/src/container/DashboardContainer/DashboardSettings/General/AddTags/AddTags.styles.scss

@@ -1,38 +1,4 @@
-.badgesContainer {
-	display: flex;
-	align-items: center;
-	flex-flow: wrap;
-	gap: 6px;
-}
-
-.badgeContainer {
-	color: var(--bg-sienna-400);
-	font-family: 'Space Mono';
-	font-size: 13px;
-	font-style: normal;
-	font-weight: 500;
-	line-height: 20px;
-	letter-spacing: 0.52px;
-	height: 24px;
-	flex-shrink: 0;
-	border-radius: 50px;
-	border: 1px solid color-mix(in srgb, var(--bg-sienna-500) 20%, transparent);
-	background: color-mix(in srgb, var(--bg-sienna-500) 10%, transparent);
-	padding: 2px 8px;
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-}
-
-.inputContainer {
-	> div {
-		margin: 0;
-	}
-	padding-left: 0px !important;
-	padding-right: 0px !important;
-}
-
-.tagsInput {
+.tags-input {
 	display: flex;
 	border: none;
 	padding: 0px;
@@ -42,7 +8,23 @@
 	flex-shrink: 0;
 }
 
-.editInput {
+.tag-container {
+	color: var(--bg-sienna-400);
+	font-family: 'Space Mono';
+	font-size: 13px;
+	font-style: normal;
+	font-weight: 500;
+	line-height: 20px; /* 153.846% */
+	letter-spacing: 0.52px;
+	height: 24px;
+	flex-shrink: 0;
+	border-radius: 50px;
+	border: 1px solid color-mix(in srgb, var(--bg-sienna-500) 20%, transparent);
+	background: color-mix(in srgb, var(--bg-sienna-500) 10%, transparent);
+	padding: 2px 8px;
+}
+
+.edit-input {
 	.ant-form-item {
 		margin-bottom: 0px;
 	}

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

@@ -1,9 +1,10 @@
 import { Dispatch, SetStateAction, useState } from 'react';
 import { Col, Tooltip } from 'antd';
-import { Badge } from '@signozhq/ui/badge';
 import Input from 'components/Input';
 
-import styles from './AddBadges.module.scss';
+import { InputContainer, NewTagContainer, TagsContainer } from './styles';
+
+import './AddTags.styles.scss';
 
 function AddTags({ tags, setTags }: AddTagsProps): JSX.Element {
 	const [inputValue, setInputValue] = useState<string>('');
@@ -38,11 +39,11 @@ function AddTags({ tags, setTags }: AddTagsProps): JSX.Element {
 	};
 
 	return (
-		<div className={styles.badgesContainer}>
+		<TagsContainer>
 			{tags.map((tag, index) => {
 				if (editInputIndex === index) {
 					return (
-						<Col key={tag} lg={4} className={styles.editInput}>
+						<Col key={tag} lg={4} className="edit-input">
 							<Input
 								size="small"
 								value={editInputValue}
@@ -59,15 +60,11 @@ function AddTags({ tags, setTags }: AddTagsProps): JSX.Element {
 				const isLongTag = tag.length > 20;
 
 				const tagElem = (
-					<Badge
-						key={tag}
-						color="vanilla"
-						className={styles.badgeContainer}
+					<NewTagContainer
 						closable
-						onClose={(e): void => {
-							e.preventDefault();
-							handleClose(tag);
-						}}
+						key={tag}
+						onClose={(): void => handleClose(tag)}
+						className="tag-container"
 					>
 						<span
 							onDoubleClick={(e): void => {
@@ -78,7 +75,7 @@ function AddTags({ tags, setTags }: AddTagsProps): JSX.Element {
 						>
 							{isLongTag ? `${tag.slice(0, 20)}...` : tag}
 						</span>
-					</Badge>
+					</NewTagContainer>
 				);
 
 				return isLongTag ? (
@@ -90,11 +87,11 @@ function AddTags({ tags, setTags }: AddTagsProps): JSX.Element {
 				);
 			})}
 
-			<Col className={styles.inputContainer}>
+			<InputContainer>
 				<Input
 					type="text"
 					value={inputValue}
-					rootClassName={styles.tagsInput}
+					rootClassName="tags-input"
 					placeholder="Start typing your tag name"
 					onChangeHandler={(event): void =>
 						onChangeHandler(event.target.value, setInputValue)
@@ -102,8 +99,8 @@ function AddTags({ tags, setTags }: AddTagsProps): JSX.Element {
 					onBlurHandler={handleInputConfirm}
 					onPressEnterHandler={handleInputConfirm}
 				/>
-			</Col>
-		</div>
+			</InputContainer>
+		</TagsContainer>
 	);
 }
 

frontend/src/container/DashboardContainer/DashboardSettings/General/AddTags/styles.ts

@@ -0,0 +1,30 @@
+import { Col, Tag } from 'antd';
+import styled from 'styled-components';
+
+export const TagsContainer = styled.div`
+	display: flex;
+	align-items: center;
+	flex-flow: wrap;
+	gap: 6px;
+`;
+
+export const NewTagContainer = styled(Tag)`
+	&&& {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		height: 100%;
+
+		svg {
+			margin-right: 0.2rem;
+		}
+	}
+`;
+
+export const InputContainer = styled(Col)`
+	> div {
+		margin: 0;
+	}
+	padding-left: 0px !important;
+	padding-right: 0px !important;
+`;

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

@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next';
 import { Col, Input, Select, Space, Tooltip } from 'antd';
 import { ToggleGroupSimple } from '@signozhq/ui/toggle-group';
 import { Typography } from '@signozhq/ui/typography';
-import AddTags from 'container/DashboardContainer/DashboardSettings/General/AddBadges';
+import AddTags from 'container/DashboardContainer/DashboardSettings/General/AddTags';
 import { useDashboardCursorSyncMode } from 'hooks/dashboard/useDashboardCursorSyncMode';
 import { useSyncTooltipFilterMode } from 'hooks/dashboard/useSyncTooltipFilterMode';
 import { useUpdateDashboard } from 'hooks/dashboard/useUpdateDashboard';

frontend/src/container/FormAlertRules/labels/QueryChip.tsx

@@ -0,0 +1,24 @@
+import { QueryChipContainer, QueryChipItem } from './styles';
+import { ILabelRecord } from './types';
+
+interface QueryChipProps {
+	queryData: ILabelRecord;
+	onRemove: (id: string) => void;
+}
+
+export default function QueryChip({
+	queryData,
+	onRemove,
+}: QueryChipProps): JSX.Element {
+	const { key, value } = queryData;
+	return (
+		<QueryChipContainer>
+			<QueryChipItem
+				closable={key !== 'severity' && key !== 'description'}
+				onClose={(): void => onRemove(key)}
+			>
+				{key}: {value}
+			</QueryChipItem>
+		</QueryChipContainer>
+	);
+}

frontend/src/container/FormAlertRules/labels/index.tsx

@@ -7,8 +7,8 @@ import { map } from 'lodash-es';
 import { Labels } from 'types/api/alerts/def';
 import { v4 as uuid } from 'uuid';
 
-import { Badge } from '@signozhq/ui/badge';
-import { QueryChipContainer, QueryChipItem, SearchContainer } from './styles';
+import QueryChip from './QueryChip';
+import { QueryChipItem, SearchContainer } from './styles';
 import { ILabelRecord } from './types';
 import { createQuery, flattenLabels, prepareLabels } from './utils';
 
@@ -147,24 +147,12 @@ function LabelSelect({
 		<SearchContainer isDarkMode={isDarkMode} disabled={false}>
 			<div style={{ display: 'inline-flex', flexWrap: 'wrap' }}>
 				{queries.length > 0 &&
-					map(queries, (query): JSX.Element => {
-						const isClosable =
-							query.key !== 'severity' && query.key !== 'description';
-						return (
-							<QueryChipContainer key={query.key}>
-								<Badge
-									color="vanilla"
-									closable={isClosable}
-									onClose={(e): void => {
-										e.preventDefault();
-										handleClose(query.key);
-									}}
-								>
-									{query.key}: {query.value}
-								</Badge>
-							</QueryChipContainer>
-						);
-					})}
+					map(
+						queries,
+						(query): JSX.Element => (
+							<QueryChip key={query.key} queryData={query} onRemove={handleClose} />
+						),
+					)}
 			</div>
 			<div>
 				{map(staging, (item) => (

frontend/src/container/FormAlertRules/labels/styles.ts

@@ -1,5 +1,5 @@
 import { grey } from '@ant-design/colors';
-import { Badge } from '@signozhq/ui/badge';
+import { Tag } from 'antd';
 import styled from 'styled-components';
 
 interface SearchContainerProps {
@@ -27,11 +27,8 @@ export const QueryChipContainer = styled.span`
 			background: ${grey.primary}44;
 		}
 	}
-	[data-slot='badge'] {
-		margin-right: 0.1rem;
-	}
 `;
 
-export const QueryChipItem = styled(Badge)`
+export const QueryChipItem = styled(Tag)`
 	margin-right: 0.1rem;
 `;

frontend/src/container/Home/AlertRules/AlertRules.tsx

@@ -1,7 +1,6 @@
 import { useEffect, useState } from 'react';
 import { Link, useLocation } from 'react-router-dom';
-import { Button, Skeleton } from 'antd';
-import { Badge } from '@signozhq/ui/badge';
+import { Button, Skeleton, Tag } from 'antd';
 import logEvent from 'api/common/logEvent';
 import { useListRules } from 'api/generated/services/rules';
 import type { RuletypesRuleDTO } from 'api/generated/services/sigNoz.schemas';
@@ -178,14 +177,12 @@ export default function AlertRules({
 						</div>
 
 						<div className="alert-rule-item-description home-data-item-tag">
-							<Badge color="sienna" variant="outline">
-								{rule?.labels?.severity}
-							</Badge>
+							<Tag color={rule?.labels?.severity}>{rule?.labels?.severity}</Tag>
 
 							{rule.state === 'firing' && (
-								<Badge color="cherry" variant="outline" className="firing-tag">
+								<Tag color="red" className="firing-tag">
 									{rule.state}
-								</Badge>
+								</Tag>
 							)}
 						</div>
 					</div>

frontend/src/container/Home/Dashboards/Dashboards.tsx

@@ -1,7 +1,6 @@
 import { useEffect, useState } from 'react';
 import { Link } from 'react-router-dom';
-import { Button, Skeleton } from 'antd';
-import { Badge } from '@signozhq/ui/badge';
+import { Button, Skeleton, Tag } from 'antd';
 import logEvent from 'api/common/logEvent';
 import ROUTES from 'constants/routes';
 import { useGetAllDashboard } from 'hooks/dashboard/useGetAllDashboard';
@@ -149,9 +148,9 @@ export default function Dashboards({
 
 							<div className="alert-rule-item-description home-data-item-tag">
 								{dashboard.data.tags?.map((tag) => (
-									<Badge color="sienna" variant="outline" key={tag}>
+									<Tag color={tag} key={tag}>
 										{tag}
-									</Badge>
+									</Tag>
 								))}
 							</div>
 						</div>

frontend/src/container/Home/Home.styles.scss

@@ -574,7 +574,30 @@
 
 		.home-data-item-tag {
 			display: flex;
-			gap: 6px;
+
+			.ant-tag {
+				display: flex;
+				padding: 2px 12px;
+				justify-content: center;
+				align-items: center;
+				gap: 4px;
+				border-radius: 20px;
+				border: 1px solid color-mix(in srgb, var(--bg-sienna-500) 20%, transparent);
+				background: color-mix(in srgb, var(--bg-sienna-500) 10%, transparent);
+
+				color: var(--bg-sienna-400);
+				text-align: center;
+				font-family: Inter;
+				font-size: 12px;
+				font-style: normal;
+				line-height: 20px; /* 142.857% */
+				letter-spacing: -0.07px;
+			}
+
+			.firing-tag {
+				color: var(--bg-sakura-500);
+				background: color-mix(in srgb, var(--danger-background) 10%, transparent);
+			}
 		}
 
 		&.services-list-container {

frontend/src/container/Home/SavedViews/SavedViews.tsx

@@ -1,7 +1,6 @@
 import { useEffect, useMemo, useState } from 'react';
 import { Link } from 'react-router-dom';
-import { Button, Skeleton } from 'antd';
-import { Badge } from '@signozhq/ui/badge';
+import { Button, Skeleton, Tag } from 'antd';
 import logEvent from 'api/common/logEvent';
 import { getViewDetailsUsingViewKey } from 'components/ExplorerCard/utils';
 import ROUTES from 'constants/routes';
@@ -250,9 +249,9 @@ export default function SavedViews({
 								}
 
 								return (
-									<Badge color="sienna" key={tag}>
+									<Tag color={tag} key={tag}>
 										{tag}
-									</Badge>
+									</Tag>
 								);
 							})}
 						</div>

frontend/src/container/InfraMonitoringHosts/constants.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Color } from '@signozhq/design-tokens';
-import { Badge } from '@signozhq/ui/badge';
+import { Tag } from 'antd';
 import { Progress } from '@signozhq/ui/progress';
 import { Typography } from '@signozhq/ui/typography';
 import {
@@ -52,14 +52,14 @@ export const hostDetailsMetadataConfig: K8sDetailsMetadataConfig<HostData>[] = [
 		label: 'STATUS',
 		getValue: (h): string => (h.active ? 'ACTIVE' : 'INACTIVE'),
 		render: (value, h): React.ReactNode => (
-			<Badge
-				variant="outline"
+			<Tag
 				className={`${infraHostsStyles.infraMonitoringTags} ${
 					h.active ? infraHostsStyles.tagsActive : infraHostsStyles.tagsInactive
 				}`}
+				bordered
 			>
 				{value}
-			</Badge>
+			</Tag>
 		),
 	},
 	{
@@ -67,9 +67,9 @@ export const hostDetailsMetadataConfig: K8sDetailsMetadataConfig<HostData>[] = [
 		getValue: (h): string => h.os || '-',
 		render: (value): React.ReactNode =>
 			value !== '-' ? (
-				<Badge variant="outline" className={infraHostsStyles.infraMonitoringTags}>
+				<Tag className={infraHostsStyles.infraMonitoringTags} bordered>
 					{value}
-				</Badge>
+				</Tag>
 			) : (
 				<Typography.Text>-</Typography.Text>
 			),

frontend/src/container/InfraMonitoringHosts/table.config.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
-import { Tooltip } from 'antd';
-import { Badge } from '@signozhq/ui/badge';
+import { Tag, Tooltip } from 'antd';
 import { HostData } from 'api/infraMonitoring/getHostLists';
 import TanStackTable, { TableColumnDef } from 'components/TanStackTableView';
 import { getGroupByEl } from 'container/InfraMonitoringK8s/Base/utils';
@@ -93,13 +92,14 @@ export const hostColumnsConfig: TableColumnDef<HostData>[] = [
 		cell: ({ value }): React.ReactNode => {
 			const active = value as boolean;
 			return (
-				<Badge
+				<Tag
+					bordered
 					className={`${styles.statusTag} ${
 						active ? styles.statusTagActive : styles.statusTagInactive
 					}`}
 				>
 					{active ? 'ACTIVE' : 'INACTIVE'}
-				</Badge>
+				</Tag>
 			);
 		},
 	},

frontend/src/container/InfraMonitoringK8s/Base/K8sHeader.module.scss

@@ -14,7 +14,7 @@
 			font-size: 12px;
 		}
 
-		:global([data-slot='badge'] .ant-typography) {
+		:global(.ant-tag .ant-typography) {
 			font-size: 12px;
 		}
 	}

frontend/src/container/InfraMonitoringK8s/EntityDetailsUtils/EntityEvents/EntityEvents.module.scss

@@ -19,7 +19,7 @@
 			font-size: 12px;
 		}
 
-		:global([data-slot='badge'] .ant-typography) {
+		:global(.ant-tag .ant-typography) {
 			font-size: 12px;
 		}
 	}

frontend/src/container/InfraMonitoringK8s/EntityDetailsUtils/EntityLogs/EntityLogs.module.scss

@@ -19,7 +19,7 @@
 			font-size: 12px;
 		}
 
-		:global([data-slot='badge'] .ant-typography) {
+		:global(.ant-tag .ant-typography) {
 			font-size: 12px;
 		}
 	}

frontend/src/container/InfraMonitoringK8s/EntityDetailsUtils/EntityTraces/EntityTraces.module.scss

@@ -19,7 +19,7 @@
 			font-size: 12px;
 		}
 
-		:global([data-slot='badge'] .ant-typography) {
+		:global(.ant-tag .ant-typography) {
 			font-size: 12px;
 		}
 	}

frontend/src/container/InfraMonitoringK8s/EntityDetailsUtils/EntityTraces/traceListColumns.tsx

@@ -1,5 +1,4 @@
-import { TableColumnsType as ColumnsType } from 'antd';
-import { Badge } from '@signozhq/ui/badge';
+import { TableColumnsType as ColumnsType, Tag } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import { getMs } from 'container/Trace/Filters/Panel/PanelBody/Duration/util';
@@ -94,9 +93,9 @@ export const getTraceListColumns = (
 				if (primaryKey === 'httpMethod' || primaryKey === 'responseStatusCode') {
 					return (
 						<BlockLink to={getTraceLink(itemData)} openInNewTab>
-							<Badge data-testid={key} color="sakura">
+							<Tag data-testid={key} color="magenta">
 								{getValueForKey(itemData, key)}
-							</Badge>
+							</Tag>
 						</BlockLink>
 					);
 				}

frontend/src/container/InfraMonitoringK8s/EntityDetailsUtils/entityDetails.styles.scss

@@ -213,7 +213,7 @@
 					font-size: 12px;
 				}
 
-				[data-slot='badge'] .ant-typography {
+				.ant-tag .ant-typography {
 					font-size: 12px;
 				}
 			}
@@ -349,7 +349,7 @@
 				font-size: 12px;
 			}
 
-			[data-slot='badge'] .ant-typography {
+			.ant-tag .ant-typography {
 				font-size: 12px;
 			}
 		}

frontend/src/container/IngestionSettings/MultiIngestionSettings.tsx

@@ -18,6 +18,7 @@ import {
 	Table,
 	TablePaginationConfig,
 	TableProps as AntDTableProps,
+	Tag,
 	Tooltip,
 } from 'antd';
 import { Switch } from '@signozhq/ui/switch';
@@ -40,7 +41,7 @@ import {
 } from 'api/generated/services/sigNoz.schemas';
 import { AxiosError } from 'axios';
 import { getYAxisFormattedValue } from 'components/Graph/yAxisConfig';
-import Badges from 'components/Badges/Badges';
+import Tags from 'components/Tags/Tags';
 import { UniversalYAxisUnit } from 'components/YAxisUnitSelector/types';
 import { SOMETHING_WENT_WRONG } from 'constants/api';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
@@ -1054,10 +1055,7 @@ function MultiIngestionSettings(): JSX.Element {
 													<div className="ingestion-key-tags">
 														{APIKey.tags.map((tag, index) => (
 															// eslint-disable-next-line react/no-array-index-key
-															<Badge key={`${tag}-${index}`} color="vanilla">
-																{' '}
-																{tag}{' '}
-															</Badge>
+															<Tag key={`${tag}-${index}`}> {tag} </Tag>
 														))}
 													</div>
 												</div>
@@ -1836,7 +1834,7 @@ function MultiIngestionSettings(): JSX.Element {
 					</Form.Item>
 
 					<Form.Item name="tags" label="Tags">
-						<Badges tags={updatedTags} setTags={setUpdatedTags} />
+						<Tags tags={updatedTags} setTags={setUpdatedTags} />
 					</Form.Item>
 
 					<Form.Item
@@ -1926,7 +1924,7 @@ function MultiIngestionSettings(): JSX.Element {
 					</Form.Item>
 
 					<Form.Item name="tags" label="Tags">
-						<Badges tags={updatedTags} setTags={setUpdatedTags} />
+						<Tags tags={updatedTags} setTags={setUpdatedTags} />
 					</Form.Item>
 				</Form>
 			</Modal>

frontend/src/container/ListAlertRules/ListAlert.tsx

@@ -310,7 +310,9 @@ function ListAlert({ allAlertRules, refetch }: ListAlertProps): JSX.Element {
 					return <Typography>-</Typography>;
 				}
 
-				return <LabelColumn labels={withOutSeverityKeys} value={value} />;
+				return (
+					<LabelColumn labels={withOutSeverityKeys} value={value} color="magenta" />
+				);
 			},
 		},
 	];

frontend/src/container/ListAlertRules/TableComponents/Status.tsx

@@ -1,46 +1,26 @@
-import { Badge } from '@signozhq/ui/badge';
+import { Tag } from 'antd';
 import type { RuletypesRuleDTO } from 'api/generated/services/sigNoz.schemas';
 
 function Status({ status }: StatusProps): JSX.Element {
 	switch (status) {
 		case 'inactive': {
-			return (
-				<Badge color="forest" variant="outline">
-					OK
-				</Badge>
-			);
+			return <Tag color="green">OK</Tag>;
 		}
 
 		case 'pending': {
-			return (
-				<Badge color="amber" variant="outline">
-					Pending
-				</Badge>
-			);
+			return <Tag color="orange">Pending</Tag>;
 		}
 
 		case 'firing': {
-			return (
-				<Badge color="cherry" variant="outline">
-					Firing
-				</Badge>
-			);
+			return <Tag color="red">Firing</Tag>;
 		}
 
 		case 'disabled': {
-			return (
-				<Badge color="vanilla" variant="outline">
-					Disabled
-				</Badge>
-			);
+			return <Tag>Disabled</Tag>;
 		}
 
 		default: {
-			return (
-				<Badge color="vanilla" variant="outline">
-					Unknown
-				</Badge>
-			);
+			return <Tag color="default">Unknown</Tag>;
 		}
 	}
 }

frontend/src/container/ListOfDashboard/DashboardsList.tsx

@@ -21,9 +21,9 @@ import {
 	Popover,
 	Skeleton,
 	Table,
+	Tag,
 	Tooltip,
 } from 'antd';
-import { Badge } from '@signozhq/ui/badge';
 import { Switch } from '@signozhq/ui/switch';
 import { Typography } from '@signozhq/ui/typography';
 import type { TableProps } from 'antd/lib';
@@ -419,15 +419,15 @@ function DashboardsList(): JSX.Element {
 								{dashboard?.tags && dashboard.tags.length > 0 && (
 									<div className="dashboard-tags">
 										{dashboard.tags.slice(0, 3).map((tag) => (
-											<Badge className="tag" color="vanilla" key={tag}>
+											<Tag className="tag" key={tag}>
 												{tag}
-											</Badge>
+											</Tag>
 										))}
 
 										{dashboard.tags.length > 3 && (
-											<Badge className="tag" color="vanilla" key={dashboard.tags[3]}>
+											<Tag className="tag" key={dashboard.tags[3]}>
 												+ <span> {dashboard.tags.length - 3} </span>
-											</Badge>
+											</Tag>
 										)}
 									</div>
 								)}

frontend/src/container/LogDetailedView/FieldRenderer.styles.ts

@@ -1,7 +1,7 @@
-import { Badge } from '@signozhq/ui/badge';
+import { Tag } from 'antd';
 import styled from 'styled-components';
 
-export const TagContainer = styled(Badge)`
+export const TagContainer = styled(Tag)`
 	&&& {
 		border-color: var(--bg-slate-400);
 		border-radius: 0.25rem;

frontend/src/container/LogDetailedView/Overview.styles.scss

@@ -84,7 +84,7 @@
 		padding-top: 12px;
 	}
 
-	[data-slot='badge'] {
+	.ant-tag-borderless {
 		border-radius: 2px;
 		background: color-mix(in srgb, var(--bg-robin-400) 8%, transparent);
 	}

frontend/src/container/LogDetailedView/Overview.tsx

@@ -3,9 +3,8 @@ import MEditor, { EditorProps, Monaco } from '@monaco-editor/react';
 import { Color } from '@signozhq/design-tokens';
 import { Button } from '@signozhq/ui/button';
 import { Switch } from '@signozhq/ui/switch';
-import { Collapse, Input } from 'antd';
+import { Collapse, Input, Tag } from 'antd';
 import { Divider } from '@signozhq/ui/divider';
-import { Badge } from '@signozhq/ui/badge';
 import { Typography } from '@signozhq/ui/typography';
 import { AddToQueryHOCProps } from 'components/Logs/AddToQueryHOC';
 import { ChangeViewFunctionType } from 'container/ExplorerOptions/types';
@@ -106,11 +105,11 @@ function Overview({
 					{
 						key: '1',
 						label: (
-							<Badge color="vanilla">
+							<Tag bordered={false}>
 								<Typography.Text style={{ color: Color.BG_ROBIN_400 }}>
 									body
 								</Typography.Text>
-							</Badge>
+							</Tag>
 						),
 						children: (
 							<div className="logs-body-content">
@@ -144,7 +143,7 @@ function Overview({
 								</div>
 							</div>
 						),
-						// extra: <Badge className="tag" color="vanilla">JSON</Badge>,
+						// extra: <Tag className="tag">JSON</Tag>,
 						className: 'collapse-content',
 					},
 				]}
@@ -165,11 +164,11 @@ function Overview({
 								className="attribute-tab-header"
 								onClick={toogleAttributePanelOpenState}
 							>
-								<Badge color="vanilla">
+								<Tag bordered={false}>
 									<Typography.Text style={{ color: Color.BG_ROBIN_400 }}>
 										Attributes
 									</Typography.Text>
-								</Badge>
+								</Tag>
 
 								{isAttributesExpanded && (
 									<Button

frontend/src/container/LogExplorerQuerySection/LogsExplorerQuerySection.styles.scss

@@ -11,7 +11,7 @@
 			font-size: 12px;
 		}
 
-		[data-slot='badge'] .ant-typography {
+		.ant-tag .ant-typography {
 			font-size: 12px;
 		}
 	}

frontend/src/container/MySettings/index.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 import { useMutation } from 'react-query';
-import { Badge } from '@signozhq/ui/badge';
+import { Tag } from 'antd';
 import { Switch } from '@signozhq/ui/switch';
 import { ToggleGroupSimple } from '@signozhq/ui/toggle-group';
 import setLocalStorageApi from 'api/browser/localstorage/set';
@@ -65,7 +65,9 @@ function MySettings(): JSX.Element {
 			label: (
 				<div className="theme-option">
 					<Sun size={12} data-testid="light-theme-icon" /> Light{' '}
-					<Badge color="robin">Beta</Badge>
+					<Tag bordered={false} color="geekblue">
+						Beta
+					</Tag>
 				</div>
 			),
 			value: 'light',

frontend/src/container/NewWidget/styles.ts

@@ -1,3 +1,4 @@
+import { Tag as AntDTag } from 'antd';
 import styled from 'styled-components';
 
 export const Container = styled.div`
@@ -18,3 +19,7 @@ export const PanelContainer = styled.div`
 	display: flex;
 	overflow-y: auto;
 `;
+
+export const Tag = styled(AntDTag)`
+	margin: 0;
+`;

frontend/src/container/PipelinePage/PipelineListsView/TableComponents/Tags.tsx

@@ -1,12 +1,12 @@
-import { Badge } from '@signozhq/ui/badge';
+import { Tag } from 'antd';
 
 function Tags({ tags }: TagsProps): JSX.Element {
 	return (
 		<span>
 			{tags?.map((tag) => (
-				<Badge color="sakura" key={tag}>
+				<Tag color="magenta" key={tag}>
 					{tag}
-				</Badge>
+				</Tag>
 			))}
 		</span>
 	);

frontend/src/container/PipelinePage/components/TagInput.tsx

@@ -1,8 +1,7 @@
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { CircleAlert, CircleX } from '@signozhq/icons';
-import { Button, Input, InputRef, message, Modal, Tooltip } from 'antd';
-import { Badge } from '@signozhq/ui/badge';
+import { Button, Input, InputRef, message, Modal, Tag, Tooltip } from 'antd';
 
 import { tagInputStyle } from '../PipelineListsView/config';
 import { TagInputWrapper } from './styles';
@@ -91,26 +90,22 @@ function TagInput({
 		}
 		const isLongTag = tag.length > 20;
 		const tagElem = (
-			<Badge
+			<Tag
 				key={tag}
-				color="vanilla"
-				style={{ userSelect: 'none' }}
 				closable
-				onClose={(e): void => {
-					e.preventDefault();
-					handleClose(tag)();
-				}}
+				style={{ userSelect: 'none' }}
+				onClose={handleClose(tag)}
 			>
 				<span
-					onDoubleClick={(ev): void => {
+					onDoubleClick={(e): void => {
 						setEditInputIndex(index);
 						setEditInputValue(tag);
-						ev.preventDefault();
+						e.preventDefault();
 					}}
 				>
 					{isLongTag ? `${tag.slice(0, 20)}...` : tag}
 				</span>
-			</Badge>
+			</Tag>
 		);
 		return isLongTag ? (
 			<Tooltip title={tag} key={tag}>

frontend/src/container/PipelinePage/tests/__snapshots__/Tags.test.tsx.snap

@@ -4,20 +4,12 @@ exports[`PipelinePage container test should render Tags section 1`] = `
 <DocumentFragment>
   <span>
     <span
-      class="_badge_1etd5_1"
-      data-capitalize="false"
-      data-color="sakura"
-      data-slot="badge"
-      data-variant="default"
+      class="ant-tag ant-tag-magenta css-dev-only-do-not-override-2i2tap"
     >
       server
     </span>
     <span
-      class="_badge_1etd5_1"
-      data-capitalize="false"
-      data-color="sakura"
-      data-slot="badge"
-      data-variant="default"
+      class="ant-tag ant-tag-magenta css-dev-only-do-not-override-2i2tap"
     >
       app
     </span>

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

@@ -53,6 +53,12 @@
 		margin-bottom: 8px;
 		overflow: auto;
 		max-height: 100px;
+		.ant-tag {
+			user-select: none;
+			height: 28px;
+			display: inline-flex;
+			align-items: center;
+		}
 	}
 
 	.ant-select {
@@ -103,8 +109,61 @@
 }
 
 .alert-rule-tags {
+	.ant-tag {
+		display: flex;
+		align-items: center;
+		border: 1px solid color-mix(in srgb, var(--bg-robin-400) 20%, transparent);
+		background: color-mix(in srgb, var(--bg-robin-400) 10%, transparent);
+		box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
+		padding-right: 0px;
+		border-right: 0;
+		color: var(--bg-robin-400);
+
+		.ant-tag-close-icon {
+			height: 28px;
+			width: 20px !important;
+			justify-content: center;
+			border-left: 1px solid
+				color-mix(in srgb, var(--bg-robin-400) 20%, transparent);
+			border-radius: 0px 2px 2px 0px;
+			background: color-mix(in srgb, var(--bg-robin-400) 30%, transparent);
+			border-right: 1px solid
+				color-mix(in srgb, var(--bg-robin-400) 20%, transparent);
+			margin-right: 0px;
+
+			svg {
+				fill: var(--primary-background);
+			}
+		}
+	}
 	.non-closable-tag {
 		padding-right: 7px;
+		border-right: 1px solid
+			color-mix(in srgb, var(--bg-robin-400) 20%, transparent);
+	}
+
+	.red-tag.non-closable-tag {
+		border-right: 1px solid
+			color-mix(in srgb, var(--bg-sakura-500) 20%, transparent) !important;
+	}
+
+	.red-tag {
+		border: 1px solid color-mix(in srgb, var(--bg-sakura-500) 20%, transparent);
+		background: color-mix(in srgb, var(--bg-sakura-500) 10%, transparent);
+		border-right: 0;
+		color: var(--bg-sakura-400);
+
+		.ant-tag-close-icon {
+			background: color-mix(in srgb, var(--bg-sakura-500) 30%, transparent);
+			border-left: 1px solid
+				color-mix(in srgb, var(--bg-sakura-500) 20%, transparent);
+			border-right: 1px solid
+				color-mix(in srgb, var(--bg-sakura-500) 20%, transparent);
+
+			svg {
+				fill: var(--bg-sakura-500);
+			}
+		}
 	}
 }
 
@@ -212,6 +271,9 @@
 				line-height: 18px;
 				letter-spacing: -0.07px;
 			}
+			.ant-tag {
+				border-radius: 20px;
+			}
 
 			.action-btn {
 				display: flex;
@@ -266,6 +328,12 @@
 				width: 540px;
 				max-height: 100px;
 				overflow: auto;
+
+				.ant-tag {
+					height: 28px;
+					display: flex;
+					align-items: center;
+				}
 			}
 			.ant-collapse-content-active {
 				border-top: 0;

frontend/src/container/PlannedDowntime/PlannedDowntimeList.tsx

@@ -1,8 +1,7 @@
 import React, { ReactNode, useEffect } from 'react';
 import { UseQueryResult } from 'react-query';
 import { Color } from '@signozhq/design-tokens';
-import { Collapse, Flex, Space, Table, TableProps, Tooltip } from 'antd';
-import { Badge } from '@signozhq/ui/badge';
+import { Collapse, Flex, Space, Table, TableProps, Tag, Tooltip } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import type { DefaultOptionType } from 'antd/es/select';
 import type {
@@ -49,24 +48,21 @@ export function AlertRuleTags(props: AlertRuleTagsProps): JSX.Element {
 			{selectedTags?.map((tag: DefaultOptionType, index: number) => {
 				const isLongTag = (tag?.label as string)?.length > 20;
 				const tagElem = (
-					<Badge
+					<Tag
 						key={tag.value}
-						color={index % 2 ? 'sakura' : 'robin'}
-						variant="outline"
+						onClose={(): void => handleClose?.(tag?.value)}
+						closable={closable}
 						className={cx(
 							{ 'red-tag': index % 2 },
 							{ 'non-closable-tag': !closable },
 						)}
-						closable={closable}
-						onClose={(e): void => {
-							e.preventDefault();
-							handleClose?.(tag?.value);
-						}}
 					>
-						{isLongTag
-							? `${(tag?.label as string | null)?.slice(0, 20)}...`
-							: tag?.label}
-					</Badge>
+						<span>
+							{isLongTag
+								? `${(tag?.label as string | null)?.slice(0, 20)}...`
+								: tag?.label}
+						</span>
+					</Tag>
 				);
 				return isLongTag ? (
 					<Tooltip title={tag?.label} key={tag?.value}>
@@ -97,7 +93,7 @@ function HeaderComponent({
 		<Flex className="header-content" justify="space-between">
 			<Flex gap={8}>
 				<Typography>{name}</Typography>
-				<Badge color="vanilla">{duration}</Badge>
+				<Tag>{duration}</Tag>
 			</Flex>
 
 			{isCrudEnabled && (
@@ -159,7 +155,9 @@ export function CollapseListContent({
 				created_by_name ? (
 					<Flex gap={8}>
 						<Typography>{created_by_name}</Typography>
-						{created_by_email && <Badge color="vanilla">{created_by_email}</Badge>}
+						{created_by_email && (
+							<Tag style={{ borderRadius: 20 }}>{created_by_email}</Tag>
+						)}
 					</Flex>
 				) : (
 					'-'
@@ -206,9 +204,7 @@ export function CollapseListContent({
 						selectedTags={alertOptions}
 					/>
 				) : (
-					<Badge className="all-alerts-tag" color="vanilla">
-						All alert rules
-					</Badge>
+					<Tag className="all-alerts-tag">All alert rules</Tag>
 				),
 			)}
 		</Flex>

frontend/src/container/QueryBuilder/components/HavingFilterTag/HavingFilterTag.styled.ts

@@ -1,11 +1,11 @@
-import { Badge } from '@signozhq/ui/badge';
+import { Tag } from 'antd';
 import styled from 'styled-components';
 
 export const StyledText = styled.span`
 	cursor: pointer;
 `;
 
-export const StyledTag = styled(Badge)`
+export const StyledTag = styled(Tag)`
 	margin-top: 0.125rem;
 	margin-bottom: 0.125rem;
 	padding-left: 0.5rem;

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

@@ -12,14 +12,7 @@ export function HavingFilterTag({
 	};
 
 	return (
-		<StyledTag
-			color="vanilla"
-			closable={closable}
-			onClose={(e): void => {
-				e.preventDefault();
-				onClose();
-			}}
-		>
+		<StyledTag closable={closable} onClose={onClose}>
 			<span role="button" tabIndex={0} onClick={handleClick}>
 				<StyledText>{value}</StyledText>
 			</span>

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

@@ -1,18 +0,0 @@
-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

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

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

@@ -1,628 +0,0 @@
-/* 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

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

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

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

frontend/src/container/QueryBuilder/filters/QueryBuilderSearch/index.tsx

@@ -9,8 +9,7 @@ import {
 	useState,
 } from 'react';
 import { useLocation } from 'react-router-dom';
-import { Button, Select, Spin, Tooltip } from 'antd';
-import { Badge } from '@signozhq/ui/badge';
+import { Button, Select, Spin, Tag, Tooltip } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import cx from 'classnames';
 import {
@@ -200,14 +199,7 @@ function QueryBuilderSearch({
 		const isDisabled = !!searchValue;
 
 		return (
-			<Badge
-				color="vanilla"
-				closable={!searchValue && closable}
-				onClose={(e): void => {
-					e.preventDefault();
-					onCloseHandler();
-				}}
-			>
+			<Tag closable={!searchValue && closable} onClose={onCloseHandler}>
 				<Tooltip title={chipValue}>
 					<TypographyText
 						$isInNin={isInNin}
@@ -221,7 +213,7 @@ function QueryBuilderSearch({
 						{chipValue}
 					</TypographyText>
 				</Tooltip>
-			</Badge>
+			</Tag>
 		);
 	};
 

frontend/src/container/QueryBuilder/filters/QueryBuilderSearch/style.ts

@@ -1,5 +1,5 @@
 import { Check } from '@signozhq/icons';
-import { Badge } from '@signozhq/ui/badge';
+import { Tag } from 'antd';
 import styled from 'styled-components';
 
 export const TypographyText = styled.span<{
@@ -22,7 +22,7 @@ export const StyledCheckOutlined = styled(Check)`
 	float: right;
 `;
 
-export const TagContainer = styled(Badge)`
+export const TagContainer = styled(Tag)`
 	&&& {
 		display: inline-block;
 		border-radius: 3px;

frontend/src/container/QueryBuilder/filters/QueryBuilderSearchV2/QueryBuilderSearchV2.styles.scss

@@ -225,7 +225,7 @@
 	}
 
 	.qb-search-bar-tokenised-tags {
-		[data-slot='badge'] {
+		.ant-tag {
 			display: flex;
 			align-items: center;
 			border-radius: 2px 0px 0px 2px;
@@ -244,7 +244,7 @@
 				padding: 2px 6px;
 			}
 
-			.close-icon {
+			.ant-tag-close-icon {
 				display: flex;
 				align-items: center;
 				justify-content: center;
@@ -265,7 +265,7 @@
 					font-size: 14px;
 				}
 
-				.close-icon {
+				.ant-tag-close-icon {
 					background: color-mix(in srgb, var(--bg-aqua-400) 6%, transparent);
 				}
 			}
@@ -278,7 +278,7 @@
 					font-size: 14px;
 				}
 
-				.close-icon {
+				.ant-tag-close-icon {
 					background: color-mix(in srgb, var(--bg-sienna-400) 10%, transparent);
 				}
 			}
@@ -292,7 +292,7 @@
 					font-size: 14px;
 				}
 
-				.close-icon {
+				.ant-tag-close-icon {
 					background: color-mix(in srgb, var(--bg-robin-400) 10%, transparent);
 				}
 			}

frontend/src/container/QueryBuilder/filters/QueryBuilderSearchV2/QueryBuilderSearchV2.tsx

@@ -8,8 +8,7 @@ import {
 	useRef,
 	useState,
 } from 'react';
-import { Select, Spin, Tooltip } from 'antd';
-import { Badge } from '@signozhq/ui/badge';
+import { Select, Spin, Tag, Tooltip } from 'antd';
 import cx from 'classnames';
 import {
 	DATA_TYPE_VS_ATTRIBUTE_VALUES_KEY,
@@ -955,14 +954,10 @@ function QueryBuilderSearchV2(
 
 		return (
 			<span className="qb-search-bar-tokenised-tags">
-				<Badge
-					color="vanilla"
-					className={tagDetails?.key?.type || ''}
+				<Tag
 					closable={!searchValue && closable}
-					onClose={(e): void => {
-						e.preventDefault();
-						onCloseHandler();
-					}}
+					onClose={onCloseHandler}
+					className={tagDetails?.key?.type || ''}
 				>
 					<Tooltip title={chipValue}>
 						<TypographyText
@@ -977,7 +972,7 @@ function QueryBuilderSearchV2(
 							{chipValue}
 						</TypographyText>
 					</Tooltip>
-				</Badge>
+				</Tag>
 			</span>
 		);
 	};

frontend/src/container/QueryBuilder/type.ts

@@ -1,4 +1,6 @@
 import { IQueryBuilderState } from 'constants/queryBuilder';
+import { QueryBuilderProps } from 'container/QueryBuilder/QueryBuilder.interfaces';
+import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 
 export interface InitialStateI {
 	search: string;
@@ -18,3 +20,19 @@ 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/ResourceAttributeFilterV2/ResourceAttributesFilter.styles.scss

@@ -10,7 +10,7 @@
 			font-size: 12px;
 		}
 
-		[data-slot='badge'] .ant-typography {
+		.ant-tag .ant-typography {
 			font-size: 12px;
 		}
 	}

frontend/src/container/ResourceAttributesFilter/components/QueryChip/QueryChip.tsx

@@ -18,22 +18,13 @@ function QueryChip({ queryData, onClose }: IQueryChipProps): JSX.Element {
 		featureFlags?.find((flag) => flag.name === FeatureKeys.DOT_METRICS_ENABLED)
 			?.active || false;
 
-	const isClosable =
-		queryData.tagKey !== getResourceDeploymentKeys(dotMetricsEnabled);
-
 	return (
 		<QueryChipContainer>
-			<QueryChipItem color="vanilla">
-				{convertMetricKeyToTrace(queryData.tagKey)}
-			</QueryChipItem>
-			<QueryChipItem color="vanilla">{queryData.operator}</QueryChipItem>
+			<QueryChipItem>{convertMetricKeyToTrace(queryData.tagKey)}</QueryChipItem>
+			<QueryChipItem>{queryData.operator}</QueryChipItem>
 			<QueryChipItem
-				color="vanilla"
-				closable={isClosable}
-				onClose={(e): void => {
-					e.preventDefault();
-					onCloseHandler();
-				}}
+				closable={queryData.tagKey !== getResourceDeploymentKeys(dotMetricsEnabled)}
+				onClose={onCloseHandler}
 			>
 				{queryData.tagValue.join(', ')}
 			</QueryChipItem>

frontend/src/container/ResourceAttributesFilter/styles.ts

@@ -1,5 +1,5 @@
 import { grey } from '@ant-design/colors';
-import { Badge } from '@signozhq/ui/badge';
+import { Tag } from 'antd';
 import styled from 'styled-components';
 
 export const SearchContainer = styled.div`
@@ -23,6 +23,6 @@ export const QueryChipContainer = styled.span`
 	}
 `;
 
-export const QueryChipItem = styled(Badge)`
+export const QueryChipItem = styled(Tag)`
 	margin-right: 0.1rem;
 `;

frontend/src/container/RoutingPolicies/RoutingPolicyListItem.tsx

@@ -1,6 +1,5 @@
 import { Color } from '@signozhq/design-tokens';
-import { Button, Collapse, Flex } from 'antd';
-import { Badge } from '@signozhq/ui/badge';
+import { Button, Collapse, Flex, Tag } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import { PenLine, Trash2 } from '@signozhq/icons';
@@ -119,9 +118,7 @@ function PolicyListItemContent({
 				<Typography>Channels</Typography>
 				<div>
 					{routingPolicy.channels.map((channel) => (
-						<Badge key={channel} color="vanilla">
-							{channel}
-						</Badge>
+						<Tag key={channel}>{channel}</Tag>
 					))}
 				</div>
 			</div>

frontend/src/container/SideNav/NavItem/NavItem.tsx

@@ -1,5 +1,4 @@
-import { Tooltip } from 'antd';
-import { Badge } from '@signozhq/ui/badge';
+import { Tag, Tooltip } from 'antd';
 import cx from 'classnames';
 import { Pin, PinOff } from '@signozhq/icons';
 
@@ -59,17 +58,17 @@ export default function NavItem({
 
 				{isBeta && (
 					<div className="nav-item-beta">
-						<Badge color="robin" className="sidenav-beta-tag">
+						<Tag bordered={false} className="sidenav-beta-tag">
 							Beta
-						</Badge>
+						</Tag>
 					</div>
 				)}
 
 				{isNew && (
 					<div className="nav-item-new">
-						<Badge color="robin" className="sidenav-new-tag">
+						<Tag bordered={false} className="sidenav-new-tag">
 							New
-						</Badge>
+						</Tag>
 					</div>
 				)}
 

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

@@ -1,8 +1,7 @@
 import { HTMLAttributes } from 'react';
 // eslint-disable-next-line no-restricted-imports
 import { useDispatch, useSelector } from 'react-redux';
-import { TableColumnsType as ColumnsType, TableProps } from 'antd';
-import { Badge } from '@signozhq/ui/badge';
+import { TableColumnsType as ColumnsType, TableProps, Tag } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import { ResizeTable } from 'components/ResizeTable';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
@@ -71,7 +70,7 @@ function TraceTable(): JSX.Element {
 		if (value.length === 0) {
 			return <Typography>-</Typography>;
 		}
-		return <Badge color="sakura">{value}</Badge>;
+		return <Tag color="magenta">{value}</Tag>;
 	};
 
 	const columns: ColumnsType<TableType> = [

frontend/src/container/TracesExplorer/ListView/utils.tsx

@@ -1,6 +1,6 @@
 import { Link } from 'react-router-dom';
 import type { TableColumnsType as ColumnsType } from 'antd';
-import { Badge } from '@signozhq/ui/badge';
+import { Tag } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import { TelemetryFieldKey } from 'api/v5/v5';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
@@ -107,9 +107,9 @@ export const getListColumns = (
 					) {
 						return (
 							<BlockLink to={getTraceLink(item)} openInNewTab={false}>
-								<Badge data-testid={name} color="sakura" variant="outline">
+								<Tag data-testid={name} color="magenta">
 									{value}
-								</Badge>
+								</Tag>
 							</BlockLink>
 						);
 					}

frontend/src/container/TriggeredAlerts/Filter.tsx

@@ -1,7 +1,6 @@
 import { useCallback, useMemo, useRef } from 'react';
 import type { SelectProps } from 'antd';
-import { Badge } from '@signozhq/ui/badge';
-import { Tooltip } from 'antd';
+import { Tag, Tooltip } from 'antd';
 import type { BaseOptionType } from 'antd/es/select';
 import { Alerts } from 'types/api/alerts/getTriggered';
 
@@ -84,17 +83,14 @@ function Filter({
 		const { closable, onClose, label } = props;
 
 		return (
-			<Badge
-				color="sakura"
-				style={{ marginRight: 3 }}
+			<Tag
+				color="magenta"
 				closable={closable}
-				onClose={(e): void => {
-					e.preventDefault();
-					onClose();
-				}}
+				onClose={onClose}
+				style={{ marginRight: 3 }}
 			>
 				{label}
-			</Badge>
+			</Tag>
 		);
 	};
 

frontend/src/container/TriggeredAlerts/FilteredTable/ExapandableRow.tsx

@@ -1,4 +1,4 @@
-import { Badge } from '@signozhq/ui/badge';
+import { Tag } from 'antd';
 import { Typography } from '@signozhq/ui/typography';
 import { DATE_TIME_FORMATS } from 'constants/dateTimeFormats';
 import { useTimezone } from 'providers/Timezone';
@@ -51,7 +51,7 @@ function ExapandableRow({ allAlerts }: ExapandableRowProps): JSX.Element {
 						<TableCell minWidth="90px" overflowX="scroll">
 							<div>
 								{tags.map((e) => (
-									<Badge color="vanilla" key={e}>{`${e}:${labels[e]}`}</Badge>
+									<Tag key={e}>{`${e}:${labels[e]}`}</Tag>
 								))}
 							</div>
 						</TableCell>

frontend/src/container/TriggeredAlerts/FilteredTable/TableRow.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { SquareMinus, SquarePlus } from '@signozhq/icons';
-import { Badge } from '@signozhq/ui/badge';
+import { Tag } from 'antd';
 import { Alerts } from 'types/api/alerts/getTriggered';
 
 import ExapandableRow from './ExapandableRow';
@@ -26,9 +26,9 @@ function TableRowComponent({
 						</IconContainer>
 						<>
 							{tags.map((tag) => (
-								<Badge color="sakura" key={tag}>
+								<Tag color="magenta" key={tag}>
 									{tag}
-								</Badge>
+								</Tag>
 							))}
 						</>
 					</StatusContainer>

frontend/src/container/TriggeredAlerts/NoFilterTable.tsx

@@ -59,7 +59,9 @@ function NoFilterTable({
 					return <Typography>-</Typography>;
 				}
 
-				return <LabelColumn labels={withOutSeverityKeys} value={labels} />;
+				return (
+					<LabelColumn labels={withOutSeverityKeys} value={labels} color="magenta" />
+				);
 			},
 		},
 		{

frontend/src/container/TriggeredAlerts/TableComponents/AlertStatus.tsx

@@ -1,21 +1,21 @@
-import { Badge } from '@signozhq/ui/badge';
+import { Tag } from 'antd';
 
 function Severity({ severity }: SeverityProps): JSX.Element {
 	switch (severity) {
 		case 'unprocessed': {
-			return <Badge color="forest">UnProcessed</Badge>;
+			return <Tag color="green">UnProcessed</Tag>;
 		}
 
 		case 'active': {
-			return <Badge color="cherry">Firing</Badge>;
+			return <Tag color="red">Firing</Tag>;
 		}
 
 		case 'suppressed': {
-			return <Badge color="cherry">Suppressed</Badge>;
+			return <Tag color="red">Suppressed</Tag>;
 		}
 
 		default: {
-			return <Badge color="vanilla">Unknown Status</Badge>;
+			return <Tag color="default">Unknown Status</Tag>;
 		}
 	}
 }

frontend/src/periscope/components/BetaTag/BetaTag.tsx

@@ -1,5 +1,9 @@
-import { Badge } from '@signozhq/ui/badge';
+import { Tag } from 'antd';
 
 export default function BetaTag(): JSX.Element {
-	return <Badge color="robin">Beta</Badge>;
+	return (
+		<Tag bordered={false} color="geekblue">
+			Beta
+		</Tag>
+	);
 }

frontend/src/periscope/components/Tabs2/Tabs2.tsx

@@ -1,7 +1,6 @@
 import { useState } from 'react';
 import { Color } from '@signozhq/design-tokens';
-import { Button } from 'antd';
-import { Badge } from '@signozhq/ui/badge';
+import { Button, Tag } from 'antd';
 import { TimelineFilter } from 'container/AlertHistory/types';
 import { Undo } from '@signozhq/icons';
 
@@ -66,7 +65,11 @@ function Tabs2({
 					>
 						{tab.label}
 
-						{tab.isBeta && <Badge color="robin">Beta</Badge>}
+						{tab.isBeta && (
+							<Tag bordered={false} color="geekblue">
+								Beta
+							</Tag>
+						)}
 					</Button>
 				))}
 			</Button.Group>

frontend/src/types/common/operations.types.ts

@@ -1,4 +1,4 @@
-import { QueryProps } from 'container/QueryBuilder/components/Query/Query.interfaces';
+import { QueryProps } from 'container/QueryBuilder/type';
 import { QueryBuilderProps } from 'container/QueryBuilder/QueryBuilder.interfaces';
 import { BaseAutocompleteData } from 'types/api/queryBuilder/queryAutocompleteResponse';
 import {

pkg/querier/querier.go

@@ -86,12 +86,6 @@ func New(
 
 func (q *querier) QueryRange(ctx context.Context, orgID valuer.UUID, req *qbtypes.QueryRangeRequest) (*qbtypes.QueryRangeResponse, error) {
 
-	// Coerce the window to epoch milliseconds up front so every downstream
-	// consumer (TimeRange, narrowWindowByTraceID, step interval, etc.) can
-	// safely assume ms regardless of the resolution the caller sent.
-	req.Start = querybuilder.ToMilliSecs(req.Start)
-	req.End = querybuilder.ToMilliSecs(req.End)
-
 	tmplVars := req.Variables
 	if tmplVars == nil {
 		tmplVars = make(map[string]qbtypes.VariableItem)
@@ -414,11 +408,6 @@ func (q *querier) resolveMetricMetadata(ctx context.Context, queries []qbtypes.Q
 
 func (q *querier) QueryRawStream(ctx context.Context, orgID valuer.UUID, req *qbtypes.QueryRangeRequest, client *qbtypes.RawStream) {
 
-	// Coerce the window to epoch milliseconds up front (End may be 0 for the
-	// open-ended stream, which ToMilliSecs leaves untouched).
-	req.Start = querybuilder.ToMilliSecs(req.Start)
-	req.End = querybuilder.ToMilliSecs(req.End)
-
 	event := &qbtypes.QBEvent{
 		Version:         "v5",
 		NumberOfQueries: len(req.CompositeQuery.Queries),

pkg/querybuilder/time.go

@@ -33,28 +33,6 @@ func ToNanoSecs(epoch uint64) uint64 {
 	return temp * uint64(math.Pow(10, float64(19-count)))
 }
 
-// ToMilliSecs takes an epoch whose resolution is inferred from its magnitude
-// (s/ms/µs/ns) and returns it in milliseconds. A millisecond epoch for the
-// current era has 13 digits (e.g. ~1.7e12 in 2026), so the value is scaled so
-// its digit-width matches: smaller values (seconds) are scaled up, larger ones
-// (micro/nanoseconds) are scaled down. Zero is returned unchanged.
-func ToMilliSecs(epoch uint64) uint64 {
-	if epoch == 0 {
-		return 0
-	}
-	temp := epoch
-	count := 0
-	for epoch != 0 {
-		epoch /= 10
-		count++
-	}
-	const msDigits = 13
-	if count < msDigits {
-		return temp * uint64(math.Pow(10, float64(msDigits-count)))
-	}
-	return temp / uint64(math.Pow(10, float64(count-msDigits)))
-}
-
 // TODO(srikanthccv): should these be rounded to nearest multiple of 60 instead of 5 if step > 60?
 // That would make graph look nice but "nice" but should be less important than the usefulness.
 func RecommendedStepInterval(start, end uint64) uint64 {

pkg/querybuilder/time_test.go

@@ -60,51 +60,3 @@ func TestToNanoSecs(t *testing.T) {
 		})
 	}
 }
-
-func TestToMilliSecs(t *testing.T) {
-	tests := []struct {
-		name     string
-		epoch    uint64
-		expected uint64
-	}{
-		{
-			name:     "10-digit Unix timestamp (seconds) - 2023-01-01 00:00:00 UTC",
-			epoch:    1672531200,    // seconds
-			expected: 1672531200000, // * 10^3
-		},
-		{
-			name:     "13-digit Unix timestamp (milliseconds) - already ms",
-			epoch:    1672531200000,
-			expected: 1672531200000, // unchanged
-		},
-		{
-			name:     "16-digit Unix timestamp (microseconds)",
-			epoch:    1672531200000000, // microseconds
-			expected: 1672531200000,    // / 10^3
-		},
-		{
-			name:     "19-digit Unix timestamp (nanoseconds)",
-			epoch:    1672531200000000000, // nanoseconds
-			expected: 1672531200000,       // / 10^6
-		},
-		{
-			name:     "Unix epoch start - zero is unchanged",
-			epoch:    0,
-			expected: 0,
-		},
-		{
-			name:     "Recent timestamp in seconds - 2024-05-25 12:00:00 UTC",
-			epoch:    1716638400,
-			expected: 1716638400000,
-		},
-	}
-
-	for _, tt := range tests {
-		t.Run(tt.name, func(t *testing.T) {
-			result := ToMilliSecs(tt.epoch)
-			if result != tt.expected {
-				t.Errorf("ToMilliSecs(%d) = %d, want %d", tt.epoch, result, tt.expected)
-			}
-		})
-	}
-}