Merge branch 'chore/migrate-tag' of github.com:SigNoz/signoz into chore/migrate-tag

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

@@ -19,6 +19,7 @@ const BANNED_COMPONENTS = {
 	Switch: 'Use @signozhq/ui/switch Switch instead of antd Switch.',
 	Badge: 'Use @signozhq/ui/badge instead of antd Badge.',
 	Progress: 'Use @signozhq/ui/progress instead of antd Progress.',
+	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, Tag, Tooltip } from 'antd';
+import { Select, Tooltip } from 'antd';
 import {
 	OPERATORS,
 	QUERY_BUILDER_OPERATORS_BY_TYPES,
@@ -37,7 +37,7 @@ import { validationMapper } from 'hooks/queryBuilder/useIsValidTag';
 import { operatorTypeMapper } from 'hooks/queryBuilder/useOperatorType';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { isArray, isEmpty, isEqual, isObject } from 'lodash-es';
-import { ChevronDown, ChevronUp } from '@signozhq/icons';
+import { ChevronDown, ChevronUp, X } from '@signozhq/icons';
 import type { BaseSelectRef } from 'rc-select';
 import {
 	BaseAutocompleteData,
@@ -51,6 +51,7 @@ 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;
@@ -547,11 +548,7 @@ function ClientSideQBSearch(
 
 		return (
 			<span className="qb-search-bar-tokenised-tags">
-				<Tag
-					closable={!searchValue && closable}
-					onClose={onCloseHandler}
-					className={tagDetails?.key?.type || ''}
-				>
+				<Badge color="vanilla" className={tagDetails?.key?.type || ''}>
 					<Tooltip title={chipValue}>
 						<TypographyText
 							$isInNin={isInNin}
@@ -566,7 +563,15 @@ function ClientSideQBSearch(
 							{chipValue}
 						</TypographyText>
 					</Tooltip>
-				</Tag>
+					{!searchValue && closable && (
+						<X
+							size={12}
+							className="close-icon"
+							style={{ cursor: 'pointer' }}
+							onClick={onCloseHandler}
+						/>
+					)}
+				</Badge>
 			</span>
 		);
 	};

frontend/src/components/ErrorModal/ErrorModal.tsx

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

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

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

frontend/src/components/TableRenderer/LabelColumn.tsx

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

frontend/src/components/TableRenderer/TagWithToolTip.tsx

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

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

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

frontend/src/components/Tags/Tags.tsx

@@ -1,6 +1,7 @@
 import React, { Dispatch, SetStateAction, useState } from 'react';
 import { Check, Plus, X } from '@signozhq/icons';
-import { Button, Flex, Tag } from 'antd';
+import { Button, Flex } from 'antd';
+import { Badge } from '@signozhq/ui/badge';
 import Input from 'components/Input';
 
 import './Tags.styles.scss';
@@ -46,14 +47,14 @@ function Tags({ tags, setTags }: AddTagsProps): JSX.Element {
 	return (
 		<div className="tags-container">
 			{tags.map<React.ReactNode>((tag) => (
-				<Tag
-					key={tag}
-					closable
-					style={{ userSelect: 'none' }}
-					onClose={(): void => handleClose(tag)}
-				>
+				<Badge key={tag} color="vanilla" style={{ userSelect: 'none' }}>
 					<span>{tag}</span>
-				</Tag>
+					<X
+						size={12}
+						style={{ cursor: 'pointer', marginInlineStart: 4 }}
+						onClick={(): void => handleClose(tag)}
+					/>
+				</Badge>
 			))}
 
 			{inputVisible && (

frontend/src/container/ApiMonitoring/utils.tsx

@@ -1,7 +1,8 @@
 import { ReactNode } from 'react';
 import { Color } from '@signozhq/design-tokens';
-import { TableColumnType as ColumnType, Tag, Tooltip } from 'antd';
+import { TableColumnType as ColumnType, Tooltip } from 'antd';
 import { Progress } from '@signozhq/ui/progress';
+import { Badge } from '@signozhq/ui/badge';
 import { convertFiltersToExpressionWithExistingQuery } from 'components/QueryBuilderV2/utils';
 import {
 	FiltersType,
@@ -972,13 +973,9 @@ export const getEndPointsColumnsConfig = (
 					})()}
 					{isGroupedByAttribute
 						? text.split(',').map((value) => (
-								<Tag
-									key={value}
-									color={Color.BG_SLATE_100}
-									className="endpoint-group-tag-item"
-								>
+								<Badge key={value} color="vanilla" className="endpoint-group-tag-item">
 									{value === '' ? '<no-value>' : value}
-								</Tag>
+								</Badge>
 							))
 						: 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 ? <Tag color="success"> Free Trial </Tag> : ''}
+							{isFreeTrial ? <Badge color="success"> Free Trial </Badge> : ''}
 						</Typography.Title>
 
 						{!isLoading && !isFetchingBillingData && !showGracePeriodMessage ? (

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

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

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

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

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

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

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

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

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

@@ -1,4 +1,5 @@
 import { Dispatch, SetStateAction, useState } from 'react';
+import { X } from '@signozhq/icons';
 import { Col, Tooltip } from 'antd';
 import Input from 'components/Input';
 
@@ -60,12 +61,7 @@ function AddTags({ tags, setTags }: AddTagsProps): JSX.Element {
 				const isLongTag = tag.length > 20;
 
 				const tagElem = (
-					<NewTagContainer
-						closable
-						key={tag}
-						onClose={(): void => handleClose(tag)}
-						className="tag-container"
-					>
+					<NewTagContainer key={tag} color="vanilla" className="tag-container">
 						<span
 							onDoubleClick={(e): void => {
 								setEditInputIndex(index);
@@ -75,6 +71,11 @@ function AddTags({ tags, setTags }: AddTagsProps): JSX.Element {
 						>
 							{isLongTag ? `${tag.slice(0, 20)}...` : tag}
 						</span>
+						<X
+							size={12}
+							style={{ cursor: 'pointer', marginInlineStart: 4 }}
+							onClick={(): void => handleClose(tag)}
+						/>
 					</NewTagContainer>
 				);
 

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

@@ -1,4 +1,5 @@
-import { Col, Tag } from 'antd';
+import { Col } from 'antd';
+import { Badge } from '@signozhq/ui/badge';
 import styled from 'styled-components';
 
 export const TagsContainer = styled.div`
@@ -8,7 +9,7 @@ export const TagsContainer = styled.div`
 	gap: 6px;
 `;
 
-export const NewTagContainer = styled(Tag)`
+export const NewTagContainer = styled(Badge)`
 	&&& {
 		display: flex;
 		justify-content: space-between;

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

@@ -1,3 +1,4 @@
+import { X } from '@signozhq/icons';
 import { QueryChipContainer, QueryChipItem } from './styles';
 import { ILabelRecord } from './types';
 
@@ -13,11 +14,15 @@ export default function QueryChip({
 	const { key, value } = queryData;
 	return (
 		<QueryChipContainer>
-			<QueryChipItem
-				closable={key !== 'severity' && key !== 'description'}
-				onClose={(): void => onRemove(key)}
-			>
+			<QueryChipItem color="vanilla">
 				{key}: {value}
+				{key !== 'severity' && key !== 'description' && (
+					<X
+						size={12}
+						style={{ cursor: 'pointer', marginInlineStart: 4 }}
+						onClick={(): void => onRemove(key)}
+					/>
+				)}
 			</QueryChipItem>
 		</QueryChipContainer>
 	);

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

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

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

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

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

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

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

@@ -574,30 +574,7 @@
 
 		.home-data-item-tag {
 			display: flex;
-
-			.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);
-			}
+			gap: 6px;
 		}
 
 		&.services-list-container {

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

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

frontend/src/container/InfraMonitoringHosts/constants.tsx

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

frontend/src/container/IngestionSettings/MultiIngestionSettings.tsx

@@ -18,7 +18,6 @@ import {
 	Table,
 	TablePaginationConfig,
 	TableProps as AntDTableProps,
-	Tag,
 	Tooltip,
 } from 'antd';
 import { Switch } from '@signozhq/ui/switch';
@@ -1055,7 +1054,10 @@ function MultiIngestionSettings(): JSX.Element {
 													<div className="ingestion-key-tags">
 														{APIKey.tags.map((tag, index) => (
 															// eslint-disable-next-line react/no-array-index-key
-															<Tag key={`${tag}-${index}`}> {tag} </Tag>
+															<Badge key={`${tag}-${index}`} color="vanilla">
+																{' '}
+																{tag}{' '}
+															</Badge>
 														))}
 													</div>
 												</div>

frontend/src/container/ListAlertRules/ListAlert.tsx

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

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

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

frontend/src/container/ListOfDashboard/DashboardsList.tsx

@@ -22,9 +22,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';
@@ -420,15 +420,15 @@ function DashboardsList(): JSX.Element {
 								{dashboard?.tags && dashboard.tags.length > 0 && (
 									<div className="dashboard-tags">
 										{dashboard.tags.slice(0, 3).map((tag) => (
-											<Tag className="tag" key={tag}>
+											<Badge className="tag" color="vanilla" key={tag}>
 												{tag}
-											</Tag>
+											</Badge>
 										))}
 
 										{dashboard.tags.length > 3 && (
-											<Tag className="tag" key={dashboard.tags[3]}>
+											<Badge className="tag" color="vanilla" key={dashboard.tags[3]}>
 												+ <span> {dashboard.tags.length - 3} </span>
-											</Tag>
+											</Badge>
 										)}
 									</div>
 								)}

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

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

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

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

frontend/src/container/LogDetailedView/Overview.tsx

@@ -3,7 +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, Divider, Input, Tag } from 'antd';
+import { Collapse, Divider, Input } from 'antd';
+import { Badge } from '@signozhq/ui/badge';
 import { Typography } from '@signozhq/ui/typography';
 import { AddToQueryHOCProps } from 'components/Logs/AddToQueryHOC';
 import { ChangeViewFunctionType } from 'container/ExplorerOptions/types';
@@ -104,11 +105,11 @@ function Overview({
 					{
 						key: '1',
 						label: (
-							<Tag bordered={false}>
+							<Badge color="vanilla">
 								<Typography.Text style={{ color: Color.BG_ROBIN_400 }}>
 									body
 								</Typography.Text>
-							</Tag>
+							</Badge>
 						),
 						children: (
 							<div className="logs-body-content">
@@ -142,7 +143,7 @@ function Overview({
 								</div>
 							</div>
 						),
-						// extra: <Tag className="tag">JSON</Tag>,
+						// extra: <Badge className="tag" color="vanilla">JSON</Badge>,
 						className: 'collapse-content',
 					},
 				]}
@@ -163,11 +164,11 @@ function Overview({
 								className="attribute-tab-header"
 								onClick={toogleAttributePanelOpenState}
 							>
-								<Tag bordered={false}>
+								<Badge color="vanilla">
 									<Typography.Text style={{ color: Color.BG_ROBIN_400 }}>
 										Attributes
 									</Typography.Text>
-								</Tag>
+								</Badge>
 
 								{isAttributesExpanded && (
 									<Button

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

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

frontend/src/container/MySettings/index.tsx

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

frontend/src/container/NewWidget/styles.ts

@@ -1,4 +1,4 @@
-import { Tag as AntDTag } from 'antd';
+import { Badge } from '@signozhq/ui/badge';
 import styled from 'styled-components';
 
 export const Container = styled.div`
@@ -20,6 +20,6 @@ export const PanelContainer = styled.div`
 	overflow-y: auto;
 `;
 
-export const Tag = styled(AntDTag)`
+export const Tag = styled(Badge)`
 	margin: 0;
 `;

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

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

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

@@ -1,7 +1,8 @@
 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, Tag, Tooltip } from 'antd';
+import { CircleAlert, CircleX, X } from '@signozhq/icons';
+import { Button, Input, InputRef, message, Modal, Tooltip } from 'antd';
+import { Badge } from '@signozhq/ui/badge';
 
 import { tagInputStyle } from '../PipelineListsView/config';
 import { TagInputWrapper } from './styles';
@@ -90,12 +91,7 @@ function TagInput({
 		}
 		const isLongTag = tag.length > 20;
 		const tagElem = (
-			<Tag
-				key={tag}
-				closable
-				style={{ userSelect: 'none' }}
-				onClose={handleClose(tag)}
-			>
+			<Badge key={tag} color="vanilla" style={{ userSelect: 'none' }}>
 				<span
 					onDoubleClick={(e): void => {
 						setEditInputIndex(index);
@@ -105,7 +101,12 @@ function TagInput({
 				>
 					{isLongTag ? `${tag.slice(0, 20)}...` : tag}
 				</span>
-			</Tag>
+				<X
+					size={12}
+					style={{ cursor: 'pointer', marginInlineStart: 4 }}
+					onClick={handleClose(tag)}
+				/>
+			</Badge>
 		);
 		return isLongTag ? (
 			<Tooltip title={tag} key={tag}>

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

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

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

@@ -53,12 +53,6 @@
 		margin-bottom: 8px;
 		overflow: auto;
 		max-height: 100px;
-		.ant-tag {
-			user-select: none;
-			height: 28px;
-			display: inline-flex;
-			align-items: center;
-		}
 	}
 
 	.ant-select {
@@ -109,61 +103,8 @@
 }
 
 .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);
-			}
-		}
 	}
 }
 
@@ -271,9 +212,6 @@
 				line-height: 18px;
 				letter-spacing: -0.07px;
 			}
-			.ant-tag {
-				border-radius: 20px;
-			}
 
 			.action-btn {
 				display: flex;
@@ -328,12 +266,6 @@
 				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,7 +1,8 @@
 import React, { ReactNode, useEffect } from 'react';
 import { UseQueryResult } from 'react-query';
 import { Color } from '@signozhq/design-tokens';
-import { Collapse, Flex, Space, Table, TableProps, Tag, Tooltip } from 'antd';
+import { Collapse, Flex, Space, Table, TableProps, Tooltip } from 'antd';
+import { Badge } from '@signozhq/ui/badge';
 import { Typography } from '@signozhq/ui/typography';
 import type { DefaultOptionType } from 'antd/es/select';
 import type {
@@ -15,7 +16,7 @@ import cx from 'classnames';
 import dayjs from 'dayjs';
 import { useNotifications } from 'hooks/useNotifications';
 import { defaultTo } from 'lodash-es';
-import { CalendarClock, PenLine, Trash2 } from '@signozhq/icons';
+import { CalendarClock, PenLine, Trash2, X } from '@signozhq/icons';
 import { useAppContext } from 'providers/App/App';
 import { USER_ROLES } from 'types/roles';
 
@@ -48,10 +49,10 @@ export function AlertRuleTags(props: AlertRuleTagsProps): JSX.Element {
 			{selectedTags?.map((tag: DefaultOptionType, index: number) => {
 				const isLongTag = (tag?.label as string)?.length > 20;
 				const tagElem = (
-					<Tag
+					<Badge
 						key={tag.value}
-						onClose={(): void => handleClose?.(tag?.value)}
-						closable={closable}
+						color={index % 2 ? 'sakura' : 'robin'}
+						variant="outline"
 						className={cx(
 							{ 'red-tag': index % 2 },
 							{ 'non-closable-tag': !closable },
@@ -62,7 +63,14 @@ export function AlertRuleTags(props: AlertRuleTagsProps): JSX.Element {
 								? `${(tag?.label as string | null)?.slice(0, 20)}...`
 								: tag?.label}
 						</span>
-					</Tag>
+						{closable && (
+							<X
+								size={12}
+								style={{ cursor: 'pointer', marginInlineStart: 4 }}
+								onClick={(): void => handleClose?.(tag?.value)}
+							/>
+						)}
+					</Badge>
 				);
 				return isLongTag ? (
 					<Tooltip title={tag?.label} key={tag?.value}>
@@ -93,7 +101,7 @@ function HeaderComponent({
 		<Flex className="header-content" justify="space-between">
 			<Flex gap={8}>
 				<Typography>{name}</Typography>
-				<Tag>{duration}</Tag>
+				<Badge color="vanilla">{duration}</Badge>
 			</Flex>
 
 			{isCrudEnabled && (
@@ -155,9 +163,7 @@ export function CollapseListContent({
 				created_by_name ? (
 					<Flex gap={8}>
 						<Typography>{created_by_name}</Typography>
-						{created_by_email && (
-							<Tag style={{ borderRadius: 20 }}>{created_by_email}</Tag>
-						)}
+						{created_by_email && <Badge color="vanilla">{created_by_email}</Badge>}
 					</Flex>
 				) : (
 					'-'

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

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

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

@@ -1,3 +1,5 @@
+import { X } from '@signozhq/icons';
+
 import { HavingFilterTagProps } from './HavingFilterTag.interfaces';
 import { StyledTag, StyledText } from './HavingFilterTag.styled';
 
@@ -12,10 +14,17 @@ export function HavingFilterTag({
 	};
 
 	return (
-		<StyledTag closable={closable} onClose={onClose}>
+		<StyledTag color="vanilla">
 			<span role="button" tabIndex={0} onClick={handleClick}>
 				<StyledText>{value}</StyledText>
 			</span>
+			{closable && (
+				<X
+					size={12}
+					style={{ cursor: 'pointer', marginInlineStart: 4 }}
+					onClick={onClose}
+				/>
+			)}
 		</StyledTag>
 	);
 }

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

@@ -9,7 +9,8 @@ import {
 	useState,
 } from 'react';
 import { useLocation } from 'react-router-dom';
-import { Button, Select, Spin, Tag, Tooltip } from 'antd';
+import { Button, Select, Spin, Tooltip } from 'antd';
+import { Badge } from '@signozhq/ui/badge';
 import { Typography } from '@signozhq/ui/typography';
 import cx from 'classnames';
 import {
@@ -37,6 +38,7 @@ import {
 	CornerDownLeft,
 	Filter,
 	Slash,
+	X,
 } from '@signozhq/icons';
 import type { BaseSelectRef } from 'rc-select';
 import {
@@ -199,7 +201,7 @@ function QueryBuilderSearch({
 		const isDisabled = !!searchValue;
 
 		return (
-			<Tag closable={!searchValue && closable} onClose={onCloseHandler}>
+			<Badge color="vanilla">
 				<Tooltip title={chipValue}>
 					<TypographyText
 						$isInNin={isInNin}
@@ -213,7 +215,14 @@ function QueryBuilderSearch({
 						{chipValue}
 					</TypographyText>
 				</Tooltip>
-			</Tag>
+				{!searchValue && closable && (
+					<X
+						size={12}
+						style={{ cursor: 'pointer', marginInlineStart: 4 }}
+						onClick={onCloseHandler}
+					/>
+				)}
+			</Badge>
 		);
 	};
 

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

@@ -1,5 +1,5 @@
 import { Check } from '@signozhq/icons';
-import { Tag } from 'antd';
+import { Badge } from '@signozhq/ui/badge';
 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(Tag)`
+export const TagContainer = styled(Badge)`
 	&&& {
 		display: inline-block;
 		border-radius: 3px;

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

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

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

@@ -8,7 +8,8 @@ import {
 	useRef,
 	useState,
 } from 'react';
-import { Select, Spin, Tag, Tooltip } from 'antd';
+import { Select, Spin, Tooltip } from 'antd';
+import { Badge } from '@signozhq/ui/badge';
 import cx from 'classnames';
 import {
 	DATA_TYPE_VS_ATTRIBUTE_VALUES_KEY,
@@ -38,7 +39,7 @@ import {
 	isUndefined,
 	unset,
 } from 'lodash-es';
-import { ChevronDown, ChevronUp } from '@signozhq/icons';
+import { ChevronDown, ChevronUp, X } from '@signozhq/icons';
 import type { BaseSelectRef } from 'rc-select';
 import {
 	BaseAutocompleteData,
@@ -954,11 +955,7 @@ function QueryBuilderSearchV2(
 
 		return (
 			<span className="qb-search-bar-tokenised-tags">
-				<Tag
-					closable={!searchValue && closable}
-					onClose={onCloseHandler}
-					className={tagDetails?.key?.type || ''}
-				>
+				<Badge color="vanilla" className={tagDetails?.key?.type || ''}>
 					<Tooltip title={chipValue}>
 						<TypographyText
 							$isInNin={isInNin}
@@ -972,7 +969,15 @@ function QueryBuilderSearchV2(
 							{chipValue}
 						</TypographyText>
 					</Tooltip>
-				</Tag>
+					{!searchValue && closable && (
+						<X
+							size={12}
+							className="close-icon"
+							style={{ cursor: 'pointer' }}
+							onClick={onCloseHandler}
+						/>
+					)}
+				</Badge>
 			</span>
 		);
 	};

frontend/src/container/ResourceAttributeFilterV2/ResourceAttributesFilter.styles.scss

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

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

@@ -1,3 +1,4 @@
+import { X } from '@signozhq/icons';
 import {
 	convertMetricKeyToTrace,
 	getResourceDeploymentKeys,
@@ -20,13 +21,19 @@ function QueryChip({ queryData, onClose }: IQueryChipProps): JSX.Element {
 
 	return (
 		<QueryChipContainer>
-			<QueryChipItem>{convertMetricKeyToTrace(queryData.tagKey)}</QueryChipItem>
-			<QueryChipItem>{queryData.operator}</QueryChipItem>
-			<QueryChipItem
-				closable={queryData.tagKey !== getResourceDeploymentKeys(dotMetricsEnabled)}
-				onClose={onCloseHandler}
-			>
+			<QueryChipItem color="vanilla">
+				{convertMetricKeyToTrace(queryData.tagKey)}
+			</QueryChipItem>
+			<QueryChipItem color="vanilla">{queryData.operator}</QueryChipItem>
+			<QueryChipItem color="vanilla">
 				{queryData.tagValue.join(', ')}
+				{queryData.tagKey !== getResourceDeploymentKeys(dotMetricsEnabled) && (
+					<X
+						size={12}
+						style={{ cursor: 'pointer', marginInlineStart: 4 }}
+						onClick={onCloseHandler}
+					/>
+				)}
 			</QueryChipItem>
 		</QueryChipContainer>
 	);

frontend/src/container/ResourceAttributesFilter/styles.ts

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

frontend/src/container/RoutingPolicies/RoutingPolicyListItem.tsx

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

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

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

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

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

frontend/src/container/TriggeredAlerts/Filter.tsx

@@ -1,6 +1,8 @@
 import { useCallback, useMemo, useRef } from 'react';
+import { X } from '@signozhq/icons';
 import type { SelectProps } from 'antd';
-import { Tag, Tooltip } from 'antd';
+import { Badge } from '@signozhq/ui/badge';
+import { Tooltip } from 'antd';
 import type { BaseOptionType } from 'antd/es/select';
 import { Alerts } from 'types/api/alerts/getTriggered';
 
@@ -83,14 +85,16 @@ function Filter({
 		const { closable, onClose, label } = props;
 
 		return (
-			<Tag
-				color="magenta"
-				closable={closable}
-				onClose={onClose}
-				style={{ marginRight: 3 }}
-			>
+			<Badge color="sakura" style={{ marginRight: 3 }}>
 				{label}
-			</Tag>
+				{closable && (
+					<X
+						size={12}
+						style={{ cursor: 'pointer', marginInlineStart: 4 }}
+						onClick={(): void => onClose()}
+					/>
+				)}
+			</Badge>
 		);
 	};
 

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

@@ -1,4 +1,4 @@
-import { Tag } from 'antd';
+import { Badge } from '@signozhq/ui/badge';
 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) => (
-									<Tag key={e}>{`${e}:${labels[e]}`}</Tag>
+									<Badge color="vanilla" key={e}>{`${e}:${labels[e]}`}</Badge>
 								))}
 							</div>
 						</TableCell>

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

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

frontend/src/container/TriggeredAlerts/NoFilterTable.tsx

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

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

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

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

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

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

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

pkg/query-service/app/logparsingpipeline/collector_config.go

@@ -2,11 +2,14 @@ package logparsingpipeline
 
 import (
 	"encoding/json"
+	"fmt"
 	"strings"
 	"sync"
 
 	"gopkg.in/yaml.v3"
 
+	"log/slog"
+
 	"github.com/SigNoz/signoz/pkg/errors"
 	"github.com/SigNoz/signoz/pkg/query-service/constants"
 	"github.com/SigNoz/signoz/pkg/types/pipelinetypes"
@@ -23,13 +26,6 @@ var (
 	CodeCollectorConfigLogsPipelineNotFound   = errors.MustNewCode("collector_config_logs_pipeline_not_found")
 )
 
-const (
-	memoryLimiterProcessor       = "memory_limiter"
-	memoryLimiterProcessorPrefix = "memory_limiter/"
-	batchProcessor               = "batch"
-	batchProcessorPrefix         = "batch/"
-)
-
 // check if the processors already exist
 // if yes then update the processor.
 // if something doesn't exists then remove it.
@@ -83,14 +79,6 @@ func getOtelPipelineFromConfig(config map[string]interface{}) (*otelPipeline, er
 	return &p, nil
 }
 
-// buildCollectorPipelineProcessorsList assembles the final processor list in the
-// required order:
-//
-//  1. memory_limiter processors (any processor named "memory_limiter" or "memory_limiter/<id>")
-//  2. other existing processors (in their original order), which may include signoz processors
-//     that are not user-pipeline processors
-//  3. signoz user-pipeline processors
-//  4. batch processors (any processor named "batch" or "batch/<id>")
 func buildCollectorPipelineProcessorsList(
 	currentCollectorProcessors []string,
 	signozPipelineProcessorNames []string,
@@ -98,59 +86,90 @@ func buildCollectorPipelineProcessorsList(
 	lockLogsPipelineSpec.Lock()
 	defer lockLogsPipelineSpec.Unlock()
 
-	// Build a set of the desired signoz processors so we can drop any stale version
-	// of them (regardless of how they got into the current config) without
-	// accidentally duplicating them in the output.
-	desiredUserPipelineSet := make(map[string]struct{}, len(signozPipelineProcessorNames))
-	for _, p := range signozPipelineProcessorNames {
-		desiredUserPipelineSet[p] = struct{}{}
+	exists := map[string]struct{}{}
+	for _, v := range signozPipelineProcessorNames {
+		exists[v] = struct{}{}
 	}
 
-	result := make([]string, 0, len(currentCollectorProcessors)+len(signozPipelineProcessorNames))
+	// removed the old processors which are not used
+	var pipeline []string
+	for _, procName := range currentCollectorProcessors {
+		_, isInDesiredPipelineProcs := exists[procName]
+		if isInDesiredPipelineProcs || !hasSignozPipelineProcessorPrefix(procName) {
+			pipeline = append(pipeline, procName)
+		}
+	}
 
-	// Note: logic assumes there'll be only one batch processor
-	var batchProcIdx int
-	var batchProcFound bool
-iteration:
-	for idx, p := range currentCollectorProcessors {
-		_, inDesiredSet := desiredUserPipelineSet[p]
-		switch {
-		// same processor exist; retain the location of pre-existing location
-		case p == memoryLimiterProcessor || strings.HasPrefix(p, memoryLimiterProcessorPrefix):
-			result = append(result, p)
-		case hasSignozPipelineProcessorPrefix(p):
-			// this processor has been dropped
-			if !inDesiredSet {
-				continue iteration
-			} else {
-				result = append(result, p)
+	// create a reverse map of existing config processors and their position
+	existing := map[string]int{}
+	for i, p := range pipeline {
+		name := p
+		existing[name] = i
+	}
+
+	// create mapping from our logsParserPipeline to position in existing processors (from current config)
+	// this means, if "batch" holds position 3 in the current effective config, and 2 in our config, the map will be [2]: 3
+	specVsExistingMap := map[int]int{}
+	existingVsSpec := map[int]int{}
+
+	// go through plan and map its elements to current positions in effective config
+	for i, m := range signozPipelineProcessorNames {
+		if loc, ok := existing[m]; ok {
+			specVsExistingMap[i] = loc
+			existingVsSpec[loc] = i
+		}
+	}
+
+	lastMatched := 0
+	newPipeline := []string{}
+
+	for i := 0; i < len(signozPipelineProcessorNames); i++ {
+		m := signozPipelineProcessorNames[i]
+		if loc, ok := specVsExistingMap[i]; ok {
+			for j := lastMatched; j < loc; j++ {
+				if hasSignozPipelineProcessorPrefix(pipeline[j]) {
+					delete(specVsExistingMap, existingVsSpec[j])
+				} else {
+					newPipeline = append(newPipeline, pipeline[j])
+				}
 			}
-		case p == batchProcessor || strings.HasPrefix(p, batchProcessorPrefix):
-			batchProcIdx = idx
-			batchProcFound = true
-			break iteration
-		default:
-			result = append(result, p)
+			newPipeline = append(newPipeline, pipeline[loc])
+			lastMatched = loc + 1
+		} else {
+			newPipeline = append(newPipeline, m)
 		}
 
-		if inDesiredSet {
-			// delete from desired pipeline set so they're not added twice
-			delete(desiredUserPipelineSet, p)
-		}
 	}
-	// add user pipelines
-	for _, proc := range signozPipelineProcessorNames {
-		_, add := desiredUserPipelineSet[proc]
-		if add {
-			result = append(result, proc)
-		}
+	if lastMatched < len(pipeline) {
+		newPipeline = append(newPipeline, pipeline[lastMatched:]...)
 	}
 
-	// add batch processor and rest
-	if batchProcFound {
-		result = append(result, currentCollectorProcessors[batchProcIdx:]...)
+	if checkDuplicateString(newPipeline) {
+		// duplicates are most likely because the processor sequence in effective config conflicts
+		// with the planned sequence as per planned pipeline
+		return pipeline, fmt.Errorf("the effective config has an unexpected processor sequence: %v", pipeline)
 	}
-	return result, nil
+
+	return newPipeline, nil
+}
+
+func checkDuplicateString(pipeline []string) bool {
+	exists := make(map[string]bool, len(pipeline))
+	slog.Debug("checking duplicate processors in the pipeline", "pipeline", pipeline)
+	for _, processor := range pipeline {
+		name := processor
+		if _, ok := exists[name]; ok {
+			slog.Error(
+				"duplicate processor name detected in generated collector config for log pipelines",
+				"processor", processor,
+				"pipeline", pipeline,
+			)
+			return true
+		}
+
+		exists[name] = true
+	}
+	return false
 }
 
 func GenerateCollectorConfigWithPipelines(config []byte, pipelines []pipelinetypes.GettablePipeline) ([]byte, error) {

pkg/query-service/app/logparsingpipeline/collector_config_test.go

@@ -106,109 +106,107 @@ func TestBuildLogParsingProcessors(t *testing.T) {
 }
 
 var BuildLogsPipelineTestData = []struct {
-	Name          string
-	fromCollector []string
-	userPipelines []string
-	finalOutput   []string
+	Name             string
+	currentPipeline  []string
+	logsPipeline     []string
+	expectedPipeline []string
 }{
 	{
-		Name:          "Add new pipelines",
-		fromCollector: []string{"processor1", "processor2"},
-		userPipelines: []string{constants.LogsPPLPfx + "a", constants.LogsPPLPfx + "b"},
-		finalOutput:   []string{"processor1", "processor2", constants.LogsPPLPfx + "a", constants.LogsPPLPfx + "b"},
+		Name:             "Add new pipelines",
+		currentPipeline:  []string{"processor1", "processor2"},
+		logsPipeline:     []string{constants.LogsPPLPfx + "a", constants.LogsPPLPfx + "b"},
+		expectedPipeline: []string{constants.LogsPPLPfx + "a", constants.LogsPPLPfx + "b", "processor1", "processor2"},
 	},
 	{
-		Name:          "Add new pipeline and respect custom processors",
-		fromCollector: []string{constants.LogsPPLPfx + "a", "processor1", constants.LogsPPLPfx + "b", "processor2"},
-		userPipelines: []string{constants.LogsPPLPfx + "a", constants.LogsPPLPfx + "b", constants.LogsPPLPfx + "c"},
-		finalOutput:   []string{constants.LogsPPLPfx + "a", "processor1", constants.LogsPPLPfx + "b", "processor2", constants.LogsPPLPfx + "c"},
+		Name:             "Add new pipeline and respect custom processors",
+		currentPipeline:  []string{constants.LogsPPLPfx + "a", "processor1", constants.LogsPPLPfx + "b", "processor2"},
+		logsPipeline:     []string{constants.LogsPPLPfx + "a", constants.LogsPPLPfx + "b", constants.LogsPPLPfx + "c"},
+		expectedPipeline: []string{constants.LogsPPLPfx + "a", "processor1", constants.LogsPPLPfx + "b", constants.LogsPPLPfx + "c", "processor2"},
 	},
 	{
-		Name:          "Add new pipeline and respect custom processors",
-		fromCollector: []string{constants.LogsPPLPfx + "a", "processor1", constants.LogsPPLPfx + "b", "processor2"},
-		userPipelines: []string{constants.LogsPPLPfx + "a", constants.LogsPPLPfx + "b", constants.LogsPPLPfx + "c", constants.LogsPPLPfx + "d"},
-		finalOutput:   []string{constants.LogsPPLPfx + "a", "processor1", constants.LogsPPLPfx + "b", "processor2", constants.LogsPPLPfx + "c", constants.LogsPPLPfx + "d"},
+		Name:             "Add new pipeline and respect custom processors",
+		currentPipeline:  []string{constants.LogsPPLPfx + "a", "processor1", constants.LogsPPLPfx + "b", "processor2"},
+		logsPipeline:     []string{constants.LogsPPLPfx + "a", constants.LogsPPLPfx + "b", constants.LogsPPLPfx + "c", constants.LogsPPLPfx + "d"},
+		expectedPipeline: []string{constants.LogsPPLPfx + "a", "processor1", constants.LogsPPLPfx + "b", constants.LogsPPLPfx + "c", constants.LogsPPLPfx + "d", "processor2"},
 	},
 	{
-		Name:          "Add new pipeline and respect custom processors in the beginning and middle",
-		fromCollector: []string{"processor1", constants.LogsPPLPfx + "a", "processor2", constants.LogsPPLPfx + "b", "batch"},
-		userPipelines: []string{constants.LogsPPLPfx + "a", constants.LogsPPLPfx + "b", constants.LogsPPLPfx + "c"},
-		finalOutput:   []string{"processor1", constants.LogsPPLPfx + "a", "processor2", constants.LogsPPLPfx + "b", constants.LogsPPLPfx + "c", "batch"},
+		Name:             "Add new pipeline and respect custom processors in the beginning and middle",
+		currentPipeline:  []string{"processor1", constants.LogsPPLPfx + "a", "processor2", constants.LogsPPLPfx + "b", "batch"},
+		logsPipeline:     []string{constants.LogsPPLPfx + "a", constants.LogsPPLPfx + "b", constants.LogsPPLPfx + "c"},
+		expectedPipeline: []string{"processor1", constants.LogsPPLPfx + "a", "processor2", constants.LogsPPLPfx + "b", constants.LogsPPLPfx + "c", "batch"},
 	},
 	{
-		Name:          "Remove old pipeline add add new",
-		fromCollector: []string{constants.LogsPPLPfx + "a", constants.LogsPPLPfx + "b", "processor1", "processor2"},
-		userPipelines: []string{constants.LogsPPLPfx + "a"},
-		finalOutput:   []string{constants.LogsPPLPfx + "a", "processor1", "processor2"},
+		Name:             "Remove old pipeline add add new",
+		currentPipeline:  []string{constants.LogsPPLPfx + "a", constants.LogsPPLPfx + "b", "processor1", "processor2"},
+		logsPipeline:     []string{constants.LogsPPLPfx + "a"},
+		expectedPipeline: []string{constants.LogsPPLPfx + "a", "processor1", "processor2"},
 	},
 	{
-		Name:          "Remove old pipeline from middle",
-		fromCollector: []string{"processor1", "processor2", constants.LogsPPLPfx + "a", "processor3", constants.LogsPPLPfx + "b", "batch"},
-		userPipelines: []string{constants.LogsPPLPfx + "a"},
-		finalOutput:   []string{"processor1", "processor2", constants.LogsPPLPfx + "a", "processor3", "batch"},
+		Name:             "Remove old pipeline from middle",
+		currentPipeline:  []string{"processor1", "processor2", constants.LogsPPLPfx + "a", "processor3", constants.LogsPPLPfx + "b", "batch"},
+		logsPipeline:     []string{constants.LogsPPLPfx + "a"},
+		expectedPipeline: []string{"processor1", "processor2", constants.LogsPPLPfx + "a", "processor3", "batch"},
 	},
 	{
-		Name:          "Remove old pipeline from middle and add new pipeline",
-		fromCollector: []string{"memory_limiter", "processor1", "processor2", constants.LogsPPLPfx + "a", "processor3", constants.LogsPPLPfx + "b", "batch"},
-		userPipelines: []string{constants.LogsPPLPfx + "a", constants.LogsPPLPfx + "c"},
-		finalOutput:   []string{"memory_limiter", "processor1", "processor2", constants.LogsPPLPfx + "a", "processor3", constants.LogsPPLPfx + "c", "batch"},
+		Name:             "Remove old pipeline from middle and add new pipeline",
+		currentPipeline:  []string{"processor1", "processor2", constants.LogsPPLPfx + "a", "processor3", constants.LogsPPLPfx + "b", "batch"},
+		logsPipeline:     []string{constants.LogsPPLPfx + "a", constants.LogsPPLPfx + "c"},
+		expectedPipeline: []string{"processor1", "processor2", constants.LogsPPLPfx + "a", constants.LogsPPLPfx + "c", "processor3", "batch"},
 	},
 	{
-		Name:          "Remove multiple old pipelines from middle and add multiple new ones",
-		fromCollector: []string{"processor1", constants.LogsPPLPfx + "a", "processor2", constants.LogsPPLPfx + "b", "processor3", constants.LogsPPLPfx + "c", "processor4", constants.LogsPPLPfx + "d", "processor5", "batch"},
-		userPipelines: []string{constants.LogsPPLPfx + "a", constants.LogsPPLPfx + "a1", constants.LogsPPLPfx + "c", constants.LogsPPLPfx + "c1"},
-		finalOutput:   []string{"processor1", constants.LogsPPLPfx + "a", "processor2", "processor3", constants.LogsPPLPfx + "c", "processor4", "processor5", constants.LogsPPLPfx + "a1", constants.LogsPPLPfx + "c1", "batch"},
+		Name:             "Remove multiple old pipelines from middle and add multiple new ones",
+		currentPipeline:  []string{"processor1", constants.LogsPPLPfx + "a", "processor2", constants.LogsPPLPfx + "b", "processor3", constants.LogsPPLPfx + "c", "processor4", constants.LogsPPLPfx + "d", "processor5", "batch"},
+		logsPipeline:     []string{constants.LogsPPLPfx + "a", constants.LogsPPLPfx + "a1", constants.LogsPPLPfx + "c", constants.LogsPPLPfx + "c1"},
+		expectedPipeline: []string{"processor1", constants.LogsPPLPfx + "a", constants.LogsPPLPfx + "a1", "processor2", "processor3", constants.LogsPPLPfx + "c", constants.LogsPPLPfx + "c1", "processor4", "processor5", "batch"},
+	},
+
+	// working
+	{
+		Name:             "rearrange pipelines",
+		currentPipeline:  []string{"processor1", "processor2", constants.LogsPPLPfx + "_a", "processor3", constants.LogsPPLPfx + "_b", "batch"},
+		logsPipeline:     []string{constants.LogsPPLPfx + "_b", constants.LogsPPLPfx + "_a"},
+		expectedPipeline: []string{"processor1", "processor2", "processor3", constants.LogsPPLPfx + "_b", constants.LogsPPLPfx + "_a", "batch"},
 	},
 	{
-		Name:          "rearrange pipelines",
-		fromCollector: []string{"processor1", "processor2", constants.LogsPPLPfx + "_a", "processor3", constants.LogsPPLPfx + "_b", "batch"},
-		userPipelines: []string{constants.LogsPPLPfx + "_b", constants.LogsPPLPfx + "_a"},
-		finalOutput:   []string{"processor1", "processor2", constants.LogsPPLPfx + "_a", "processor3", constants.LogsPPLPfx + "_b", "batch"},
+		Name:             "rearrange pipelines with new processor",
+		currentPipeline:  []string{"processor1", "processor2", constants.LogsPPLPfx + "_a", "processor3", constants.LogsPPLPfx + "_b", "batch"},
+		logsPipeline:     []string{constants.LogsPPLPfx + "_b", constants.LogsPPLPfx + "_a", constants.LogsPPLPfx + "_c"},
+		expectedPipeline: []string{"processor1", "processor2", "processor3", constants.LogsPPLPfx + "_b", constants.LogsPPLPfx + "_a", constants.LogsPPLPfx + "_c", "batch"},
+		// expectedPipeline: []string{"processor1", "processor2", constants.LogsPPLPfx + "_b", "processor3", constants.LogsPPLPfx + "_a", constants.LogsPPLPfx + "_c", "batch"},
 	},
 	{
-		Name:          "rearrange pipelines with new processor",
-		fromCollector: []string{"processor1", "processor2", constants.LogsPPLPfx + "_a", "processor3", constants.LogsPPLPfx + "_b", "batch"},
-		userPipelines: []string{constants.LogsPPLPfx + "_b", constants.LogsPPLPfx + "_a", constants.LogsPPLPfx + "_c"},
-		finalOutput:   []string{"processor1", "processor2", constants.LogsPPLPfx + "_a", "processor3", constants.LogsPPLPfx + "_b", constants.LogsPPLPfx + "_c", "batch"},
+		Name:             "delete processor",
+		currentPipeline:  []string{"processor1", "processor2", constants.LogsPPLPfx + "_a", "processor3", constants.LogsPPLPfx + "_b", "batch"},
+		logsPipeline:     []string{},
+		expectedPipeline: []string{"processor1", "processor2", "processor3", "batch"},
 	},
 	{
-		Name:          "delete processor",
-		fromCollector: []string{"processor1", "processor2", constants.LogsPPLPfx + "_a", "processor3", constants.LogsPPLPfx + "_b", "batch"},
-		userPipelines: []string{},
-		finalOutput:   []string{"processor1", "processor2", "processor3", "batch"},
+		Name:             "last to first",
+		currentPipeline:  []string{"processor1", "processor2", constants.LogsPPLPfx + "_a", "processor3", "processor4", constants.LogsPPLPfx + "_b", "batch", constants.LogsPPLPfx + "_c"},
+		logsPipeline:     []string{constants.LogsPPLPfx + "_c", constants.LogsPPLPfx + "_a", constants.LogsPPLPfx + "_b"},
+		expectedPipeline: []string{"processor1", "processor2", "processor3", "processor4", "batch", constants.LogsPPLPfx + "_c", constants.LogsPPLPfx + "_a", constants.LogsPPLPfx + "_b"},
 	},
 	{
-		Name:          "last to first",
-		fromCollector: []string{"processor1", "processor2", constants.LogsPPLPfx + "_a", "processor3", "processor4", constants.LogsPPLPfx + "_b", "batch", constants.LogsPPLPfx + "_c"},
-		userPipelines: []string{constants.LogsPPLPfx + "_c", constants.LogsPPLPfx + "_a", constants.LogsPPLPfx + "_b"},
-		finalOutput:   []string{"processor1", "processor2", constants.LogsPPLPfx + "_a", "processor3", "processor4", constants.LogsPPLPfx + "_b", constants.LogsPPLPfx + "_c", "batch", constants.LogsPPLPfx + "_c"},
+		Name:             "multiple rearrange pipelines",
+		currentPipeline:  []string{"processor1", "processor2", constants.LogsPPLPfx + "_a", "processor3", constants.LogsPPLPfx + "_b", "batch", constants.LogsPPLPfx + "_c", "processor4", "processor5", constants.LogsPPLPfx + "_d", "processor6", "processor7"},
+		logsPipeline:     []string{constants.LogsPPLPfx + "_b", constants.LogsPPLPfx + "_a", constants.LogsPPLPfx + "_d", constants.LogsPPLPfx + "_c", constants.LogsPPLPfx + "_e"},
+		expectedPipeline: []string{"processor1", "processor2", "processor3", constants.LogsPPLPfx + "_b", constants.LogsPPLPfx + "_a", "batch", "processor4", "processor5", constants.LogsPPLPfx + "_d", constants.LogsPPLPfx + "_c", constants.LogsPPLPfx + "_e", "processor6", "processor7"},
 	},
 	{
-		Name:          "multiple rearrange pipelines",
-		fromCollector: []string{"processor1", "processor2", constants.LogsPPLPfx + "_a", "processor3", constants.LogsPPLPfx + "_b", "batch", constants.LogsPPLPfx + "_c", "processor4", "processor5", constants.LogsPPLPfx + "_d", "processor6", "processor7"},
-		userPipelines: []string{constants.LogsPPLPfx + "_b", constants.LogsPPLPfx + "_a", constants.LogsPPLPfx + "_d", constants.LogsPPLPfx + "_c", constants.LogsPPLPfx + "_e"},
-		finalOutput:   []string{"processor1", "processor2", constants.LogsPPLPfx + "_a", "processor3", constants.LogsPPLPfx + "_b", constants.LogsPPLPfx + "_d", constants.LogsPPLPfx + "_c", constants.LogsPPLPfx + "_e", "batch", constants.LogsPPLPfx + "_c", "processor4", "processor5", constants.LogsPPLPfx + "_d", "processor6", "processor7"},
-	},
-	{
-		Name:          "multiple rearrange with new pipelines",
-		fromCollector: []string{"memory_limiter", "processor1", "processor2", constants.LogsPPLPfx + "_a", "processor3", constants.LogsPPLPfx + "_b", "batch", constants.LogsPPLPfx + "_c", "processor4", "processor5", constants.LogsPPLPfx + "_d", "processor6", "processor7"},
-		userPipelines: []string{constants.LogsPPLPfx + "_z", constants.LogsPPLPfx + "_b", constants.LogsPPLPfx + "_a", constants.LogsPPLPfx + "_d", constants.LogsPPLPfx + "_c", constants.LogsPPLPfx + "_e"},
-		finalOutput:   []string{"memory_limiter", "processor1", "processor2", constants.LogsPPLPfx + "_a", "processor3", constants.LogsPPLPfx + "_b", constants.LogsPPLPfx + "_z", constants.LogsPPLPfx + "_d", constants.LogsPPLPfx + "_c", constants.LogsPPLPfx + "_e", "batch", constants.LogsPPLPfx + "_c", "processor4", "processor5", constants.LogsPPLPfx + "_d", "processor6", "processor7"},
-	},
-	{
-		Name:          "Prefixed proc in desired set not duplicated from others",
-		fromCollector: []string{"memory_limiter/logs", "custom_proc", "resourcedetection", "batch/logs"},
-		userPipelines: []string{"custom_proc", constants.LogsPPLPfx + "a"},
-		finalOutput:   []string{"memory_limiter/logs", "custom_proc", "resourcedetection", constants.LogsPPLPfx + "a", "batch/logs"},
+		Name:             "multiple rearrange with new pipelines",
+		currentPipeline:  []string{"processor1", "processor2", constants.LogsPPLPfx + "_a", "processor3", constants.LogsPPLPfx + "_b", "batch", constants.LogsPPLPfx + "_c", "processor4", "processor5", constants.LogsPPLPfx + "_d", "processor6", "processor7"},
+		logsPipeline:     []string{constants.LogsPPLPfx + "_z", constants.LogsPPLPfx + "_b", constants.LogsPPLPfx + "_a", constants.LogsPPLPfx + "_d", constants.LogsPPLPfx + "_c", constants.LogsPPLPfx + "_e"},
+		expectedPipeline: []string{constants.LogsPPLPfx + "_z", "processor1", "processor2", "processor3", constants.LogsPPLPfx + "_b", constants.LogsPPLPfx + "_a", "batch", "processor4", "processor5", constants.LogsPPLPfx + "_d", constants.LogsPPLPfx + "_c", constants.LogsPPLPfx + "_e", "processor6", "processor7"},
 	},
 }
 
 func TestBuildLogsPipeline(t *testing.T) {
 	for _, test := range BuildLogsPipelineTestData {
 		Convey(test.Name, t, func() {
-			v, err := buildCollectorPipelineProcessorsList(test.fromCollector, test.userPipelines)
+			v, err := buildCollectorPipelineProcessorsList(test.currentPipeline, test.logsPipeline)
 			So(err, ShouldBeNil)
-			So(v, ShouldResemble, test.finalOutput)
+			fmt.Println(test.Name, "\n", test.currentPipeline, "\n", v, "\n", test.expectedPipeline)
+			So(v, ShouldResemble, test.expectedPipeline)
 		})
 	}
 }