feat: added celery task feature - with task graphs and details

frontend/src/AppRoutes/pageComponents.ts

@@ -229,7 +229,7 @@ export const InstalledIntegrations = Loadable(
 		),
 );
 
-export const MessagingQueues = Loadable(
+export const MessagingQueuesMainPage = Loadable(
 	() =>
 		import(/* webpackChunkName: "MessagingQueues" */ 'pages/MessagingQueues'),
 );
@@ -247,3 +247,10 @@ export const InfrastructureMonitoring = Loadable(
 			/* webpackChunkName: "InfrastructureMonitoring" */ 'pages/InfrastructureMonitoring'
 		),
 );
+
+export const CeleryTask = Loadable(
+	() =>
+		import(
+			/* webpackChunkName: "CeleryTask" */ 'pages/Celery/CeleryTask/CeleryTask'
+		),
+);

frontend/src/AppRoutes/routes.ts

@@ -1,4 +1,5 @@
 import ROUTES from 'constants/routes';
+import MessagingQueues from 'pages/MessagingQueues';
 import { RouteProps } from 'react-router-dom';
 
 import {
@@ -27,7 +28,6 @@ import {
 	LogsExplorer,
 	LogsIndexToFields,
 	LogsSaveViews,
-	MessagingQueues,
 	MQDetailPage,
 	MySettings,
 	NewDashboardPage,
@@ -401,6 +401,13 @@ const routes: AppRoutes[] = [
 		key: 'MESSAGING_QUEUES',
 		isPrivate: true,
 	},
+	{
+		path: ROUTES.MESSAGING_QUEUES_CELERY_TASK,
+		exact: true,
+		component: MessagingQueues,
+		key: 'MESSAGING_QUEUES_CELERY_TASK',
+		isPrivate: true,
+	},
 	{
 		path: ROUTES.MESSAGING_QUEUES_DETAIL,
 		exact: true,

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);
+				}
+			}
+		}
+	}
+}

frontend/src/components/CeleryTask/CeleryTaskConfigOptions/CeleryTaskConfigOptions.tsx

@@ -0,0 +1,92 @@
+import './CeleryTaskConfigOptions.styles.scss';
+
+import { Color } from '@signozhq/design-tokens';
+import { Button, Select, Spin, Tooltip, Typography } 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">
+				<Typography.Text style={{ whiteSpace: 'nowrap' }}>
+					Task Name
+				</Typography.Text>
+				<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;

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 };
+}

frontend/src/components/CeleryTask/CeleryTaskDetail/CeleryTaskDetail.style.scss

@@ -0,0 +1,74 @@
+.celery-task-detail-drawer {
+	.ant-drawer-wrapper-body {
+		background: var(--bg-ink-500);
+		border: 1px solid var(--bg-ink-300);
+	}
+
+	.ant-drawer-body {
+		padding: 0px;
+
+		.ant-card {
+			border: none;
+			.ant-card-body {
+				height: 100%;
+				background: var(--bg-ink-500);
+
+				.ant-table {
+					background: var(--bg-ink-500);
+				}
+			}
+		}
+	}
+
+	.ant-drawer-header {
+		border-bottom: 1px solid var(--bg-ink-300);
+		.ant-drawer-header-title {
+			.ant-drawer-close {
+				position: absolute;
+				right: 0;
+			}
+
+			button > svg {
+				color: var(--bg-vanilla-100);
+			}
+
+			.ant-drawer-title {
+				display: flex;
+				flex-direction: column;
+				align-items: flex-start;
+
+				.title {
+					color: var(--bg-vanilla-100);
+					font-family: Inter;
+					font-size: 18px;
+					font-style: normal;
+					font-weight: 600;
+					line-height: 18px;
+					letter-spacing: -0.45px;
+				}
+
+				.subtitle {
+					color: var(--bg-vanilla-400);
+					font-family: Inter;
+					font-size: 12px;
+					font-style: normal;
+					font-weight: 400;
+					line-height: 20px;
+				}
+			}
+		}
+	}
+
+	.ant-drawer-footer {
+		border-top: 1px solid var(--bg-ink-300);
+
+		.footer-text {
+			color: var(--bg-vanilla-400);
+			font-family: Inter;
+			font-size: 14px;
+			font-style: normal;
+			font-weight: 400;
+			line-height: 20px;
+		}
+	}
+}