feat: added right panel trace navigation

frontend/src/components/CeleryTask/CeleryTaskDetail/CeleryTaskDetail.tsx

@@ -3,9 +3,12 @@ import './CeleryTaskDetail.style.scss';
 import { Color, Spacing } from '@signozhq/design-tokens';
 import { Divider, Drawer, Typography } from 'antd';
 import { QueryParams } from 'constants/query';
+import { PANEL_TYPES } from 'constants/queryBuilder';
+import ROUTES from 'constants/routes';
 import dayjs from 'dayjs';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import useUrlQuery from 'hooks/useUrlQuery';
+import { RowData } from 'lib/query/createTableColumnsFromQuery';
 import { X } from 'lucide-react';
 import { useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
@@ -24,16 +27,18 @@ export type CeleryTaskData = {
 	timeRange: [number, number];
 };
 
+export interface CaptureDataProps extends CeleryTaskData {
+	widgetData: Widgets;
+}
+
 export type CeleryTaskDetailProps = {
 	onClose: () => void;
-	mainTitle: string;
 	widgetData: Widgets;
 	taskData: CeleryTaskData;
 	drawerOpen: boolean;
 };
 
 export default function CeleryTaskDetail({
-	mainTitle,
 	widgetData,
 	taskData,
 	onClose,
@@ -50,7 +55,6 @@ export default function CeleryTaskDetail({
 	const [totalTask, setTotalTask] = useState(0);
 
 	const getGraphData = (graphData?: MetricRangePayloadProps['data']): void => {
-		console.log(graphData);
 		setTotalTask((graphData?.result?.[0] as any)?.table?.rows.length);
 	};
 
@@ -100,12 +104,23 @@ export default function CeleryTaskDetail({
 		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, []);
 
+	const navigateToTrace = (data: RowData): void => {
+		console.log('navigateToTrace', data);
+		const urlParams = new URLSearchParams();
+		urlParams.set(QueryParams.startTime, (minTime / 1000000).toString());
+		urlParams.set(QueryParams.endTime, (maxTime / 1000000).toString());
+
+		const newTraceExplorerPath = `${ROUTES.TRACES_EXPLORER}`; // todo-sagar - add filters
+
+		history.push(newTraceExplorerPath);
+	};
+
 	return (
 		<Drawer
 			width="45%"
 			title={
 				<div>
-					<Typography.Text className="title">{mainTitle}</Typography.Text>
+					<Typography.Text className="title">{`Details - ${taskData.entity}`}</Typography.Text>
 					<div>
 						<Typography.Text className="subtitle">
 							{`${formatTimestamp(taskData.timeRange[0])} ${
@@ -115,7 +130,7 @@ export default function CeleryTaskDetail({
 							}`}
 						</Typography.Text>
 						<Divider type="vertical" />
-						<Typography.Text className="subtitle">task-details</Typography.Text>
+						<Typography.Text className="subtitle">{taskData.value}</Typography.Text>
 					</div>
 				</div>
 			}
@@ -135,9 +150,11 @@ export default function CeleryTaskDetail({
 		>
 			<CeleryTaskGraph
 				widgetData={widgetData}
-				onClick={(): void => {}}
 				getGraphData={getGraphData}
+				panelType={PANEL_TYPES.TABLE}
 				queryEnabled
+				openTracesButton
+				onOpenTraceBtnClick={navigateToTrace}
 			/>
 		</Drawer>
 	);

frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskGraph.tsx

@@ -5,25 +5,36 @@ import GridCard from 'container/GridCardLayout/GridCard';
 import { Card } from 'container/GridCardLayout/styles';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import useUrlQuery from 'hooks/useUrlQuery';
+import { RowData } from 'lib/query/createTableColumnsFromQuery';
+import { getStartAndEndTimesInMilliseconds } from 'pages/MessagingQueues/MessagingQueuesUtils';
 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 { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
 
-import { CeleryTaskData } from '../CeleryTaskDetail/CeleryTaskDetail';
+import { CaptureDataProps } from '../CeleryTaskDetail/CeleryTaskDetail';
+import { celeryTimeSeriesTablesWidgetData } from './CeleryTaskGraphUtils';
 
 function CeleryTaskGraph({
 	widgetData,
 	onClick,
 	getGraphData,
 	queryEnabled,
+	rightPanelTitle,
+	panelType,
+	openTracesButton,
+	onOpenTraceBtnClick,
 }: {
 	widgetData: Widgets;
-	onClick: (task: CeleryTaskData) => void;
+	onClick?: (task: CaptureDataProps) => void;
 	getGraphData?: (graphData?: MetricRangePayloadProps['data']) => void;
 	queryEnabled: boolean;
+	rightPanelTitle?: string;
+	panelType?: PANEL_TYPES;
+	openTracesButton?: boolean;
+	onOpenTraceBtnClick?: (record: RowData) => void;
 }): JSX.Element {
 	const history = useHistory();
 	const { pathname } = useLocation();
@@ -51,26 +62,49 @@ function CeleryTaskGraph({
 	return (
 		<Card
 			isDarkMode={isDarkMode}
-			$panelType={PANEL_TYPES.TIME_SERIES}
+			$panelType={PANEL_TYPES.TIME_SERIES || panelType}
 			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);
+				onClickHandler={(xValue, _yValue, _mouseX, _mouseY, data): void => {
+					const { start, end } = getStartAndEndTimesInMilliseconds(xValue);
+
+					// Extract entity and value from data
+					const [firstDataPoint] = Object.entries(data || {});
+					const [entity, value] = firstDataPoint || [];
+
+					const widgetData = celeryTimeSeriesTablesWidgetData(
+						entity,
+						value,
+						rightPanelTitle || '',
+					);
+
+					onClick?.({
+						entity,
+						value,
+						timeRange: [start, end],
+						widgetData,
+					});
 				}}
 				getGraphData={getGraphData}
 				isQueryEnabled={queryEnabled}
+				openTracesButton={openTracesButton}
+				onOpenTraceBtnClick={onOpenTraceBtnClick}
 			/>
 		</Card>
 	);
 }
 
 CeleryTaskGraph.defaultProps = {
 	getGraphData: undefined,
+	onClick: undefined,
+	rightPanelTitle: undefined,
+	panelType: PANEL_TYPES.TIME_SERIES,
+	openTracesButton: false,
+	onOpenTraceBtnClick: undefined,
 };
 
 export default CeleryTaskGraph;

frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskGraphGrid.tsx

@@ -1,6 +1,6 @@
 import './CeleryTaskGraph.style.scss';
 
-import { CeleryTaskData } from '../CeleryTaskDetail/CeleryTaskDetail';
+import { CaptureDataProps } from '../CeleryTaskDetail/CeleryTaskDetail';
 import CeleryTaskGraph from './CeleryTaskGraph';
 import {
 	celeryActiveTasksWidgetData,
@@ -16,7 +16,7 @@ export default function CeleryTaskGraphGrid({
 	onClick,
 	queryEnabled,
 }: {
-	onClick: (task: CeleryTaskData) => void;
+	onClick: (task: CaptureDataProps) => void;
 	queryEnabled: boolean;
 }): JSX.Element {
 	const bottomWidgetData = [
@@ -25,14 +25,19 @@ export default function CeleryTaskGraphGrid({
 		celeryLatencyByWorkerWidgetData,
 	];
 
+	const rightPanelTitle = [
+		'Tasks/s by worker',
+		'Error% by worker',
+		'Latency by worker',
+	];
+
 	return (
 		<div className="celery-task-graph-grid-container">
 			<div className="celery-task-graph-grid">
-				<CeleryTaskHistogram onClick={onClick} queryEnabled={queryEnabled} />
+				<CeleryTaskHistogram queryEnabled={queryEnabled} />
 				<CeleryTaskGraph
 					key={celeryWorkerOnlineWidgetData.id}
 					widgetData={celeryWorkerOnlineWidgetData}
-					onClick={onClick}
 					queryEnabled={queryEnabled}
 				/>
 			</div>
@@ -41,17 +46,17 @@ export default function CeleryTaskGraphGrid({
 				<CeleryTaskGraph
 					key={celeryActiveTasksWidgetData.id}
 					widgetData={celeryActiveTasksWidgetData}
-					onClick={onClick}
 					queryEnabled={queryEnabled}
 				/>
 			</div>
 			<div className="celery-task-graph-grid-bottom">
-				{bottomWidgetData.map((widgetData) => (
+				{bottomWidgetData.map((widgetData, index) => (
 					<CeleryTaskGraph
 						key={widgetData.id}
 						widgetData={widgetData}
 						onClick={onClick}
 						queryEnabled={queryEnabled}
+						rightPanelTitle={rightPanelTitle[index]}
 					/>
 				))}
 			</div>