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

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'
+		),
+);

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,

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,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;

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,5 @@
+.celery-task-detail-drawer {
+	.ant-drawer-body {
+		padding: 0px;
+	}
+}

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

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

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;