diff --git a/frontend/src/components/CeleryOverview/CeleryOverviewTable/CeleryOverviewTable.tsx b/frontend/src/components/CeleryOverview/CeleryOverviewTable/CeleryOverviewTable.tsx index 4be6d7a6e9..8ed8eaab0d 100644 --- a/frontend/src/components/CeleryOverview/CeleryOverviewTable/CeleryOverviewTable.tsx +++ b/frontend/src/components/CeleryOverview/CeleryOverviewTable/CeleryOverviewTable.tsx @@ -15,6 +15,7 @@ import { Typography, } from 'antd'; import { FilterDropdownProps } from 'antd/lib/table/interface'; +import logEvent from 'api/common/logEvent'; import { getQueueOverview, QueueOverviewResponse, @@ -458,6 +459,7 @@ export default function CeleryOverviewTable({ const handleRowClick = (record: RowData): void => { onRowClick(record); + logEvent('MQ Overview Page: Right Panel', { ...record }); }; const getFilteredData = useCallback( @@ -481,6 +483,22 @@ export default function CeleryOverviewTable({ tableData, ]); + const prevTableDataRef = useRef(); + + useEffect(() => { + if (tableData.length > 0) { + const currentTableData = JSON.stringify(tableData); + + if (currentTableData !== prevTableDataRef.current) { + logEvent(`MQ Overview Page: List rendered`, { + dataRender: tableData.length, + }); + prevTableDataRef.current = currentTableData; + } + } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [JSON.stringify(tableData)]); + return (
( + null, + ); + const [errorRateStatus, setErrorRateStatus] = useState(null); + const [avgLatencyStatus, setAvgLatencyStatus] = useState(null); + + useEffect(() => { + if ( + requestRateStatus !== null && + errorRateStatus !== null && + avgLatencyStatus !== null + ) { + logEvent('MQ Overview Page: Right Drawer - graphs', { + requestRate: requestRateStatus, + errorRate: errorRateStatus, + avgLatency: avgLatencyStatus, + }); + } + }, [requestRateStatus, errorRateStatus, avgLatencyStatus]); + return (
@@ -130,7 +151,9 @@ export default function OverviewRightPanelGraph({ type="default" size="small" id="Celery_request_rate_button" - onClick={(): void => goToTraces(requestRateWidget)} + onClick={(): void => { + goToTraces(requestRateWidget); + }} > View Traces @@ -140,6 +163,9 @@ export default function OverviewRightPanelGraph({ onDragSelect={onDragSelect} onClickHandler={handleGraphClick('Celery_request_rate')} customSeries={getCustomSeries} + dataAvailable={(isDataAvailable: boolean): void => { + setRequestRateStatus(isDataAvailable); + }} />
@@ -157,6 +183,9 @@ export default function OverviewRightPanelGraph({ onDragSelect={onDragSelect} onClickHandler={handleGraphClick('Celery_error_rate')} customSeries={getCustomSeries} + dataAvailable={(isDataAvailable: boolean): void => { + setErrorRateStatus(isDataAvailable); + }} />
@@ -173,6 +202,9 @@ export default function OverviewRightPanelGraph({ headerMenuList={[...ViewMenuAction]} onDragSelect={onDragSelect} onClickHandler={handleGraphClick('Celery_avg_latency')} + dataAvailable={(isDataAvailable: boolean): void => { + setAvgLatencyStatus(isDataAvailable); + }} />
diff --git a/frontend/src/pages/Celery/CeleryOverview/CeleryOverviewDetail/ValueInfo.tsx b/frontend/src/pages/Celery/CeleryOverview/CeleryOverviewDetail/ValueInfo.tsx index 97ba9b752d..708fc7b456 100644 --- a/frontend/src/pages/Celery/CeleryOverview/CeleryOverviewDetail/ValueInfo.tsx +++ b/frontend/src/pages/Celery/CeleryOverview/CeleryOverviewDetail/ValueInfo.tsx @@ -2,6 +2,7 @@ import './ValueInfo.styles.scss'; import { FileSearchOutlined } from '@ant-design/icons'; import { Button, Card, Col, Row } from 'antd'; +import logEvent from 'api/common/logEvent'; import { useNavigateToTraces } from 'components/CeleryTask/useNavigateToTraces'; import { ENTITY_VERSION_V4 } from 'constants/app'; import { PANEL_TYPES } from 'constants/queryBuilder'; @@ -113,6 +114,9 @@ export default function ValueInfo({ return 'red'; }; + const mqAnalyticsTitle = + 'MQ Overview Page: Right drawer navigation to trace page'; + return ( @@ -133,7 +137,15 @@ export default function ValueInfo({ icon={} className="trace-button" disabled={isLoading} - onClick={(): void => navigateToTrace(filters ?? [])} + onClick={(): void => { + logEvent(mqAnalyticsTitle, { + filters, + minTime, + maxTime, + source: 'request rate', + }); + navigateToTrace(filters ?? []); + }} > View Traces @@ -155,7 +167,13 @@ export default function ValueInfo({ icon={} className="trace-button" disabled={isLoading} - onClick={(): void => + onClick={(): void => { + logEvent(mqAnalyticsTitle, { + filters, + minTime, + maxTime, + source: 'error rate', + }); navigateToTrace([ ...(filters ?? []), { @@ -171,8 +189,8 @@ export default function ValueInfo({ op: '=', value: 'true', }, - ]) - } + ]); + }} > View Traces @@ -194,7 +212,15 @@ export default function ValueInfo({ icon={} className="trace-button" disabled={isLoading} - onClick={(): void => navigateToTrace(filters ?? [])} + onClick={(): void => { + logEvent(mqAnalyticsTitle, { + filters, + minTime, + maxTime, + source: 'average latency', + }); + navigateToTrace(filters ?? []); + }} > View Traces