GitHub-Proxy/signoz
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz synced 2025-08-12 04:39:01 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore: added mq celery analytics (#7129)

Browse Source
This commit is contained in:
SagarRajput-7 2025-02-17 13:59:16 +05:30 committed by GitHub
parent a6cfb63036
commit 5a107f33f2
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
9 changed files with 95 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
frontend/src/components/CeleryTask/CeleryTaskDetail/CeleryTaskDetail.tsx
View File

@ -2,6 +2,7 @@ import './CeleryTaskDetail.style.scss';
import { Color, Spacing } from '@signozhq/design-tokens';
import { Divider, Drawer, Typography } from 'antd';
import logEvent from 'api/common/logEvent';
import { PANEL_TYPES } from 'constants/queryBuilder';
import dayjs from 'dayjs';
import { useIsDarkMode } from 'hooks/useDarkMode';
@ -98,6 +99,12 @@ export default function CeleryTaskDetail({
...rowData,
[taskData.entity]: taskData.value,
});
logEvent('MQ Celery: navigation to trace page', {
filters,
startTime,
endTime,
source: widgetData.title,
});
navigateToTrace(filters, startTime, endTime);
}}
start={startTime}

4
frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskBar.tsx
View File

@ -42,10 +42,12 @@ import {
function CeleryTaskBar({
onClick,
queryEnabled,
checkIfDataExists,
}: {
onClick?: (task: CaptureDataProps) => void;
queryEnabled: boolean;
checkIfDataExists?: (isDataAvailable: boolean) => void;
}): JSX.Element {
const history = useHistory();
const { pathname } = useLocation();
@ -187,6 +189,7 @@ function CeleryTaskBar({
onGraphClick(celerySlowestTasksTableWidgetData, ...args)
}
customSeries={getCustomSeries}
dataAvailable={checkIfDataExists}
/>
)}
{barState === CeleryTaskState.Failed && (
@ -232,6 +235,7 @@ function CeleryTaskBar({
CeleryTaskBar.defaultProps = {
onClick: (): void => {},
checkIfDataExists: undefined,
};
export default CeleryTaskBar;

8
frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskGraph.tsx
View File

@ -35,6 +35,8 @@ function CeleryTaskGraph({
customErrorMessage,
start,
end,
checkIfDataExists,
analyticsEvent,
}: {
widgetData: Widgets;
onClick?: (task: CaptureDataProps) => void;
@ -48,6 +50,8 @@ function CeleryTaskGraph({
customErrorMessage?: string;
start?: number;
end?: number;
checkIfDataExists?: (isDataAvailable: boolean) => void;
analyticsEvent?: string;
}): JSX.Element {
const history = useHistory();
const { pathname } = useLocation();
@ -125,6 +129,8 @@ function CeleryTaskGraph({
customErrorMessage={customErrorMessage}
start={start}
end={end}
dataAvailable={checkIfDataExists}
analyticsEvent={analyticsEvent}
/>
</Card>
);
@ -141,6 +147,8 @@ CeleryTaskGraph.defaultProps = {
customErrorMessage: undefined,
start: undefined,
end: undefined,
checkIfDataExists: undefined,
analyticsEvent: undefined,
};
export default CeleryTaskGraph;

32
frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskGraphGrid.tsx
View File

@ -1,6 +1,7 @@
import './CeleryTaskGraph.style.scss';
import { Card, Typography } from 'antd';
import logEvent from 'api/common/logEvent';
import { CardContainer } from 'container/GridCardLayout/styles';
import { useIsDarkMode } from 'hooks/useDarkMode';
import { ChevronDown, ChevronUp } from 'lucide-react';
@ -92,6 +93,15 @@ export default function CeleryTaskGraphGrid({
}));
};
const checkIfDataExists = (isDataAvailable: boolean, title: string): void => {
if (isDataAvailable) {
logEvent(`MQ Celery: ${title} data exists`, {
graph: title,
isDataAvailable,
});
}
};
return (
<div className="celery-task-graph-grid-container">
<div className="metric-based-graphs">
@ -124,6 +134,10 @@ export default function CeleryTaskGraphGrid({
widgetData={celeryActiveTasksData}
queryEnabled={queryEnabled}
customErrorMessage="Enable Flower metrics to view this graph"
checkIfDataExists={(isDataAvailable): void =>
checkIfDataExists(isDataAvailable, 'Active Tasks by worker')
}
analyticsEvent="MQ Celery: Flower metric not enabled"
/>
<Card className="celery-task-graph-worker-count">
<div className="worker-count-header">
@ -173,8 +187,19 @@ export default function CeleryTaskGraphGrid({
</div>
{!collapsedSections.traceBasedGraphs && (
<>
<CeleryTaskBar queryEnabled={queryEnabled} onClick={onClick} />
<CeleryTaskLatencyGraph queryEnabled={queryEnabled} />
<CeleryTaskBar
queryEnabled={queryEnabled}
onClick={onClick}
checkIfDataExists={(isDataAvailable): void =>
checkIfDataExists(isDataAvailable, 'State Graph')
}
/>
<CeleryTaskLatencyGraph
queryEnabled={queryEnabled}
checkIfDataExists={(isDataAvailable): void =>
checkIfDataExists(isDataAvailable, 'Task Latency')
}
/>
<div className="celery-task-graph-grid-bottom">
{bottomWidgetData.map((widgetData, index) => (
<CeleryTaskGraph
@ -184,6 +209,9 @@ export default function CeleryTaskGraphGrid({
queryEnabled={queryEnabled}
rightPanelTitle={rightPanelTitle[index]}
applyCeleryTaskFilter
checkIfDataExists={(isDataAvailable): void =>
checkIfDataExists(isDataAvailable, rightPanelTitle[index])
}
/>
))}
</div>

14
frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskLatencyGraph.tsx
View File

@ -1,6 +1,7 @@
import './CeleryTaskGraph.style.scss';
import { Col, Row } from 'antd';
import logEvent from 'api/common/logEvent';
import { QueryParams } from 'constants/query';
import { PANEL_TYPES } from 'constants/queryBuilder';
import { ViewMenuAction } from 'container/GridCardLayout/config';
@ -40,8 +41,10 @@ export enum CeleryTaskGraphState {
function CeleryTaskLatencyGraph({
queryEnabled,
checkIfDataExists,
}: {
queryEnabled: boolean;
checkIfDataExists?: (isDataAvailable: boolean) => void;
}): JSX.Element {
const history = useHistory();
const { pathname } = useLocation();
@ -61,6 +64,10 @@ function CeleryTaskLatencyGraph({
const handleTabClick = (key: CeleryTaskGraphState): void => {
setGraphState(key as CeleryTaskGraphState);
logEvent('MQ Celery: Task latency graph tab clicked', {
taskName: urlQuery.get(QueryParams.taskName),
graphState: key,
});
};
const onDragSelect = useCallback(
@ -195,6 +202,7 @@ function CeleryTaskLatencyGraph({
onDragSelect={onDragSelect}
onClickHandler={onGraphClick('Celery_p99_latency')}
isQueryEnabled={queryEnabled}
dataAvailable={checkIfDataExists}
/>
</>
)}
@ -215,6 +223,7 @@ function CeleryTaskLatencyGraph({
onDragSelect={onDragSelect}
onClickHandler={onGraphClick('Celery_p95_latency')}
isQueryEnabled={queryEnabled}
dataAvailable={checkIfDataExists}
/>
</>
)}
@ -234,6 +243,7 @@ function CeleryTaskLatencyGraph({
onDragSelect={onDragSelect}
onClickHandler={onGraphClick('Celery_p90_latency')}
isQueryEnabled={queryEnabled}
dataAvailable={checkIfDataExists}
/>
</>
)}
@ -243,3 +253,7 @@ function CeleryTaskLatencyGraph({
}
export default CeleryTaskLatencyGraph;
CeleryTaskLatencyGraph.defaultProps = {
checkIfDataExists: undefined,
};

9
frontend/src/components/CeleryTask/CeleryTaskGraph/CeleryTaskStateGraphConfig.tsx
View File

@ -2,6 +2,7 @@
import './CeleryTaskGraph.style.scss';
import { Col, Row } from 'antd';
import logEvent from 'api/common/logEvent';
import { QueryParams } from 'constants/query';
import useUrlQuery from 'hooks/useUrlQuery';
import { Dispatch, SetStateAction, useMemo } from 'react';
@ -44,12 +45,16 @@ function CeleryTaskStateGraphConfig({
{ label: 'Successful', key: CeleryTaskState.Successful },
];
const urlQuery = useUrlQuery();
const handleTabClick = (key: CeleryTaskState): void => {
setBarState(key as CeleryTaskState);
logEvent('MQ Celery: State graph tab clicked', {
taskName: urlQuery.get(QueryParams.taskName),
graphState: key,
});
};
const urlQuery = useUrlQuery();
const selectedFilters = useMemo(
() =>
getFiltersFromQueryParams(

8
frontend/src/container/GridCardLayout/GridCard/index.tsx
View File

@ -1,3 +1,4 @@
import logEvent from 'api/common/logEvent';
import { DEFAULT_ENTITY_VERSION } from 'constants/app';
import { QueryParams } from 'constants/query';
import { PANEL_TYPES } from 'constants/queryBuilder';
@ -44,6 +45,7 @@ function GridCardGraph({
customErrorMessage,
start,
end,
analyticsEvent,
}: GridCardGraphProps): JSX.Element {
const dispatch = useDispatch();
const [errorMessage, setErrorMessage] = useState<string>();
@ -219,6 +221,11 @@ function GridCardGraph({
setIsInternalServerError(
String(error.message).includes('API responded with 500'),
);
if (analyticsEvent) {
logEvent(analyticsEvent, {
error: error.message,
});
}
}
setDashboardQueryRangeCalled(true);
},
@ -283,6 +290,7 @@ GridCardGraph.defaultProps = {
threshold: undefined,
headerMenuList: [MenuItemKeys.View],
version: 'v3',
analyticsEvent: undefined,
};
export default memo(GridCardGraph);

1
frontend/src/container/GridCardLayout/GridCard/types.ts
View File

@ -58,6 +58,7 @@ export interface GridCardGraphProps {
customErrorMessage?: string;
start?: number;
end?: number;
analyticsEvent?: string;
}
export interface GetGraphVisibilityStateOnLegendClickProps {

17
frontend/src/pages/Celery/CeleryTask/CeleryTask.tsx
View File

@ -1,15 +1,30 @@
import './CeleryTask.styles.scss';
import logEvent from 'api/common/logEvent';
import CeleryTaskConfigOptions from 'components/CeleryTask/CeleryTaskConfigOptions/CeleryTaskConfigOptions';
import CeleryTaskDetail, {
CaptureDataProps,
} from 'components/CeleryTask/CeleryTaskDetail/CeleryTaskDetail';
import CeleryTaskGraphGrid from 'components/CeleryTask/CeleryTaskGraph/CeleryTaskGraphGrid';
import { QueryParams } from 'constants/query';
import DateTimeSelectionV2 from 'container/TopNav/DateTimeSelectionV2';
import { useState } from 'react';
import useUrlQuery from 'hooks/useUrlQuery';
import { useEffect, useRef, useState } from 'react';
export default function CeleryTask(): JSX.Element {
const [task, setTask] = useState<CaptureDataProps | null>(null);
const loggedRef = useRef(false);
const taskName = useUrlQuery().get(QueryParams.taskName);
useEffect(() => {
if (taskName && !loggedRef.current) {
logEvent('MQ Celery: Task name filter', {
taskName,
});
loggedRef.current = true;
}
}, [taskName]);
const onTaskClick = (captureData: CaptureDataProps): void => {
setTask(captureData);