feat: added right panel graphs in overview page

frontend/src/AppRoutes/routes.ts

@@ -409,10 +409,10 @@ const routes: AppRoutes[] = [
 		isPrivate: true,
 	},
 	{
-		path: ROUTES.MESSAGING_QUEUES_CELERY_OVERVIEW,
+		path: ROUTES.MESSAGING_QUEUES_OVERVIEW,
 		exact: true,
 		component: MessagingQueues,
-		key: 'MESSAGING_QUEUES_CELERY_OVERVIEW',
+		key: 'MESSAGING_QUEUES_OVERVIEW',
 		isPrivate: true,
 	},
 	{

frontend/src/components/CeleryOverview/CeleryOverviewTable/CeleryOverviewTable.tsx

@@ -260,7 +260,11 @@ function makeFilters(urlQuery: URLSearchParams): Filter[] {
 		.filter((filter): filter is Filter => filter !== null);
 }
 
-export default function CeleryOverviewTable(): JSX.Element {
+export default function CeleryOverviewTable({
+	onRowClick,
+}: {
+	onRowClick: (record: RowData) => void;
+}): JSX.Element {
 	const [tableData, setTableData] = useState<RowData[]>([]);
 
 	const { minTime, maxTime } = useSelector<AppState, GlobalReducer>(
@@ -316,7 +320,7 @@ export default function CeleryOverviewTable(): JSX.Element {
 	);
 
 	const handleRowClick = (record: RowData): void => {
-		console.log(record);
+		onRowClick(record);
 	};
 
 	return (

frontend/src/constants/routes.ts

@@ -64,7 +64,7 @@ const ROUTES = {
 	INFRASTRUCTURE_MONITORING_HOSTS: '/infrastructure-monitoring/hosts',
 	INFRASTRUCTURE_MONITORING_KUBERNETES: '/infrastructure-monitoring/kubernetes',
 	MESSAGING_QUEUES_CELERY_TASK: '/messaging-queues/celery-task',
-	MESSAGING_QUEUES_CELERY_OVERVIEW: '/messaging-queues/celery-overview',
+	MESSAGING_QUEUES_OVERVIEW: '/messaging-queues/overview',
 } as const;
 
 export default ROUTES;

frontend/src/container/AppLayout/index.tsx

@@ -290,7 +290,7 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 		routeKey === 'MESSAGING_QUEUES' ||
 		routeKey === 'MESSAGING_QUEUES_DETAIL' ||
 		routeKey === 'MESSAGING_QUEUES_CELERY_TASK' ||
-		routeKey === 'MESSAGING_QUEUES_CELERY_OVERVIEW';
+		routeKey === 'MESSAGING_QUEUES_OVERVIEW';
 
 	const isDashboardListView = (): boolean => routeKey === 'ALL_DASHBOARD';
 	const isAlertHistory = (): boolean => routeKey === 'ALERT_HISTORY';

frontend/src/container/SideNav/config.ts

@@ -52,7 +52,7 @@ export const routeConfig: Record<string, QueryParams[]> = {
 	[ROUTES.MESSAGING_QUEUES]: [QueryParams.resourceAttributes],
 	[ROUTES.MESSAGING_QUEUES_DETAIL]: [QueryParams.resourceAttributes],
 	[ROUTES.MESSAGING_QUEUES_CELERY_TASK]: [QueryParams.resourceAttributes],
-	[ROUTES.MESSAGING_QUEUES_CELERY_OVERVIEW]: [QueryParams.resourceAttributes],
+	[ROUTES.MESSAGING_QUEUES_OVERVIEW]: [QueryParams.resourceAttributes],
 	[ROUTES.INFRASTRUCTURE_MONITORING_HOSTS]: [QueryParams.resourceAttributes],
 	[ROUTES.INFRASTRUCTURE_MONITORING_KUBERNETES]: [
 		QueryParams.resourceAttributes,

frontend/src/container/TopNav/DateTimeSelectionV2/config.ts

@@ -215,7 +215,7 @@ export const routesToSkip = [
 	ROUTES.MESSAGING_QUEUES,
 	ROUTES.MESSAGING_QUEUES_DETAIL,
 	ROUTES.MESSAGING_QUEUES_CELERY_TASK,
-	ROUTES.MESSAGING_QUEUES_CELERY_OVERVIEW,
+	ROUTES.MESSAGING_QUEUES_OVERVIEW,
 	ROUTES.INFRASTRUCTURE_MONITORING_HOSTS,
 	ROUTES.SOMETHING_WENT_WRONG,
 	ROUTES.INFRASTRUCTURE_MONITORING_KUBERNETES,

frontend/src/pages/Celery/CeleryOverview/CeleryOverview.tsx

@@ -1,20 +1,41 @@
 import './CeleryOverview.styles.scss';
 
 import CeleryOverviewConfigOptions from 'components/CeleryOverview/CeleryOverviewConfigOptions/CeleryOverviewConfigOptions';
-import CeleryOverviewTable from 'components/CeleryOverview/CeleryOverviewTable/CeleryOverviewTable';
+import CeleryOverviewTable, {
+	RowData,
+} from 'components/CeleryOverview/CeleryOverviewTable/CeleryOverviewTable';
 import DateTimeSelectionV2 from 'container/TopNav/DateTimeSelectionV2';
+import { useState } from 'react';
+
+import CeleryOverviewDetails from './CeleryOverviewDetail/CeleryOverviewDetails';
 
 export default function CeleryOverview(): JSX.Element {
+	const [details, setDetails] = useState<RowData | null>(null);
+
+	const onRowClick = (record: RowData): void => {
+		setDetails(record);
+	};
+
 	return (
 		<div className="celery-overview-container">
 			<div className="celery-overview-content">
 				<div className="celery-overview-content-header">
-					<p className="celery-overview-content-header-title">Celery Overview</p>
+					<p className="celery-overview-content-header-title">
+						Messaging Queue Overview
+					</p>
 					<DateTimeSelectionV2 showAutoRefresh={false} hideShareModal />
 				</div>
 				<CeleryOverviewConfigOptions />
-				<CeleryOverviewTable />
+				<CeleryOverviewTable onRowClick={onRowClick} />
 			</div>
+			{details && (
+				<CeleryOverviewDetails
+					details={details}
+					onClose={(): void => {
+						setDetails(null);
+					}}
+				/>
+			)}
 		</div>
 	);
 }

frontend/src/pages/Celery/CeleryOverview/CeleryOverviewDetail/CeleryOverviewDetails.styles.scss

@@ -0,0 +1,29 @@
+.celery-overview-detail-container {
+	display: flex;
+	flex-direction: column;
+	gap: 16px;
+	padding: 16px 8px;
+}
+
+.overview-right-panel-graph-card {
+	border-radius: 8px;
+	border: 1px solid #262626 !important;
+	background: #0a0a0a;
+	box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1),
+		0px 1px 2px -1px rgba(0, 0, 0, 0.1);
+
+	.request-rate-card,
+	.error-rate-card,
+	.avg-latency-card {
+		height: 320px !important;
+		padding: 10px;
+		width: 100%;
+		box-sizing: border-box;
+		border-bottom: 0.75px solid #262626;
+		margin-bottom: 12px;
+
+		.widget-graph-container {
+			height: 260px;
+		}
+	}
+}

frontend/src/pages/Celery/CeleryOverview/CeleryOverviewDetail/CeleryOverviewDetails.tsx

@@ -0,0 +1,64 @@
+import './CeleryOverviewDetails.styles.scss';
+
+import { Color, Spacing } from '@signozhq/design-tokens';
+import { Divider, Drawer, Typography } from 'antd';
+import { RowData } from 'components/CeleryOverview/CeleryOverviewTable/CeleryOverviewTable';
+import { useIsDarkMode } from 'hooks/useDarkMode';
+import { X } from 'lucide-react';
+
+import OverviewRightPanelGraph from './OverviewRightPanelGraph';
+import ValueInfo from './ValueInfo';
+
+export default function CeleryOverviewDetails({
+	details,
+	onClose,
+}: {
+	details: RowData;
+	onClose: () => void;
+}): JSX.Element {
+	const isDarkMode = useIsDarkMode();
+	console.log(details);
+
+	return (
+		<Drawer
+			width="60%"
+			title={
+				<div>
+					<Typography.Text className="title">{details.service_name}</Typography.Text>
+					<div>
+						<Typography.Text className="subtitle">
+							{details.span_name}
+						</Typography.Text>
+						<Divider type="vertical" />
+						<Typography.Text className="subtitle">
+							{details.messaging_system}
+						</Typography.Text>
+						<Divider type="vertical" />
+						<Typography.Text className="subtitle">
+							{details.destination}
+						</Typography.Text>
+						<Divider type="vertical" />
+						<Typography.Text className="subtitle">
+							{details.kind_string}
+						</Typography.Text>
+					</div>
+				</div>
+			}
+			placement="right"
+			onClose={onClose}
+			open={!!details}
+			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 }} />}
+		>
+			<div className="celery-overview-detail-container">
+				<ValueInfo />
+				<OverviewRightPanelGraph />
+			</div>
+		</Drawer>
+	);
+}

frontend/src/pages/Celery/CeleryOverview/CeleryOverviewDetail/OverviewRightPanelGraph.tsx

@@ -0,0 +1,88 @@
+import { Card } from 'antd';
+import { QueryParams } from 'constants/query';
+import { ViewMenuAction } from 'container/GridCardLayout/config';
+import GridCard from 'container/GridCardLayout/GridCard';
+import useUrlQuery from 'hooks/useUrlQuery';
+import { useCallback, useMemo } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { useHistory, useLocation } from 'react-router-dom';
+import { UpdateTimeInterval } from 'store/actions';
+import { AppState } from 'store/reducers';
+import { GlobalReducer } from 'types/reducer/globalTime';
+
+import {
+	celeryOverviewAvgLatencyGraphData,
+	celeryOverviewErrorRateGraphData,
+	celeryOverviewRequestRateGraphData,
+} from '../CeleryOverviewGraphUtils';
+
+export default function OverviewRightPanelGraph(): JSX.Element {
+	const history = useHistory();
+	const { pathname } = useLocation();
+	const dispatch = useDispatch();
+	const urlQuery = useUrlQuery();
+
+	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],
+	);
+
+	const { minTime, maxTime } = useSelector<AppState, GlobalReducer>(
+		(state) => state.globalTime,
+	);
+
+	const requestRateWidget = useMemo(
+		() => celeryOverviewRequestRateGraphData(minTime, maxTime),
+		[minTime, maxTime],
+	);
+
+	const errorRateWidget = useMemo(
+		() => celeryOverviewErrorRateGraphData(minTime, maxTime),
+		[minTime, maxTime],
+	);
+
+	const avgLatencyWidget = useMemo(
+		() => celeryOverviewAvgLatencyGraphData(minTime, maxTime),
+		[minTime, maxTime],
+	);
+	return (
+		<Card className="overview-right-panel-graph-card">
+			<div className="request-rate-card">
+				<GridCard
+					widget={requestRateWidget}
+					headerMenuList={[...ViewMenuAction]}
+					onDragSelect={onDragSelect}
+					onClickHandler={(...args): void => console.log(...args)}
+				/>
+			</div>
+			<div className="error-rate-card">
+				<GridCard
+					widget={errorRateWidget}
+					headerMenuList={[...ViewMenuAction]}
+					onDragSelect={onDragSelect}
+					onClickHandler={(...args): void => console.log(...args)}
+				/>
+			</div>
+			<div className="avg-latency-card">
+				<GridCard
+					widget={avgLatencyWidget}
+					headerMenuList={[...ViewMenuAction]}
+					onDragSelect={onDragSelect}
+					onClickHandler={(...args): void => console.log(...args)}
+				/>
+			</div>
+		</Card>
+	);
+}

frontend/src/pages/Celery/CeleryOverview/CeleryOverviewDetail/ValueInfo.styles.scss

@@ -0,0 +1,63 @@
+.value-info-card {
+	border-radius: 8px;
+	border: 1px solid #262626 !important;
+	background: #0a0a0a;
+	box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1),
+		0px 1px 2px -1px rgba(0, 0, 0, 0.1);
+
+	.metric-column {
+		.metric-title {
+			color: #fafafa;
+			font-size: 14px;
+			font-weight: 500;
+		}
+
+		.metric-value-container {
+			display: flex;
+			align-items: baseline;
+			gap: 6px;
+		}
+
+		.metric-value {
+			font-size: 24px;
+			font-weight: 400;
+
+			&.red {
+				color: #f87171;
+			}
+
+			&.green {
+				color: #4ade80;
+			}
+
+			&.loading {
+				opacity: 0.5;
+			}
+		}
+
+		.metric-unit {
+			color: #a3a3a3;
+			font-size: 14px;
+		}
+
+		.metric-reference {
+			color: #a3a3a3;
+			font-size: 12px;
+		}
+
+		.trace-button {
+			margin-top: 8px;
+			background: #262626;
+			border: none;
+
+			&:hover {
+				background: #404040;
+			}
+
+			&:disabled {
+				opacity: 0.5;
+				cursor: not-allowed;
+			}
+		}
+	}
+}