fix: add API monotring fixes

Signed-off-by: Shivanshu Raj Shrivastava <shivanshu1333@gmail.com>

frontend/src/container/ApiMonitoring/APIMonitoringUtils.test.tsx

@@ -411,7 +411,7 @@ describe('API Monitoring Utils', () => {
 			const statusFilter = result.items.find(
 				(item) =>
 					item.key &&
-					item.key.key === SPAN_ATTRIBUTES.STATUS_CODE &&
+					item.key.key === SPAN_ATTRIBUTES.RESPONSE_STATUS_CODE &&
 					item.value === statusCode,
 			);
 			expect(statusFilter).toBeDefined();

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/components/MetricOverTimeGraph.tsx

@@ -21,6 +21,7 @@ function MetricOverTimeGraph({
 						onDragSelect={onDragSelect}
 						customOnDragSelect={(): void => {}}
 						customTimeRange={timeRange}
+						isTenMinutesTracesTimeRange
 					/>
 				</div>
 			</Card>

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/components/StatusCodeBarCharts.tsx

@@ -19,6 +19,7 @@ import { useResizeObserver } from 'hooks/useDimensions';
 import { useNotifications } from 'hooks/useNotifications';
 import { getUPlotChartOptions } from 'lib/uPlotLib/getUplotChartOptions';
 import { getUPlotChartData } from 'lib/uPlotLib/utils/getUplotChartData';
+import { getStartAndEndTimesInMilliseconds } from 'pages/MessagingQueues/MessagingQueuesUtils';
 import { useCallback, useMemo, useRef, useState } from 'react';
 import { UseQueryResult } from 'react-query';
 import { SuccessResponse } from 'types/api';
@@ -151,6 +152,7 @@ function StatusCodeBarCharts({
 			queryData?: { queryName: string; inFocusOrNot: boolean },
 		): void => {
 			const customFilters = getCustomFiltersForBarChart(metric);
+			const { start, end } = getStartAndEndTimesInMilliseconds(xValue);
 			handleGraphClick({
 				xValue,
 				yValue,
@@ -164,6 +166,7 @@ function StatusCodeBarCharts({
 				notifications,
 				graphClick,
 				customFilters,
+				customTracesTimeRange: { start, end },
 			});
 		},
 		[

frontend/src/container/ApiMonitoring/Explorer/Domains/DomainDetails/constants.ts

@@ -13,7 +13,6 @@ export const VIEW_TYPES = {
 // Span attribute keys - these are the source of truth for all attribute keys
 export const SPAN_ATTRIBUTES = {
 	URL_PATH: 'http.url',
-	STATUS_CODE: 'status_code',
 	RESPONSE_STATUS_CODE: 'response_status_code',
 	SERVER_NAME: 'net.peer.name',
 	SERVER_PORT: 'net.peer.port',

frontend/src/container/ApiMonitoring/utils.tsx

@@ -1438,12 +1438,12 @@ export const getTopErrorsCoRelationQueryFilters = (
 		{
 			id: 'f6891e27',
 			key: {
-				key: 'status_code',
-				dataType: DataTypes.Float64,
+				key: 'response_status_code',
+				dataType: DataTypes.String,
 				type: '',
 				isColumn: true,
 				isJSON: false,
-				id: 'status_code--float64----true',
+				id: 'response_status_code--string----true',
 			},
 			op: '=',
 			value: statusCode,

frontend/src/container/GridCardLayout/GridCard/WidgetGraphComponent.tsx

@@ -15,6 +15,7 @@ import { useSafeNavigate } from 'hooks/useSafeNavigate';
 import useUrlQuery from 'hooks/useUrlQuery';
 import createQueryParams from 'lib/createQueryParams';
 import { RowData } from 'lib/query/createTableColumnsFromQuery';
+import { getStartAndEndTimesInMilliseconds } from 'pages/MessagingQueues/MessagingQueuesUtils';
 import { useDashboard } from 'providers/Dashboard/Dashboard';
 import {
 	Dispatch,
@@ -57,6 +58,7 @@ function WidgetGraphComponent({
 	customSeries,
 	customErrorMessage,
 	customOnRowClick,
+	isTenMinutesTracesTimeRange,
 }: WidgetGraphComponentProps): JSX.Element {
 	const { safeNavigate } = useSafeNavigate();
 	const [deleteModal, setDeleteModal] = useState(false);
@@ -263,6 +265,7 @@ function WidgetGraphComponent({
 		metric?: { [key: string]: string },
 		queryData?: { queryName: string; inFocusOrNot: boolean },
 	): void => {
+		const { start, end } = getStartAndEndTimesInMilliseconds(xValue);
 		handleGraphClick({
 			xValue,
 			yValue,
@@ -275,6 +278,9 @@ function WidgetGraphComponent({
 			navigateToExplorer,
 			notifications,
 			graphClick,
+			...(isTenMinutesTracesTimeRange
+				? { customTracesTimeRange: { start, end } }
+				: {}),
 		});
 	};
 
@@ -393,6 +399,7 @@ WidgetGraphComponent.defaultProps = {
 	yAxisUnit: undefined,
 	setLayout: undefined,
 	onClickHandler: undefined,
+	isTenMinutesTracesTimeRange: false,
 };
 
 export default WidgetGraphComponent;

frontend/src/container/GridCardLayout/GridCard/index.tsx

@@ -49,6 +49,7 @@ function GridCardGraph({
 	analyticsEvent,
 	customTimeRange,
 	customOnRowClick,
+	isTenMinutesTracesTimeRange,
 }: GridCardGraphProps): JSX.Element {
 	const dispatch = useDispatch();
 	const [errorMessage, setErrorMessage] = useState<string>();
@@ -289,6 +290,7 @@ function GridCardGraph({
 					customSeries={customSeries}
 					customErrorMessage={isInternalServerError ? customErrorMessage : undefined}
 					customOnRowClick={customOnRowClick}
+					isTenMinutesTracesTimeRange={isTenMinutesTracesTimeRange}
 				/>
 			)}
 		</div>
@@ -303,6 +305,7 @@ GridCardGraph.defaultProps = {
 	headerMenuList: [MenuItemKeys.View],
 	version: 'v3',
 	analyticsEvent: undefined,
+	isTenMinutesTracesTimeRange: false,
 };
 
 export default memo(GridCardGraph);

frontend/src/container/GridCardLayout/GridCard/types.ts

@@ -40,6 +40,7 @@ export interface WidgetGraphComponentProps {
 	customSeries?: (data: QueryData[]) => uPlot.Series[];
 	customErrorMessage?: string;
 	customOnRowClick?: (record: RowData) => void;
+	isTenMinutesTracesTimeRange?: boolean;
 }
 
 export interface GridCardGraphProps {
@@ -67,6 +68,7 @@ export interface GridCardGraphProps {
 		endTime: number;
 	};
 	customOnRowClick?: (record: RowData) => void;
+	isTenMinutesTracesTimeRange?: boolean;
 }
 
 export interface GetGraphVisibilityStateOnLegendClickProps {

frontend/src/container/GridCardLayout/GridCard/utils.ts

@@ -179,6 +179,7 @@ interface HandleGraphClickParams {
 	notifications: NotificationInstance;
 	graphClick: (props: GraphClickProps) => void;
 	customFilters?: TagFilterItem[];
+	customTracesTimeRange?: { start: number; end: number };
 }
 
 export const handleGraphClick = async ({
@@ -194,6 +195,7 @@ export const handleGraphClick = async ({
 	notifications,
 	graphClick,
 	customFilters,
+	customTracesTimeRange,
 }: HandleGraphClickParams): Promise<void> => {
 	const { stepInterval } = widget?.query?.builder?.queryData?.[0] ?? {};
 
@@ -225,8 +227,8 @@ export const handleGraphClick = async ({
 				navigateToExplorer({
 					filters: [...result[key].filters, ...(customFilters || [])],
 					dataSource: result[key].dataSource as DataSource,
-					startTime: xValue,
-					endTime: xValue + (stepInterval ?? 60),
+					startTime: customTracesTimeRange?.start || xValue,
+					endTime: customTracesTimeRange?.end || xValue + (stepInterval ?? 60),
 					shouldResolveQuery: true,
 				}),
 		}));