From 593d666d71e5233f7551ce34fb9665a66ce6bcd6 Mon Sep 17 00:00:00 2001
From: SagarRajput-7 <sagar@signoz.io>
Date: Fri, 17 Jan 2025 08:51:03 +0530
Subject: [PATCH 1/2] feat: added celery task feature - with task garphs and
 details

---
 frontend/src/AppRoutes/pageComponents.ts      |   7 +
 frontend/src/AppRoutes/routes.ts              |   8 +
 .../CeleryTaskConfigOptions.styles.scss       |  39 ++
 .../CeleryTaskConfigOptions.tsx               |  89 ++++
 .../useGetCeleryFilters.ts                    |  49 +++
 .../CeleryTaskDetail.style.scss               |   5 +
 .../CeleryTaskDetail/CeleryTaskDetail.tsx     |  59 +++
 .../CeleryTaskGraph.style.scss                |  36 ++
 .../CeleryTaskGraph/CeleryTaskGraph.tsx       |  65 +++
 .../CeleryTaskGraph/CeleryTaskGraphGrid.tsx   |  47 ++
 .../CeleryTaskGraph/CeleryTaskGraphUtils.ts   | 410 ++++++++++++++++++
 .../src/components/CeleryTask/CeleryUtils.ts  |  22 +
 .../CeleryTask/useCeleryFilterOptions.ts      |  32 ++
 frontend/src/constants/query.ts               |   1 +
 frontend/src/constants/routes.ts              |   1 +
 frontend/src/container/AppLayout/index.tsx    |   4 +-
 frontend/src/container/SideNav/config.ts      |   1 +
 .../TopNav/DateTimeSelectionV2/config.ts      |   1 +
 .../Celery/CeleryTask/CeleryTask.styles.scss  |  44 ++
 .../pages/Celery/CeleryTask/CeleryTask.tsx    |  41 ++
 .../MQDetails/MetricPage/MetricPageUtil.ts    |   5 +-
 frontend/src/utils/permission/index.ts        |   1 +
 22 files changed, 964 insertions(+), 3 deletions(-)
 create mode 100644 frontend/src/components/CeleryTask/CeleryTaskConfigOptions/CeleryTaskConfigOptions.styles.scss
 create mode 100644 frontend/src/components/CeleryTask/CeleryTaskConfigOptions/CeleryTaskConfigOptions.tsx
 create mode 100644 frontend/src/components/CeleryTask/CeleryTaskConfigOptions/useGetCeleryFilters.ts
 create mode 100644 frontend/src/components/CeleryTask/CeleryTaskDetail/CeleryTaskDetail.style.scss
 create mode 100644 frontend/src/components/CeleryTask/CeleryTaskDetail/CeleryTaskDetail.tsx
 create mode 100644 frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskGraph.style.scss
 create mode 100644 frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskGraph.tsx
 create mode 100644 frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskGraphGrid.tsx
 create mode 100644 frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskGraphUtils.ts
 create mode 100644 frontend/src/components/CeleryTask/CeleryUtils.ts
 create mode 100644 frontend/src/components/CeleryTask/useCeleryFilterOptions.ts
 create mode 100644 frontend/src/pages/Celery/CeleryTask/CeleryTask.styles.scss
 create mode 100644 frontend/src/pages/Celery/CeleryTask/CeleryTask.tsx

diff --git a/frontend/src/AppRoutes/pageComponents.ts b/frontend/src/AppRoutes/pageComponents.ts
index 0857ea4664..cafbbd2ba4 100644
--- a/frontend/src/AppRoutes/pageComponents.ts
+++ b/frontend/src/AppRoutes/pageComponents.ts
@@ -247,3 +247,10 @@ export const InfrastructureMonitoring = Loadable(
 			/* webpackChunkName: "InfrastructureMonitoring" */ 'pages/InfrastructureMonitoring'
 		),
 );
