diff --git a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CallsPage/CallsCharts.tsx b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CallsPage/CallsCharts.tsx index 0519dd2161d4..ab61f67b34aa 100644 --- a/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CallsPage/CallsCharts.tsx +++ b/weave-js/src/components/PagePanelComponents/Home/Browse3/pages/CallsPage/CallsCharts.tsx @@ -1,7 +1,8 @@ import {GridFilterModel, GridSortModel} from '@mui/x-data-grid-pro'; -import React, {useMemo} from 'react'; +import React, {useEffect, useMemo, useRef, useState} from 'react'; import {MOON_400} from '../../../../../../common/css/color.styles'; +import * as userEvents from '../../../../../../integrations/analytics/userEvents'; import {IconInfo} from '../../../../../Icon'; import {WaveLoader} from '../../../../../Loaders/WaveLoader'; import {Tailwind} from '../../../../../Tailwind'; @@ -114,6 +115,8 @@ export const CallsCharts = ({ columns ); + useFireAnalyticsForMetricsPlotsViewed(entity, project, calls.loading); + const chartData = useMemo(() => { if (calls.loading || !calls.result || calls.result.length === 0) { return {latency: [], errors: [], requests: []}; @@ -188,3 +191,37 @@ export const CallsCharts = ({ ); }; + +/** + * Fires an analytics event when the metrics plots are viewed. + * This is used to track the usage and latency of the metrics plots. + * Only fires once when opened. + */ +const useFireAnalyticsForMetricsPlotsViewed = ( + entity: string, + project: string, + loading: boolean +) => { + const [callsQueryStartTime, setCallsQueryStartTime] = useState( + null + ); + const sentEvent = useRef(false); + useEffect(() => { + if (sentEvent.current) { + return; + } + if (loading) { + const startTime = Date.now(); + setCallsQueryStartTime(startTime); + } else if (!loading && callsQueryStartTime !== null) { + const endTime = Date.now(); + const latency = endTime - callsQueryStartTime; + userEvents.metricsPlotsViewed({ + entity, + project, + latency, + }); + sentEvent.current = true; + } + }, [loading, callsQueryStartTime, entity, project]); +}; diff --git a/weave-js/src/integrations/analytics/userEvents.ts b/weave-js/src/integrations/analytics/userEvents.ts index 8655a272208b..dab079773339 100644 --- a/weave-js/src/integrations/analytics/userEvents.ts +++ b/weave-js/src/integrations/analytics/userEvents.ts @@ -145,3 +145,28 @@ export const callTreeCellClicked = makeTrackEvent< }; } >('Weave call tree cell clicked'); + +export const metricsPlotsViewed = makeTrackEvent< + { + entity: string; + project: string; + latency: number; + }, + { + _description: `User viewed metrics plots`; + _location: ''; + _motivation: 'Used for tracking metrics plots'; + entity: { + description: 'Entity of call'; + exampleValues: ['my-entity']; + }; + project: { + description: 'Project of call'; + exampleValues: ['my-project']; + }; + latency: { + description: 'Latency of calls stream query (ms)'; + exampleValues: [1000, 500]; + }; + } +>('Weave metrics plots viewed');