feat: celery overview page

frontend/src/AppRoutes/pageComponents.ts

@@ -254,3 +254,10 @@ export const CeleryTask = Loadable(
 			/* webpackChunkName: "CeleryTask" */ 'pages/Celery/CeleryTask/CeleryTask'
 		),
 );
+
+export const CeleryOverview = Loadable(
+	() =>
+		import(
+			/* webpackChunkName: "CeleryOverview" */ 'pages/Celery/CeleryOverview/CeleryOverview'
+		),
+);

frontend/src/AppRoutes/routes.ts

@@ -408,6 +408,13 @@ const routes: AppRoutes[] = [
 		key: 'MESSAGING_QUEUES_CELERY_TASK',
 		isPrivate: true,
 	},
+	{
+		path: ROUTES.MESSAGING_QUEUES_CELERY_OVERVIEW,
+		exact: true,
+		component: MessagingQueues,
+		key: 'MESSAGING_QUEUES_CELERY_OVERVIEW',
+		isPrivate: true,
+	},
 	{
 		path: ROUTES.MESSAGING_QUEUES_DETAIL,
 		exact: true,

frontend/src/api/messagingQueues/celery/getQueueOverview.ts

@@ -0,0 +1,53 @@
+import axios from 'api';
+import { ErrorResponse, SuccessResponse } from 'types/api';
+
+export interface QueueOverviewPayload {
+	start: number;
+	end: number;
+	filters: {
+		items: {
+			key: {
+				key: string;
+				dataType: string;
+			};
+			op: string;
+			value: string[];
+		}[];
+		op: 'AND' | 'OR';
+	};
+}
+
+export interface QueueOverviewResponse {
+	status: string;
+	data: {
+		timestamp?: string;
+		data: {
+			destination?: string;
+			error_percentage?: number;
+			kind_string?: string;
+			messaging_system?: string;
+			p95_latency?: number;
+			service_name?: string;
+			span_name?: string;
+			throughput?: number;
+		}[];
+	}[];
+}
+
+export const getQueueOverview = async (
+	props: QueueOverviewPayload,
+): Promise<SuccessResponse<QueueOverviewResponse['data']> | ErrorResponse> => {
+	const { start, end, filters } = props;
+	const response = await axios.post(`messaging-queues/queue-overview`, {
+		start,
+		end,
+		filters,
+	});
+
+	return {
+		statusCode: 200,
+		error: null,
+		message: response.data.status,
+		payload: response.data.data,
+	};
+};

frontend/src/components/CeleryOverview/CeleryOverviewConfigOptions/CeleryOverviewConfigOptions.styles.scss

@@ -0,0 +1,39 @@
+.celery-overview-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-overview-filters {
+		.celery-filters {
+			.config-select-option {
+				.ant-select-selector {
+					border: 1px solid var(--bg-vanilla-300);
+					background: var(--bg-vanilla-100);
+				}
+			}
+		}
+	}
+}

frontend/src/components/CeleryOverview/CeleryOverviewConfigOptions/CeleryOverviewConfigOptions.tsx

