chore(ui): add analytic event to metrics chart views (#3570)

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 = ({
     </Tailwind>
   );
 };
+
+/**
+ * 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<number | null>(
+    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]);
+};

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');