+
+export const CeleryTask = Loadable(
+	() =>
+		import(
+			/* webpackChunkName: "CeleryTask" */ 'pages/Celery/CeleryTask/CeleryTask'
+		),
+);
diff --git a/frontend/src/AppRoutes/routes.ts b/frontend/src/AppRoutes/routes.ts
index dda546167f..998ba3e34a 100644
--- a/frontend/src/AppRoutes/routes.ts
+++ b/frontend/src/AppRoutes/routes.ts
@@ -8,6 +8,7 @@ import {
 	AllErrors,
 	APIKeys,
 	BillingPage,
+	CeleryTask,
 	CreateAlertChannelAlerts,
 	CreateNewAlerts,
 	CustomDomainSettings,
@@ -401,6 +402,13 @@ const routes: AppRoutes[] = [
 		key: 'MESSAGING_QUEUES',
 		isPrivate: true,
 	},
+	{
+		path: ROUTES.MESSAGING_QUEUES_CELERY_TASK,
+		exact: true,
+		component: CeleryTask,
+		key: 'MESSAGING_QUEUES_CELERY_TASK',
+		isPrivate: true,
+	},
 	{
 		path: ROUTES.MESSAGING_QUEUES_DETAIL,
 		exact: true,
diff --git a/frontend/src/components/CeleryTask/CeleryTaskConfigOptions/CeleryTaskConfigOptions.styles.scss b/frontend/src/components/CeleryTask/CeleryTaskConfigOptions/CeleryTaskConfigOptions.styles.scss
new file mode 100644
index 0000000000..1ffd4af3ff
--- /dev/null
+++ b/frontend/src/components/CeleryTask/CeleryTaskConfigOptions/CeleryTaskConfigOptions.styles.scss
@@ -0,0 +1,39 @@
+.celery-task-filters {
+	display: flex;
+	justify-content: space-between;
+	width: 100%;
+
+	.celery-filters {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+
+		.config-select-option {
+			width: 100%;
+			.ant-select-selector {
+				display: flex;
+				min-height: 32px;
+				align-items: center;
+				gap: 16px;
+				min-width: 164px;
+
+				border-radius: 2px;
+				border: 1px solid var(--bg-slate-400);
+				background: var(--bg-ink-300);
+			}
+		}
+	}
+}
+
+.lightMode {
+	.celery-task-filters {
+		.celery-filters {
+			.config-select-option {
+				.ant-select-selector {
+					border: 1px solid var(--bg-vanilla-300);
+					background: var(--bg-vanilla-100);
+				}
+			}
+		}
+	}
+}
diff --git a/frontend/src/components/CeleryTask/CeleryTaskConfigOptions/CeleryTaskConfigOptions.tsx b/frontend/src/components/CeleryTask/CeleryTaskConfigOptions/CeleryTaskConfigOptions.tsx
new file mode 100644
index 0000000000..5088f9ea5f
--- /dev/null
+++ b/frontend/src/components/CeleryTask/CeleryTaskConfigOptions/CeleryTaskConfigOptions.tsx
@@ -0,0 +1,89 @@
+import './CeleryTaskConfigOptions.styles.scss';
+
+import { Color } from '@signozhq/design-tokens';
+import { Button, Select, Spin, Tooltip } from 'antd';
+import { SelectMaxTagPlaceholder } from 'components/MessagingQueues/MQCommon/MQCommon';
+import { QueryParams } from 'constants/query';
+import useUrlQuery from 'hooks/useUrlQuery';
+import { Check, Share2 } from 'lucide-react';
+import { useState } from 'react';
+import { useHistory, useLocation } from 'react-router-dom';
+import { useCopyToClipboard } from 'react-use';
+
+import {
+	getValuesFromQueryParams,
+	setQueryParamsFromOptions,
+} from '../CeleryUtils';
+import { useCeleryFilterOptions } from '../useCeleryFilterOptions';
+
+function CeleryTaskConfigOptions(): JSX.Element {
+	const { handleSearch, isFetching, options } = useCeleryFilterOptions(
+		'celery.task_name',
+	);
+	const history = useHistory();
+	const location = useLocation();
+
+	const [isURLCopied, setIsURLCopied] = useState(false);
+	const urlQuery = useUrlQuery();
+
+	const [, handleCopyToClipboard] = useCopyToClipboard();
+
+	return (
+		<div className="celery-task-filters">
+			<div className="celery-filters">
+				<Select
+					placeholder="Task Name"
+					showSearch
+					mode="multiple"
+					options={options}
+					loading={isFetching}
+					className="config-select-option"
+					onSearch={handleSearch}
+					maxTagCount={4}
+					maxTagPlaceholder={SelectMaxTagPlaceholder}
+					value={getValuesFromQueryParams(QueryParams.taskName, urlQuery) || []}
+					notFoundContent={
+						isFetching ? (
+							<span>
+								<Spin size="small" /> Loading...
+							</span>
+						) : (
+							<span>No Task Name found</span>
+						)
+					}
+					onChange={(value): void => {
+						handleSearch('');
+						setQueryParamsFromOptions(
+							value,
+							urlQuery,
+							history,
+							location,
+							QueryParams.taskName,
+						);
+					}}
+				/>
+			</div>
+			<Tooltip title="Share this" arrow={false}>
+				<Button
+					className="periscope-btn copy-url-btn"
+					onClick={(): void => {
+						handleCopyToClipboard(window.location.href);
+						setIsURLCopied(true);
+						setTimeout(() => {
+							setIsURLCopied(false);
+						}, 1000);
+					}}
+					icon={
+						isURLCopied ? (
+							<Check size={14} color={Color.BG_FOREST_500} />
+						) : (
+							<Share2 size={14} />
+						)
+					}
+				/>
+			</Tooltip>
+		</div>
+	);
+}
+
+export default CeleryTaskConfigOptions;
diff --git a/frontend/src/components/CeleryTask/CeleryTaskConfigOptions/useGetCeleryFilters.ts b/frontend/src/components/CeleryTask/CeleryTaskConfigOptions/useGetCeleryFilters.ts
new file mode 100644
index 0000000000..4d75115002
--- /dev/null
+++ b/frontend/src/components/CeleryTask/CeleryTaskConfigOptions/useGetCeleryFilters.ts
@@ -0,0 +1,49 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import { DefaultOptionType } from 'antd/es/select';
+import { getAttributesValues } from 'api/queryBuilder/getAttributesValues';
+import { useQuery } from 'react-query';
+import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
+import { DataSource } from 'types/common/queryBuilder';
+
+export type FilterOptionType = 'celery.task_name';
+
+export interface Filters {
+	searchText: string;
+	attributeKey: FilterOptionType;
+}
+
+export interface GetAllFiltersResponse {
+	options: DefaultOptionType[];
+	isFetching: boolean;
+}
+
+export function useGetAllFilters(props: Filters): GetAllFiltersResponse {
+	const { searchText, attributeKey } = props;
+
+	const { data, isLoading } = useQuery(
+		['attributesValues', searchText],
+		async () => {
+			const { payload } = await getAttributesValues({
+				aggregateOperator: 'noop',
+				dataSource: DataSource.TRACES,
+				aggregateAttribute: '',
+				attributeKey,
+				searchText: searchText ?? '',
+				filterAttributeKeyDataType: DataTypes.String,
+				tagType: 'tag',
+			});
+
+			if (payload) {
+				const values = Object.values(payload).find((el) => !!el) || [];
+				const options: DefaultOptionType[] = values.map((val: string) => ({
+					label: val,
+					value: val,
+				}));
+				return options;
+			}
+			return [];
+		},
+	);
+
+	return { options: data ?? [], isFetching: isLoading };
+}
diff --git a/frontend/src/components/CeleryTask/CeleryTaskDetail/CeleryTaskDetail.style.scss b/frontend/src/components/CeleryTask/CeleryTaskDetail/CeleryTaskDetail.style.scss
new file mode 100644
index 0000000000..28168f71c6
--- /dev/null
+++ b/frontend/src/components/CeleryTask/CeleryTaskDetail/CeleryTaskDetail.style.scss
@@ -0,0 +1,5 @@
+.celery-task-detail-drawer {
+	.ant-drawer-body {
+		padding: 0px;
+	}
+}
diff --git a/frontend/src/components/CeleryTask/CeleryTaskDetail/CeleryTaskDetail.tsx b/frontend/src/components/CeleryTask/CeleryTaskDetail/CeleryTaskDetail.tsx
new file mode 100644
index 0000000000..04f94c4ed9
--- /dev/null
+++ b/frontend/src/components/CeleryTask/CeleryTaskDetail/CeleryTaskDetail.tsx
@@ -0,0 +1,59 @@
+import './CeleryTaskDetail.style.scss';
+
+import { Color, Spacing } from '@signozhq/design-tokens';
+import { Divider, Drawer, Typography } from 'antd';
+import { useIsDarkMode } from 'hooks/useDarkMode';
+import { X } from 'lucide-react';
+
+import CeleryTaskGraph from '../CeleryTaskGraph/CeleryTaskGraph';
+import { celerySlowestTasksTableWidgetData } from '../CeleryTaskGraph/CeleryTaskGraphUtils';
+
+export type CeleryTaskData = {
+	taskName: string;
+	taskId: string;
+	taskStatus: string;
+	taskCreatedAt: string;
+	taskCompletedAt: string;
+};
+
+export type CeleryTaskDetailProps = {
+	task: CeleryTaskData | null;
+	onClose: () => void;
+};
+
+export default function CeleryTaskDetail({
+	task,
+	onClose,
+}: CeleryTaskDetailProps): JSX.Element {
+	const isDarkMode = useIsDarkMode();
+	console.log(task);
+
+	return (
+		<Drawer
+			width="50%"
+			title={
+				<>
+					<Divider type="vertical" />
+					<Typography.Text className="title">{task?.taskName}</Typography.Text>
+				</>
+			}
+			placement="right"
+			onClose={onClose}
+			open={!!task}
+			style={{
+				overscrollBehavior: 'contain',
+				background: isDarkMode ? Color.BG_INK_400 : Color.BG_VANILLA_100,
+			}}
+			className="celery-task-detail-drawer"
+			destroyOnClose
+			closeIcon={<X size={16} style={{ marginTop: Spacing.MARGIN_1 }} />}
+		>
+			{task && (
+				<CeleryTaskGraph
+					widgetData={celerySlowestTasksTableWidgetData}
+					onClick={(): void => {}}
+				/>
+			)}
+		</Drawer>
+	);
+}
diff --git a/frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskGraph.style.scss b/frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskGraph.style.scss
new file mode 100644
index 0000000000..c2a25eca5d
--- /dev/null
+++ b/frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskGraph.style.scss
@@ -0,0 +1,36 @@
+.celery-task-graph-grid-container {
+	width: 100%;
+	display: grid;
+	grid-template-rows: 1fr;
+	gap: 10px;
+
+	.celery-task-graph-grid {
+		display: grid;
+		grid-template-columns: repeat(2, 1fr);
+		align-items: flex-start;
+		gap: 10px;
+		width: 100%;
+
+		.celery-task-graph {
+			height: 350px !important;
+			padding: 10px;
+			width: 100%;
+			box-sizing: border-box;
+		}
+	}
+
+	.celery-task-graph-grid-bottom {
+		display: grid;
+		grid-template-columns: repeat(3, 1fr);
+		align-items: flex-start;
+		gap: 10px;
+		width: 100%;
+
+		.celery-task-graph {
+			height: 350px !important;
+			padding: 10px;
+			width: 100%;
+			box-sizing: border-box;
+		}
+	}
+}
diff --git a/frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskGraph.tsx b/frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskGraph.tsx
new file mode 100644
index 0000000000..dad688871f
--- /dev/null
+++ b/frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskGraph.tsx
@@ -0,0 +1,65 @@
+import { QueryParams } from 'constants/query';
+import { PANEL_TYPES } from 'constants/queryBuilder';
+import { ViewMenuAction } from 'container/GridCardLayout/config';
+import GridCard from 'container/GridCardLayout/GridCard';
+import { Card } from 'container/GridCardLayout/styles';
+import { useIsDarkMode } from 'hooks/useDarkMode';
+import useUrlQuery from 'hooks/useUrlQuery';
+import { useCallback } from 'react';
+import { useDispatch } from 'react-redux';
+import { useHistory, useLocation } from 'react-router-dom';
+import { UpdateTimeInterval } from 'store/actions';
+import { Widgets } from 'types/api/dashboard/getAll';
+
+import { CeleryTaskData } from '../CeleryTaskDetail/CeleryTaskDetail';
+
+function CeleryTaskGraph({
+	widgetData,
+	onClick,
+}: {
+	widgetData: Widgets;
+	onClick: (task: CeleryTaskData) => void;
+}): JSX.Element {
+	const history = useHistory();
+	const { pathname } = useLocation();
+	const dispatch = useDispatch();
+	const urlQuery = useUrlQuery();
+	const isDarkMode = useIsDarkMode();
+
+	const onDragSelect = useCallback(
+		(start: number, end: number) => {
+			const startTimestamp = Math.trunc(start);
+			const endTimestamp = Math.trunc(end);
+
+			urlQuery.set(QueryParams.startTime, startTimestamp.toString());
+			urlQuery.set(QueryParams.endTime, endTimestamp.toString());
+			const generatedUrl = `${pathname}?${urlQuery.toString()}`;
+			history.push(generatedUrl);
+
+			if (startTimestamp !== endTimestamp) {
+				dispatch(UpdateTimeInterval('custom', [startTimestamp, endTimestamp]));
+			}
+		},
+		[dispatch, history, pathname, urlQuery],
+	);
+
+	return (
+		<Card
+			isDarkMode={isDarkMode}
+			$panelType={PANEL_TYPES.TIME_SERIES}
+			className="celery-task-graph"
+		>
+			<GridCard
+				widget={widgetData}
+				headerMenuList={[...ViewMenuAction]}
+				onDragSelect={onDragSelect}
+				onClickHandler={(arg): void => {
+					console.log('clicked', arg); // todo-sagar: add logic to handle click
+					onClick(arg as any);
+				}}
+			/>
+		</Card>
+	);
+}
+
+export default CeleryTaskGraph;
diff --git a/frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskGraphGrid.tsx b/frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskGraphGrid.tsx
new file mode 100644
index 0000000000..803880e7ce
--- /dev/null
+++ b/frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskGraphGrid.tsx
@@ -0,0 +1,47 @@
+import './CeleryTaskGraph.style.scss';
+
+import { CeleryTaskData } from '../CeleryTaskDetail/CeleryTaskDetail';
+import CeleryTaskGraph from './CeleryTaskGraph';
+import {
+	celeryActiveTasksWidgetData,
+	celeryAllStateWidgetData,
+	celeryErrorByWorkerWidgetData,
+	celeryLatencyByWorkerWidgetData,
+	celeryTaskLatencyWidgetData,
+	celeryTasksByWorkerWidgetData,
+	celeryWorkerOnlineWidgetData,
+} from './CeleryTaskGraphUtils';
+
+export default function CeleryTaskGraphGrid({
+	onClick,
+}: {
+	onClick: (task: CeleryTaskData) => void;
+}): JSX.Element {
+	const widgetData = [
+		celeryActiveTasksWidgetData,
+		celeryWorkerOnlineWidgetData,
+		celeryAllStateWidgetData,
+		celeryTaskLatencyWidgetData,
+	];
+
+	const bottomWidgetData = [
+		celeryTasksByWorkerWidgetData,
+		celeryErrorByWorkerWidgetData,
+		celeryLatencyByWorkerWidgetData,
+	];
+
+	return (
+		<div className="celery-task-graph-grid-container">
+			<div className="celery-task-graph-grid">
+				{widgetData.map((widget) => (
+					<CeleryTaskGraph key={widget.id} widgetData={widget} onClick={onClick} />
+				))}
+			</div>
+			<div className="celery-task-graph-grid-bottom">
+				{bottomWidgetData.map((widget) => (
+					<CeleryTaskGraph key={widget.id} widgetData={widget} onClick={onClick} />
+				))}
+			</div>
+		</div>
+	);
+}
diff --git a/frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskGraphUtils.ts b/frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskGraphUtils.ts
new file mode 100644
index 0000000000..b10cd8c60e
--- /dev/null
+++ b/frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskGraphUtils.ts
@@ -0,0 +1,410 @@
+/* eslint-disable sonarjs/no-duplicate-string */
+import { PANEL_TYPES } from 'constants/queryBuilder';
+import { getWidgetQueryBuilder } from 'container/MetricsApplication/MetricsApplication.factory';
+import { getWidgetQuery } from 'pages/MessagingQueues/MQDetails/MetricPage/MetricPageUtil';
+import { DataTypes } from 'types/api/queryBuilder/queryAutocompleteResponse';
+import { DataSource } from 'types/common/queryBuilder';
+
+export const celeryAllStateWidgetData = getWidgetQueryBuilder(
+	getWidgetQuery({
+		queryData: [
+			{
+				aggregateAttribute: {
+					dataType: DataTypes.String,
+					id: '------false',
+					isColumn: false,
+					isJSON: false,
+					key: '',
+					type: '',
+				},
+				aggregateOperator: 'count',
+				dataSource: DataSource.TRACES,
+				disabled: false,
+				expression: 'A',
+				filters: {
+					items: [
+						{
+							id: 'a163d71c',
+							key: {
+								dataType: DataTypes.String,
+								id: 'celery.task_name--string--tag--false',
+								isColumn: false,
+								isJSON: false,
+								key: 'celery.task_name',
+								type: 'tag',
+							},
+							op: '=',
+							value: 'tasks.tasks.divide',
+						},
+					],
+					op: 'AND',
+				},
+				functions: [],
+				groupBy: [
+					{
+						dataType: DataTypes.String,
+						id: 'celery.state--string--tag--false',
+						isColumn: false,
+						isJSON: false,
+						key: 'celery.state',
+						type: 'tag',
+					},
+				],
+				having: [],
+				legend: '',
+				limit: null,
+				orderBy: [],
+				queryName: 'A',
+				reduceTo: 'avg',
+				spaceAggregation: 'sum',
+				stepInterval: 60,
+				timeAggregation: 'rate',
+			},
+		],
+		title: 'All',
+		description:
+			'Represents all states of task, including success, failed, and retry.',
+		panelTypes: PANEL_TYPES.BAR, // todo-sagar: ask shivanshu if BAR or Histogram
+	}),
+);
+
+export const celeryTaskLatencyWidgetData = getWidgetQueryBuilder(
+	getWidgetQuery({
+		title: 'Task Latency',
+		description: 'Represents the latency of task execution.',
+		queryData: [
+			{
+				aggregateAttribute: {
+					dataType: DataTypes.Float64,
+					id: 'duration_nano--float64----true',
+					isColumn: true,
+					isJSON: false,
+					key: 'duration_nano',
+					type: '',
+				},
+				aggregateOperator: 'p99',
+				dataSource: DataSource.TRACES,
+				disabled: false,
+				expression: 'A',
+				filters: {
+					items: [],
+					op: 'AND',
+				},
+				functions: [],
+				groupBy: [
+					{
+						dataType: DataTypes.String,
+						id: 'celery.task_name--string--tag--false',
+						isColumn: false,
+						isJSON: false,
+						key: 'celery.task_name',
+						type: 'tag',
+					},
+				],
+				having: [],
+				legend: '',
+				limit: null,
+				orderBy: [
+					{
+						columnName: '#SIGNOZ_VALUE',
+						order: 'asc',
+					},
+				],
+				queryName: 'A',
+				reduceTo: 'avg',
+				spaceAggregation: 'sum',
+				stepInterval: 60,
+				timeAggregation: 'p99',
+			},
+		],
+	}),
+);
+
+export const celeryTasksByWorkerWidgetData = getWidgetQueryBuilder(
+	getWidgetQuery({
+		title: 'Tasks/s by worker',
+		description: 'Represents the number of tasks executed by each worker.',
+		queryData: [
+			{
+				aggregateAttribute: {
+					dataType: DataTypes.String,
+					id: '------false',
+					isColumn: false,
+					key: '',
+					type: '',
+				},
+				aggregateOperator: 'rate',
+				dataSource: DataSource.TRACES,
+				disabled: false,
+				expression: 'A',
+				filters: {
+					items: [],
+					op: 'AND',
+				},
+				functions: [],
+				groupBy: [
+					{
+						dataType: DataTypes.String,
+						id: 'celery.hostname--string--tag--false',
+						isColumn: false,
+						isJSON: false,
+						key: 'celery.hostname',
+						type: 'tag',
+					},
+				],
+				having: [],
+				legend: '',
+				limit: 10,
+				orderBy: [],
+				queryName: 'A',
+				reduceTo: 'avg',
+				spaceAggregation: 'sum',
+				stepInterval: 60,
+				timeAggregation: 'rate',
+			},
+		],
+	}),
+);
+
+export const celeryErrorByWorkerWidgetData = getWidgetQueryBuilder(
+	getWidgetQuery({
+		title: 'Error% by worker',
+		description: 'Represents the number of errors by each worker.',
+		queryData: [
+			{
+				aggregateAttribute: {
+					dataType: DataTypes.String,
+					id: '------false',
+					isColumn: false,
+					isJSON: false,
+					key: '',
+					type: '',
+				},
+				aggregateOperator: 'rate',
+				dataSource: DataSource.TRACES,
+				disabled: false,
+				expression: 'A',
+				filters: {
+					items: [],
+					op: 'AND',
+				},
+				functions: [],
+				groupBy: [
+					{
+						dataType: DataTypes.String,
+						id: 'celery.hostname--string--tag--false',
+						isColumn: false,
+						isJSON: false,
+						key: 'celery.hostname',
+						type: 'tag',
+					},
+				],
+				having: [],
+				legend: '',
+				limit: 10,
+				orderBy: [],
+				queryName: 'A',
+				reduceTo: 'avg',
+				spaceAggregation: 'sum',
+				stepInterval: 60,
+				timeAggregation: 'rate',
+			},
+		],
+	}),
+);
+
+export const celeryLatencyByWorkerWidgetData = getWidgetQueryBuilder(
+	getWidgetQuery({
+		title: 'Latency by Worker',
+		description: 'Represents the latency of tasks by each worker.',
+		queryData: [
+			{
+				aggregateAttribute: {
+					dataType: DataTypes.Float64,
+					id: 'duration_nano--float64----true',
+					isColumn: true,
+					isJSON: false,
+					key: 'duration_nano',
+					type: '',
+				},
+				aggregateOperator: 'p99',
+				dataSource: DataSource.TRACES,
+				disabled: false,
+				expression: 'A',
+				filters: {
+					items: [],
+					op: 'AND',
+				},
+				functions: [],
+				groupBy: [
+					{
+						dataType: DataTypes.String,
+						id: 'celery.hostname--string--tag--false',
+						isColumn: false,
+						isJSON: false,
+						key: 'celery.hostname',
+						type: 'tag',
+					},
+				],
+				having: [],
+				legend: '',
+				limit: 10,
+				orderBy: [],
+				queryName: 'A',
+				reduceTo: 'avg',
+				spaceAggregation: 'sum',
+				stepInterval: 60,
+				timeAggregation: 'p99',
+			},
+		],
+	}),
+);
+
+export const celeryActiveTasksWidgetData = getWidgetQueryBuilder(
+	getWidgetQuery({
+		title: 'Tasks/ worker (Active tasks)',
+		description: 'Represents the number of active tasks.',
+		queryData: [
+			{
+				aggregateAttribute: {
+					dataType: DataTypes.Float64,
+					id:
+						'flower_worker_number_of_currently_executing_tasks--float64--Gauge--true',
+					isColumn: true,
+					isJSON: false,
+					key: 'flower_worker_number_of_currently_executing_tasks',
+					type: 'Gauge',
+				},
+				aggregateOperator: 'latest',
+				dataSource: DataSource.METRICS,
+				disabled: false,
+				expression: 'A',
+				filters: {
+					items: [],
+					op: 'AND',
+				},
+				functions: [],
+				groupBy: [
+					{
+						dataType: DataTypes.String,
+						id: 'worker--string--tag--false',
+						isColumn: false,
+						isJSON: false,
+						key: 'worker',
+						type: 'tag',
+					},
+				],
+				having: [],
+				legend: '',
+				limit: null,
+				orderBy: [],
+				queryName: 'A',
+				reduceTo: 'avg',
+				spaceAggregation: 'avg',
+				stepInterval: 60,
+				timeAggregation: 'latest',
+			},
+		],
+	}),
+);
+
+export const celeryWorkerOnlineWidgetData = getWidgetQueryBuilder(
+	getWidgetQuery({
+		title: 'Worker Online',
+		description: 'Represents the number of workers online.',
+		queryData: [
+			{
+				aggregateAttribute: {
+					dataType: DataTypes.Float64,
+					id: 'flower_worker_online--float64--Gauge--true',
+					isColumn: true,
+					isJSON: false,
+					key: 'flower_worker_online',
+					type: 'Gauge',
+				},
+				aggregateOperator: 'avg',
+				dataSource: DataSource.METRICS,
+				disabled: false,
+				expression: 'A',
+				filters: {
+					items: [],
+					op: 'AND',
+				},
+				functions: [],
+				groupBy: [
+					{
+						dataType: DataTypes.String,
+						id: 'worker--string--tag--false',
+						isColumn: false,
+						isJSON: false,
+						key: 'worker',
+						type: 'tag',
+					},
+				],
+				having: [],
+				legend: '',
+				limit: null,
+				orderBy: [],
+				queryName: 'A',
+				reduceTo: 'avg',
+				spaceAggregation: 'max',
+				stepInterval: 60,
+				timeAggregation: 'avg',
+			},
+		],
+	}),
+);
+
+// Tables
+export const celerySlowestTasksTableWidgetData = getWidgetQueryBuilder(
+	getWidgetQuery({
+		title: 'Slowest Tasks',
+		description: 'Represents the slowest tasks.',
+		panelTypes: PANEL_TYPES.TABLE,
+		queryData: [
+			{
+				aggregateAttribute: {
+					dataType: DataTypes.Float64,
+					id: 'duration_nano--float64----true',
+					isColumn: true,
+					isJSON: false,
+					key: 'duration_nano',
+					type: '',
+				},
+				aggregateOperator: 'avg',
+				dataSource: DataSource.TRACES,
+				disabled: false,
+				expression: 'A',
+				filters: {
+					items: [],
+					op: 'AND',
+				},
+				functions: [],
+				groupBy: [
+					{
+						dataType: DataTypes.String,
+						id: 'celery.task_name--string--tag--false',
+						isColumn: false,
+						isJSON: false,
+						key: 'celery.task_name',
+						type: 'tag',
+					},
+				],
+				having: [],
+				legend: '',
+				limit: 10,
+				orderBy: [
+					{
+						columnName: '#SIGNOZ_VALUE',
+						order: 'desc',
+					},
+				],
+				queryName: 'A',
+				reduceTo: 'avg',
+				spaceAggregation: 'sum',
+				stepInterval: 60,
+				timeAggregation: 'avg',
+			},
+		],
+	}),
+);
diff --git a/frontend/src/components/CeleryTask/CeleryUtils.ts b/frontend/src/components/CeleryTask/CeleryUtils.ts
new file mode 100644
index 0000000000..804f36061f
--- /dev/null
+++ b/frontend/src/components/CeleryTask/CeleryUtils.ts
@@ -0,0 +1,22 @@
+import { QueryParams } from 'constants/query';
+import { History, Location } from 'history';
+
+export function getValuesFromQueryParams(
+	queryParams: QueryParams,
+	urlQuery: URLSearchParams,
+): string[] {
+	const value = urlQuery.get(queryParams);
+	return value ? value.split(',') : [];
+}
+
+export function setQueryParamsFromOptions(
+	value: string[],
+	urlQuery: URLSearchParams,
+	history: History<unknown>,
+	location: Location<unknown>,
+	queryParams: QueryParams,
+): void {
+	urlQuery.set(queryParams, value.join(','));
+	const generatedUrl = `${location.pathname}?${urlQuery.toString()}`;
+	history.replace(generatedUrl);
+}
diff --git a/frontend/src/components/CeleryTask/useCeleryFilterOptions.ts b/frontend/src/components/CeleryTask/useCeleryFilterOptions.ts
new file mode 100644
index 0000000000..dcc46a771d
--- /dev/null
+++ b/frontend/src/components/CeleryTask/useCeleryFilterOptions.ts
@@ -0,0 +1,32 @@
+import { DefaultOptionType } from 'antd/es/select';
+import useDebouncedFn from 'hooks/useDebouncedFunction';
+import { useState } from 'react';
+
+import {
+	FilterOptionType,
+	useGetAllFilters,
+} from './CeleryTaskConfigOptions/useGetCeleryFilters';
+
+export const useCeleryFilterOptions = (
+	type: FilterOptionType,
+): {
+	searchText: string;
+	handleSearch: (value: string) => void;
+	isFetching: boolean;
+	options: DefaultOptionType[];
+} => {
+	const [searchText, setSearchText] = useState<string>('');
+	const { isFetching, options } = useGetAllFilters({
+		attributeKey: type,
+		searchText,
+	});
+	const handleDebouncedSearch = useDebouncedFn((searchText): void => {
+		setSearchText(searchText as string);
+	}, 500);
+
+	const handleSearch = (value: string): void => {
+		handleDebouncedSearch(value || '');
+	};
+
+	return { searchText, handleSearch, isFetching, options };
+};
diff --git a/frontend/src/constants/query.ts b/frontend/src/constants/query.ts
index 56fbd737b5..757d49b99b 100644
--- a/frontend/src/constants/query.ts
+++ b/frontend/src/constants/query.ts
@@ -41,4 +41,5 @@ export enum QueryParams {
 	getStartedSource = 'getStartedSource',
 	getStartedSourceService = 'getStartedSourceService',
 	mqServiceView = 'mqServiceView',
+	taskName = 'taskName',
 }
diff --git a/frontend/src/constants/routes.ts b/frontend/src/constants/routes.ts
index a5a5212eb7..a4c279937b 100644
--- a/frontend/src/constants/routes.ts
+++ b/frontend/src/constants/routes.ts
@@ -63,6 +63,7 @@ const ROUTES = {
 	MESSAGING_QUEUES_DETAIL: '/messaging-queues/detail',
 	INFRASTRUCTURE_MONITORING_HOSTS: '/infrastructure-monitoring/hosts',
 	INFRASTRUCTURE_MONITORING_KUBERNETES: '/infrastructure-monitoring/kubernetes',
+	MESSAGING_QUEUES_CELERY_TASK: '/messaging-queues/celery-task',
 } as const;
 
 export default ROUTES;
diff --git a/frontend/src/container/AppLayout/index.tsx b/frontend/src/container/AppLayout/index.tsx
index 8bb91d48c3..c5143752b4 100644
--- a/frontend/src/container/AppLayout/index.tsx
+++ b/frontend/src/container/AppLayout/index.tsx
@@ -287,7 +287,9 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 		routeKey === 'TRACES_EXPLORER' || routeKey === 'TRACES_SAVE_VIEWS';
 
 	const isMessagingQueues = (): boolean =>
-		routeKey === 'MESSAGING_QUEUES' || routeKey === 'MESSAGING_QUEUES_DETAIL';
+		routeKey === 'MESSAGING_QUEUES' ||
+		routeKey === 'MESSAGING_QUEUES_DETAIL' ||
+		routeKey === 'MESSAGING_QUEUES_CELERY_TASK';
 
 	const isDashboardListView = (): boolean => routeKey === 'ALL_DASHBOARD';
 	const isAlertHistory = (): boolean => routeKey === 'ALERT_HISTORY';
diff --git a/frontend/src/container/SideNav/config.ts b/frontend/src/container/SideNav/config.ts
index 6f8cb07f1f..8e627e0bdd 100644
--- a/frontend/src/container/SideNav/config.ts
+++ b/frontend/src/container/SideNav/config.ts
@@ -51,6 +51,7 @@ export const routeConfig: Record<string, QueryParams[]> = {
 	[ROUTES.WORKSPACE_LOCKED]: [QueryParams.resourceAttributes],
 	[ROUTES.MESSAGING_QUEUES]: [QueryParams.resourceAttributes],
 	[ROUTES.MESSAGING_QUEUES_DETAIL]: [QueryParams.resourceAttributes],
+	[ROUTES.MESSAGING_QUEUES_CELERY_TASK]: [QueryParams.resourceAttributes],
 	[ROUTES.INFRASTRUCTURE_MONITORING_HOSTS]: [QueryParams.resourceAttributes],
 	[ROUTES.INFRASTRUCTURE_MONITORING_KUBERNETES]: [
 		QueryParams.resourceAttributes,
diff --git a/frontend/src/container/TopNav/DateTimeSelectionV2/config.ts b/frontend/src/container/TopNav/DateTimeSelectionV2/config.ts
index a0ac267052..10e71b3e0d 100644
--- a/frontend/src/container/TopNav/DateTimeSelectionV2/config.ts
+++ b/frontend/src/container/TopNav/DateTimeSelectionV2/config.ts
@@ -214,6 +214,7 @@ export const routesToSkip = [
 	ROUTES.ALERT_OVERVIEW,
 	ROUTES.MESSAGING_QUEUES,
 	ROUTES.MESSAGING_QUEUES_DETAIL,
+	ROUTES.MESSAGING_QUEUES_CELERY_TASK,
 	ROUTES.INFRASTRUCTURE_MONITORING_HOSTS,
 	ROUTES.SOMETHING_WENT_WRONG,
 	ROUTES.INFRASTRUCTURE_MONITORING_KUBERNETES,
diff --git a/frontend/src/pages/Celery/CeleryTask/CeleryTask.styles.scss b/frontend/src/pages/Celery/CeleryTask/CeleryTask.styles.scss
new file mode 100644
index 0000000000..03d53af448
--- /dev/null
+++ b/frontend/src/pages/Celery/CeleryTask/CeleryTask.styles.scss
@@ -0,0 +1,44 @@
+.celery-task-container {
+	.celery-task-breadcrumb {
+		display: flex;
+		padding: 0px 16px;
+		align-items: center;
+		gap: 8px;
+		padding-top: 10px;
+		padding-bottom: 8px;
+		color: var(--bg-vanilla-400);
+		font-family: Inter;
+		font-size: 14px;
+		font-style: normal;
+		font-weight: 400;
+		line-height: 20px;
+		letter-spacing: -0.07px;
+
+		border-bottom: 1px solid var(--bg-slate-400);
+	}
+
+	.celery-content {
+		display: flex;
+		flex-direction: column;
+		gap: 16px;
+		padding: 16px;
+		align-items: flex-start;
+
+		.celery-content-header {
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			width: 100%;
+
+			.celery-content-header-title {
+				color: var(--bg-vanilla-100);
+				font-family: Inter;
+				font-size: 24px;
+				font-style: normal;
+				font-weight: 700;
+				line-height: 32px;
+				margin: 0;
+			}
+		}
+	}
+}
diff --git a/frontend/src/pages/Celery/CeleryTask/CeleryTask.tsx b/frontend/src/pages/Celery/CeleryTask/CeleryTask.tsx
new file mode 100644
index 0000000000..e09c47f33e
--- /dev/null
+++ b/frontend/src/pages/Celery/CeleryTask/CeleryTask.tsx
@@ -0,0 +1,41 @@
+import './CeleryTask.styles.scss';
+
+import CeleryTaskConfigOptions from 'components/CeleryTask/CeleryTaskConfigOptions/CeleryTaskConfigOptions';
+import CeleryTaskDetail, {
+	CeleryTaskData,
+} from 'components/CeleryTask/CeleryTaskDetail/CeleryTaskDetail';
+import CeleryTaskGraphGrid from 'components/CeleryTask/CeleryTaskGraph/CeleryTaskGraphGrid';
+import DateTimeSelectionV2 from 'container/TopNav/DateTimeSelectionV2';
+import { ListMinus } from 'lucide-react';
+import { useState } from 'react';
+
+export default function CeleryTask(): JSX.Element {
+	const [task, setTask] = useState<CeleryTaskData | null>(null);
+
+	const onTaskClick = (task: CeleryTaskData): void => {
+		setTask(task);
+	};
+
+	return (
+		<div className="celery-task-container">
+			<div className="celery-task-breadcrumb">
+				<ListMinus size={16} />
+				Messaging Queues / Celery Task
+			</div>
+			<div className="celery-content">
+				<div className="celery-content-header">
+					<p className="celery-content-header-title">Celery Task</p>
+					<DateTimeSelectionV2 showAutoRefresh={false} hideShareModal />
+				</div>
+				<CeleryTaskConfigOptions />
+				<CeleryTaskGraphGrid onClick={onTaskClick} />
+			</div>
+			<CeleryTaskDetail
+				task={task}
+				onClose={(): void => {
+					setTask(null);
+				}}
+			/>
+		</div>
+	);
+}
diff --git a/frontend/src/pages/MessagingQueues/MQDetails/MetricPage/MetricPageUtil.ts b/frontend/src/pages/MessagingQueues/MQDetails/MetricPage/MetricPageUtil.ts
index e52b4e2d03..3f07dddbec 100644
--- a/frontend/src/pages/MessagingQueues/MQDetails/MetricPage/MetricPageUtil.ts
+++ b/frontend/src/pages/MessagingQueues/MQDetails/MetricPage/MetricPageUtil.ts
@@ -12,6 +12,7 @@ interface GetWidgetQueryProps {
 	title: string;
 	description: string;
 	queryData: IBuilderQuery[];
+	panelTypes?: PANEL_TYPES;
 }
 
 interface GetWidgetQueryPropsReturn extends GetWidgetQueryBuilderProps {
@@ -49,11 +50,11 @@ export const getWidgetQueryBuilder = ({
 export function getWidgetQuery(
 	props: GetWidgetQueryProps,
 ): GetWidgetQueryPropsReturn {
-	const { title, description } = props;
+	const { title, description, panelTypes } = props;
 	return {
 		title,
 		yAxisUnit: 'none',
-		panelTypes: PANEL_TYPES.TIME_SERIES,
+		panelTypes: panelTypes || PANEL_TYPES.TIME_SERIES,
 		fillSpans: false,
 		description,
 		nullZeroValues: 'zero',
diff --git a/frontend/src/utils/permission/index.ts b/frontend/src/utils/permission/index.ts
index 4d0a04b569..a664477538 100644
--- a/frontend/src/utils/permission/index.ts
+++ b/frontend/src/utils/permission/index.ts
@@ -108,4 +108,5 @@ export const routePermission: Record<keyof typeof ROUTES, ROLES[]> = {
 	SERVICE_TOP_LEVEL_OPERATIONS: ['ADMIN', 'EDITOR', 'VIEWER'],
 	INFRASTRUCTURE_MONITORING_HOSTS: ['ADMIN', 'EDITOR', 'VIEWER'],
 	INFRASTRUCTURE_MONITORING_KUBERNETES: ['ADMIN', 'EDITOR', 'VIEWER'],
+	MESSAGING_QUEUES_CELERY_TASK: ['ADMIN', 'EDITOR', 'VIEWER'],
 };

From 69988a18a13f293b76dfbbbb29d06fd76d7b23df Mon Sep 17 00:00:00 2001
From: SagarRajput-7 <sagar@signoz.io>
Date: Fri, 17 Jan 2025 11:16:22 +0530
Subject: [PATCH 2/2] feat: added celery bar graph toggle states UI

---
 .../CeleryTaskDetail/CeleryTaskDetail.tsx     |  1 -
 .../CeleryTaskGraph.style.scss                | 64 ++++++++++++++++++-
 .../CeleryTaskGraph/CeleryTaskGraph.tsx       |  2 +
 .../CeleryTaskGraph/CeleryTaskGraphStates.tsx | 52 +++++++++++++++
 4 files changed, 115 insertions(+), 4 deletions(-)
 create mode 100644 frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskGraphStates.tsx

diff --git a/frontend/src/components/CeleryTask/CeleryTaskDetail/CeleryTaskDetail.tsx b/frontend/src/components/CeleryTask/CeleryTaskDetail/CeleryTaskDetail.tsx
index 04f94c4ed9..253b12d118 100644
--- a/frontend/src/components/CeleryTask/CeleryTaskDetail/CeleryTaskDetail.tsx
+++ b/frontend/src/components/CeleryTask/CeleryTaskDetail/CeleryTaskDetail.tsx
@@ -26,7 +26,6 @@ export default function CeleryTaskDetail({
 	onClose,
 }: CeleryTaskDetailProps): JSX.Element {
 	const isDarkMode = useIsDarkMode();
-	console.log(task);
 
 	return (
 		<Drawer
diff --git a/frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskGraph.style.scss b/frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskGraph.style.scss
index c2a25eca5d..c2851fe269 100644
--- a/frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskGraph.style.scss
+++ b/frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskGraph.style.scss
@@ -3,6 +3,8 @@
 	display: grid;
 	grid-template-rows: 1fr;
 	gap: 10px;
+	padding-bottom: 16px;
+	margin-bottom: 16px;
 
 	.celery-task-graph-grid {
 		display: grid;
@@ -12,10 +14,20 @@
 		width: 100%;
 
 		.celery-task-graph {
-			height: 350px !important;
-			padding: 10px;
+			height: 380px !important;
+			padding: 6px;
 			width: 100%;
 			box-sizing: border-box;
+
+			.ant-card-body {
+				height: calc(100% - 24px);
+
+				.widget-graph-container {
+					&.bar {
+						height: calc(100% - 116px);
+					}
+				}
+			}
 		}
 	}
 
@@ -27,10 +39,56 @@
 		width: 100%;
 
 		.celery-task-graph {
-			height: 350px !important;
+			height: 380px !important;
 			padding: 10px;
 			width: 100%;
 			box-sizing: border-box;
 		}
 	}
 }
+
+.celery-task-states {
+	border-bottom: 1px solid var(--bg-ink-200);
+
+	&__tab {
+		min-width: 140px;
+		padding: 12px 13px 12px 12px;
+		cursor: pointer;
+		position: relative;
+
+		&:not([data-last-tab='true']) {
+			border-right: 1px solid var(--bg-ink-200);
+		}
+
+		&--selected {
+			background-color: rgba(38, 38, 38, 0.5);
+		}
+	}
+
+	&__label-wrapper {
+		margin-bottom: 8px;
+	}
+
+	&__label {
+		font-family: 'Inter';
+		font-size: 14px;
+		color: var(--bg-vanilla-400);
+		line-height: 20px;
+	}
+
+	&__value {
+		font-family: 'Geist Mono';
+		font-size: 24px;
+		color: var(--bg-vanilla-100);
+		line-height: 32px;
+	}
+
+	&__indicator {
+		position: absolute;
+		width: 100%;
+		height: 2px;
+		bottom: 0;
+		left: 0;
+		background-color: var(--bg-vanilla-100);
+	}
+}
diff --git a/frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskGraph.tsx b/frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskGraph.tsx
index dad688871f..754015e351 100644
--- a/frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskGraph.tsx
+++ b/frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskGraph.tsx
@@ -12,6 +12,7 @@ import { UpdateTimeInterval } from 'store/actions';
 import { Widgets } from 'types/api/dashboard/getAll';
 
 import { CeleryTaskData } from '../CeleryTaskDetail/CeleryTaskDetail';
+import { CeleryTaskGraphStates } from './CeleryTaskGraphStates';
 
 function CeleryTaskGraph({
 	widgetData,
@@ -49,6 +50,7 @@ function CeleryTaskGraph({
 			$panelType={PANEL_TYPES.TIME_SERIES}
 			className="celery-task-graph"
 		>
+			{widgetData.title === 'All' && <CeleryTaskGraphStates />}
 			<GridCard
 				widget={widgetData}
 				headerMenuList={[...ViewMenuAction]}
diff --git a/frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskGraphStates.tsx b/frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskGraphStates.tsx
new file mode 100644
index 0000000000..dadfb82f3c
--- /dev/null
+++ b/frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskGraphStates.tsx
@@ -0,0 +1,52 @@
+import './CeleryTaskGraph.style.scss';
+
+import { Col, Row } from 'antd';
+import { useState } from 'react';
+
+interface TabData {
+	label: string;
+	value: number;
+	key: string;
+}
+
+function CeleryTaskGraphStates(): JSX.Element {
+	const [selectedTab, setSelectedTab] = useState<string>('all');
+
+	const tabs: TabData[] = [
+		{ label: 'All Tasks', value: 1097, key: 'all' },
+		{ label: 'Failed', value: 11, key: 'failed' },
+		{ label: 'Pending', value: 59, key: 'pending' },
+		{ label: 'Successful', value: 1027, key: 'successful' },
+	];
+
+	const handleTabClick = (key: string): void => {
+		setSelectedTab(key);
+	};
+
+	return (
+		<Row className="celery-task-states">
+			{tabs.map((tab, index) => (
+				<Col
+					key={tab.key}
+					onClick={(): void => handleTabClick(tab.key)}
+					className={`celery-task-states__tab ${
+						tab.key === selectedTab ? 'celery-task-states__tab--selected' : ''
+					}`}
+					data-last-tab={index === tabs.length - 1}
+				>
+					<div className="celery-task-states__label-wrapper">
+						<div className="celery-task-states__label">{tab.label}</div>
+					</div>
+					<div className="celery-task-states__value-wrapper">
+						<div className="celery-task-states__value">{tab.value}</div>
+					</div>
+					{tab.key === selectedTab && (
+						<div className="celery-task-states__indicator" />
+					)}
+				</Col>
+			))}
+		</Row>
+	);
+}
+
+export { CeleryTaskGraphStates };