@@ -173,7 +174,7 @@ export default function CeleryTaskGraphGrid({
{!collapsedSections.traceBasedGraphs && (
<>
-
+
{bottomWidgetData.map((widgetData, index) => (
void;
queryEnabled: boolean;
}): JSX.Element {
const history = useHistory();
@@ -106,31 +105,51 @@ function CeleryTaskLatencyGraph({
[celeryTaskLatencyData, selectedFilters],
);
- const onGraphClick = (
- xValue: number,
- _yValue: number,
- _mouseX: number,
- _mouseY: number,
- data?: {
- [key: string]: string;
+ const [selectedTimeStamp, setSelectedTimeStamp] = useState(0);
+ const [entityData, setEntityData] = useState<{
+ entity: string;
+ value: string;
+ }>();
+
+ const handleSetTimeStamp = useCallback((selectTime: number) => {
+ setSelectedTimeStamp(selectTime);
+ }, []);
+
+ const onGraphClick = useCallback(
+ (type: string): OnClickPluginOpts['onClick'] => (
+ xValue,
+ yValue,
+ mouseX,
+ mouseY,
+ data,
+ ): Promise => {
+ const [firstDataPoint] = Object.entries(data || {});
+ const [entity, value] = firstDataPoint;
+ setEntityData({
+ entity,
+ value,
+ });
+
+ return onGraphClickHandler(handleSetTimeStamp)(
+ xValue,
+ yValue,
+ mouseX,
+ mouseY,
+ type,
+ );
},
- ): void => {
- const { start, end } = getStartAndEndTimesInMilliseconds(xValue);
+ [handleSetTimeStamp],
+ );
- // Extract entity and value from data
- const [firstDataPoint] = Object.entries(data || {});
- const [entity, value] = (firstDataPoint || ([] as unknown)) as [
- string,
- string,
- ];
+ const navigateToTraces = useNavigateToTraces();
- onClick?.({
- entity,
- value,
- timeRange: [start, end],
- widgetData: celeryTimeSeriesTablesWidgetData(entity, value, 'Task Latency'),
+ const goToTraces = useCallback(() => {
+ const { start, end } = getStartAndEndTimesInMilliseconds(selectedTimeStamp);
+ const filters = createFiltersFromData({
+ [entityData?.entity as string]: entityData?.value,
});
- };
+ navigateToTraces(filters, start, end, true);
+ }, [entityData, navigateToTraces, selectedTimeStamp]);
return (
{graphState === CeleryTaskGraphState.P99 && (
-
+ <>
+
+
+
)}
{graphState === CeleryTaskGraphState.P95 && (
-
+ <>
+
+
+
)}
{graphState === CeleryTaskGraphState.P90 && (
-
+ <>
+
+
+
)}
diff --git a/frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskStateGraphConfig.tsx b/frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskStateGraphConfig.tsx
index 21d8180d16..7768df0530 100644
--- a/frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskStateGraphConfig.tsx
+++ b/frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskStateGraphConfig.tsx
@@ -2,8 +2,14 @@
import './CeleryTaskGraph.style.scss';
import { Col, Row } from 'antd';
-import { Dispatch, SetStateAction } from 'react';
+import { QueryParams } from 'constants/query';
+import useUrlQuery from 'hooks/useUrlQuery';
+import { Dispatch, SetStateAction, useMemo } from 'react';
+import {
+ applyCeleryFilterOnWidgetData,
+ getFiltersFromQueryParams,
+} from '../CeleryUtils';
import {
celeryAllStateCountWidgetData,
celeryFailedStateCountWidgetData,
@@ -42,16 +48,29 @@ function CeleryTaskStateGraphConfig({
setBarState(key as CeleryTaskState);
};
- const { values, isLoading, isError } = useGetValueFromWidget(
- [
- celeryAllStateCountWidgetData,
- celeryFailedStateCountWidgetData,
- celeryRetryStateCountWidgetData,
- celerySuccessStateCountWidgetData,
- ],
- ['celery-task-states'],
+ const urlQuery = useUrlQuery();
+
+ const selectedFilters = useMemo(
+ () =>
+ getFiltersFromQueryParams(
+ QueryParams.taskName,
+ urlQuery,
+ 'celery.task_name',
+ ),
+ [urlQuery],
);
+ const widgetData = [
+ celeryAllStateCountWidgetData,
+ celeryFailedStateCountWidgetData,
+ celeryRetryStateCountWidgetData,
+ celerySuccessStateCountWidgetData,
+ ].map((data) => applyCeleryFilterOnWidgetData(selectedFilters || [], data));
+
+ const { values, isLoading, isError } = useGetValueFromWidget(widgetData, [
+ 'celery-task-states',
+ ]);
+
return (
{tabs.map((tab, index) => (
@@ -66,7 +85,13 @@ function CeleryTaskStateGraphConfig({
{tab.label}
- {isLoading ? '-' : isError ? '-' : values[index]}
+ {isLoading
+ ? '-'
+ : isError
+ ? '-'
+ : Number.isNaN(values[index])
+ ? '-'
+ : Math.round(Number(values[index]))}
{tab.key === barState && }
diff --git a/frontend/src/components/CeleryTask/CeleryUtils.ts b/frontend/src/components/CeleryTask/CeleryUtils.ts
index 93f1ef7629..1a2a4bfb48 100644
--- a/frontend/src/components/CeleryTask/CeleryUtils.ts
+++ b/frontend/src/components/CeleryTask/CeleryUtils.ts
@@ -90,3 +90,40 @@ export const paths = (
return renderer(u, seriesIdx, idx0, idx1, extendGap, buildClip);
};
+
+export const createFiltersFromData = (
+ data: Record,
+): Array<{
+ id: string;
+ key: {
+ key: string;
+ dataType: DataTypes;
+ type: string;
+ isColumn: boolean;
+ isJSON: boolean;
+ id: string;
+ };
+ op: string;
+ value: string;
+}> => {
+ const excludeKeys = ['A', 'A_without_unit'];
+
+ return (
+ Object.entries(data)
+ .filter(([key]) => !excludeKeys.includes(key))
+ // eslint-disable-next-line sonarjs/no-identical-functions
+ .map(([key, value]) => ({
+ id: uuidv4(),
+ key: {
+ key,
+ dataType: DataTypes.String,
+ type: 'tag',
+ isColumn: false,
+ isJSON: false,
+ id: `${key}--string--tag--false`,
+ },
+ op: '=',
+ value: value.toString(),
+ }))
+ );
+};
diff --git a/frontend/src/components/CeleryTask/useNavigateToTraces.ts b/frontend/src/components/CeleryTask/useNavigateToTraces.ts
index 9bb8db9cf5..4d5885af89 100644
--- a/frontend/src/components/CeleryTask/useNavigateToTraces.ts
+++ b/frontend/src/components/CeleryTask/useNavigateToTraces.ts
@@ -12,6 +12,7 @@ export function useNavigateToTraces(): (
filters: TagFilterItem[],
startTime?: number,
endTime?: number,
+ sameTab?: boolean,
) => void {
const { currentQuery } = useQueryBuilder();
const { minTime, maxTime } = useSelector(
@@ -38,7 +39,12 @@ export function useNavigateToTraces(): (
);
return useCallback(
- (filters: TagFilterItem[], startTime?: number, endTime?: number): void => {
+ (
+ filters: TagFilterItem[],
+ startTime?: number,
+ endTime?: number,
+ sameTab?: boolean,
+ ): void => {
const urlParams = new URLSearchParams();
if (startTime && endTime) {
urlParams.set(QueryParams.startTime, startTime.toString());
@@ -58,7 +64,7 @@ export function useNavigateToTraces(): (
QueryParams.compositeQuery
}=${JSONCompositeQuery}`;
- window.open(newTraceExplorerPath, '_blank');
+ window.open(newTraceExplorerPath, sameTab ? '_self' : '_blank');
},
[minTime, maxTime, prepareQuery],
);
diff --git a/frontend/src/container/GridCardLayout/GridCard/WidgetGraphComponent.tsx b/frontend/src/container/GridCardLayout/GridCard/WidgetGraphComponent.tsx
index 073c331b17..030c4f707e 100644
--- a/frontend/src/container/GridCardLayout/GridCard/WidgetGraphComponent.tsx
+++ b/frontend/src/container/GridCardLayout/GridCard/WidgetGraphComponent.tsx
@@ -48,6 +48,7 @@ function WidgetGraphComponent({
openTracesButton,
onOpenTraceBtnClick,
customSeries,
+ customErrorMessage,
}: WidgetGraphComponentProps): JSX.Element {
const [deleteModal, setDeleteModal] = useState(false);
const [hovered, setHovered] = useState(false);
@@ -317,6 +318,13 @@ function WidgetGraphComponent({
setSearchTerm={setSearchTerm}
/>
+
+ {queryResponse.error && customErrorMessage && (
+
+ {customErrorMessage}
+
+ )}
+
{queryResponse.isLoading && widget.panelTypes !== PANEL_TYPES.LIST && (
)}
diff --git a/frontend/src/container/GridCardLayout/GridCard/index.tsx b/frontend/src/container/GridCardLayout/GridCard/index.tsx
index 86a4d81fe8..388304bf99 100644
--- a/frontend/src/container/GridCardLayout/GridCard/index.tsx
+++ b/frontend/src/container/GridCardLayout/GridCard/index.tsx
@@ -41,9 +41,15 @@ function GridCardGraph({
openTracesButton,
onOpenTraceBtnClick,
customSeries,
+ customErrorMessage,
+ start,
+ end,
}: GridCardGraphProps): JSX.Element {
const dispatch = useDispatch();
const [errorMessage, setErrorMessage] = useState
();
+ const [isInternalServerError, setIsInternalServerError] = useState(
+ false,
+ );
const {
toScrollWidgetId,
setToScrollWidgetId,
@@ -178,6 +184,8 @@ function GridCardGraph({
variables: getDashboardVariables(variables),
selectedTime: widget.timePreferance || 'GLOBAL_TIME',
globalSelectedInterval,
+ start,
+ end,
},
version || DEFAULT_ENTITY_VERSION,
{
@@ -207,6 +215,11 @@ function GridCardGraph({
refetchOnMount: false,
onError: (error) => {
setErrorMessage(error.message);
+ if (customErrorMessage) {
+ setIsInternalServerError(
+ String(error.message).includes('API responded with 500'),
+ );
+ }
setDashboardQueryRangeCalled(true);
},
onSettled: (data) => {
@@ -256,6 +269,7 @@ function GridCardGraph({
openTracesButton={openTracesButton}
onOpenTraceBtnClick={onOpenTraceBtnClick}
customSeries={customSeries}
+ customErrorMessage={isInternalServerError ? customErrorMessage : undefined}
/>
)}