@@ -0,0 +1,126 @@
+import './CeleryOverviewConfigOptions.styles.scss';
+
+import { Color } from '@signozhq/design-tokens';
+import { Button, Select, Spin, Tooltip } from 'antd';
+import {
+	getValuesFromQueryParams,
+	setQueryParamsFromOptions,
+} from 'components/CeleryTask/CeleryUtils';
+import { useCeleryFilterOptions } from 'components/CeleryTask/useCeleryFilterOptions';
+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';
+
+interface SelectOptionConfig {
+	placeholder: string;
+	queryParam: QueryParams;
+	filterType: 'serviceName' | 'spanName' | 'msgSystem';
+}
+
+function FilterSelect({
+	placeholder,
+	queryParam,
+	filterType,
+}: SelectOptionConfig): JSX.Element {
+	const { handleSearch, isFetching, options } = useCeleryFilterOptions(
+		filterType,
+	);
+	const urlQuery = useUrlQuery();
+	const history = useHistory();
+	const location = useLocation();
+
+	return (
+		<Select
+			key={filterType}
+			placeholder={placeholder}
+			showSearch
+			mode="multiple"
+			options={options}
+			loading={isFetching}
+			className="config-select-option"
+			onSearch={handleSearch}
+			maxTagCount={4}
+			maxTagPlaceholder={SelectMaxTagPlaceholder}
+			value={getValuesFromQueryParams(queryParam, urlQuery) || []}
+			notFoundContent={
+				isFetching ? (
+					<span>
+						<Spin size="small" /> Loading...
+					</span>
+				) : (
+					<span>No {placeholder} found</span>
+				)
+			}
+			onChange={(value): void => {
+				handleSearch('');
+				setQueryParamsFromOptions(value, urlQuery, history, location, queryParam);
+			}}
+		/>
+	);
+}
+
+function CeleryOverviewConfigOptions(): JSX.Element {
+	const [isURLCopied, setIsURLCopied] = useState(false);
+
+	const [, handleCopyToClipboard] = useCopyToClipboard();
+
+	const selectConfigs: SelectOptionConfig[] = [
+		{
+			placeholder: 'Service Name',
+			queryParam: QueryParams.service,
+			filterType: 'serviceName',
+		},
+		// {
+		// 	placeholder: 'Span Name',
+		// 	queryParam: QueryParams.spanName,
+		// 	filterType: 'spanName',
+		// },
+		// {
+		// 	placeholder: 'Msg System',
+		// 	queryParam: QueryParams.msgSystem,
+		// 	filterType: 'msgSystem',
+		// },
+	];
+
+	const handleShareURL = (): void => {
+		handleCopyToClipboard(window.location.href);
+		setIsURLCopied(true);
+		setTimeout(() => {
+			setIsURLCopied(false);
+		}, 1000);
+	};
+
+	return (
+		<div className="celery-overview-filters">
+			<div className="celery-filters">
+				{selectConfigs.map((config) => (
+					<FilterSelect
+						key={config.filterType}
+						placeholder={config.placeholder}
+						queryParam={config.queryParam}
+						filterType={config.filterType}
+					/>
+				))}
+			</div>
+			<Tooltip title="Share this" arrow={false}>
+				<Button
+					className="periscope-btn copy-url-btn"
+					onClick={handleShareURL}
+					icon={
+						isURLCopied ? (
+							<Check size={14} color={Color.BG_FOREST_500} />
+						) : (
+							<Share2 size={14} />
+						)
+					}
+				/>
+			</Tooltip>
+		</div>
+	);
+}
+
+export default CeleryOverviewConfigOptions;

frontend/src/components/CeleryOverview/CeleryOverviewTable/CeleryOverviewTable.styles.scss

@@ -0,0 +1,106 @@
+.progress-container {
+	display: flex;
+	align-items: center;
+}
+
+.progress-bar {
+	flex: 1;
+	margin-right: 8px;
+}
+
+.clickable-row {
+	cursor: pointer;
+}
+
+.celery-overview-table {
+	.ant-table {
+		.ant-table-thead > tr > th {
+			padding: 12px;
+			font-weight: 500;
+			font-size: 12px;
+			line-height: 18px;
+
+			background: var(--bg-ink-500);
+			border-bottom: none;
+
+			color: var(--Vanilla-400, #c0c1c3);
+			font-family: Inter;
+			font-size: 11px;
+			font-style: normal;
+			font-weight: 600;
+			line-height: 18px; /* 163.636% */
+			letter-spacing: 0.44px;
+			text-transform: uppercase;
+
+			&::before {
+				background-color: transparent;
+			}
+		}
+
+		.ant-table-cell {
+			padding: 12px;
+			font-size: 13px;
+			line-height: 20px;
+			color: var(--bg-vanilla-100);
+			background: var(--bg-ink-500);
+		}
+
+		.progress-container {
+			.ant-progress-bg {
+				height: 8px !important;
+				border-radius: 4px;
+			}
+		}
+
+		.ant-table-tbody > tr:hover > td {
+			background: rgba(255, 255, 255, 0.04);
+		}
+
+		.ant-table-cell:first-child {
+			text-align: justify;
+		}
+
+		.ant-table-cell:nth-child(2) {
+			padding-left: 16px;
+			padding-right: 16px;
+		}
+
+		.ant-table-cell:nth-child(n + 3) {
+			padding-right: 24px;
+		}
+		.column-header-right {
+			text-align: right;
+		}
+		.column-header-left {
+			text-align: left;
+		}
+		.ant-table-tbody > tr > td {
+			border-bottom: none;
+		}
+	}
+
+	.ant-pagination {
+		position: relative;
+		bottom: 0;
+		width: 100%;
+		background: var(--bg-ink-500);
+		padding: 4px;
+		margin: 0;
+
+		// this is to offset intercom icon
+		padding-right: 72px;
+
+		.ant-pagination-item {
+			border-radius: 4px;
+
+			&-active {
+				background: var(--bg-robin-500);
+				border-color: var(--bg-robin-500);
+
+				a {
+					color: var(--bg-ink-500) !important;
+				}
+			}
+		}
+	}
+}