chore: add activation events

frontend/src/container/AllError/index.tsx

@@ -32,6 +32,9 @@ import { AppState } from 'store/reducers';
 import { ErrorResponse, SuccessResponse } from 'types/api';
 import { Exception, PayloadProps } from 'types/api/errors/getAll';
 import { GlobalReducer } from 'types/reducer/globalTime';
+import { isUndefined } from 'lodash-es';
+import { useRef } from 'react';
+import logEvent from 'api/common/logEvent';
 
 import { FilterDropdownExtendsProps } from './types';
 import {
@@ -410,6 +413,26 @@ function AllErrors(): JSX.Element {
  [pathname],
  );
 
+ const logEventCalledRef = useRef(false);
+ useEffect(() => {
+ if (
+ !logEventCalledRef.current &&
+ !isUndefined(errorCountResponse.data?.payload)
+ ) {
+ const selectedEnvironment = queries.map((val) => {
+ if (val.tagKey === 'resource_deployment_environment') {
+ return val.tagValue;
+ }
+ });
+ logEvent('Exception: List page visited', {
+ numberOfExceptions: errorCountResponse.data?.payload,
+ selectedEnvironment: selectedEnvironment?.[0]?.[0],
+ resourceAttributeUsed: !!queries.length,
+ });
+ logEventCalledRef.current = true;
+ }
+ }, [errorCountResponse.data?.payload]);
+
  return (
  <ResizeTable
  columns={columns}

frontend/src/container/EmptyLogsSearch/EmptyLogsSearch.tsx

@@ -1,8 +1,34 @@
 import './EmptyLogsSearch.styles.scss';
 
 import { Typography } from 'antd';
+import logEvent from 'api/common/logEvent';
+import { useEffect, useRef } from 'react';
+import { DataSource, PanelTypeKeys } from 'types/common/queryBuilder';
+
+export default function EmptyLogsSearch({
+ dataSource,
+ panelType,
+}: {
+ dataSource: DataSource;
+ panelType: PanelTypeKeys;
+}): JSX.Element {
+ const logEventCalledRef = useRef(false);
+ useEffect(() => {
+ if (!logEventCalledRef.current) {
+ if (dataSource === DataSource.TRACES) {
+ logEvent('Traces Explorer: No results', {
+ panelType,
+ });
+ } else if (dataSource === DataSource.LOGS) {
+ logEvent('Logs Explorer: No results', {
+ panelType,
+ });
+ }
+ logEventCalledRef.current = true;
+ }
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, []);
 
-export default function EmptyLogsSearch(): JSX.Element {
  return (
  <div className="empty-logs-search-container">
  <div className="empty-logs-search-container-content">

frontend/src/container/ErrorDetails/index.tsx

@@ -15,6 +15,9 @@ import { useTranslation } from 'react-i18next';
 import { useQuery } from 'react-query';
 import { useLocation } from 'react-router-dom';
 import { PayloadProps as GetByErrorTypeAndServicePayload } from 'types/api/errors/getByErrorTypeAndService';
+import { isUndefined } from 'lodash-es';
+import logEvent from 'api/common/logEvent';
+import { useEffect, useRef } from 'react';
 
 import { keyToExclude } from './config';
 import { DashedContainer, EditorContainer, EventContainer } from './styles';
@@ -111,9 +114,28 @@ function ErrorDetails(props: ErrorDetailsProps): JSX.Element {
  }));
 
  const onClickTraceHandler = (): void => {
+ logEvent('Exception: Navigate to trace detail page', {
+ groupId: errorDetail.groupID,
+ spanId: errorDetail.spanID,
+ traceId: errorDetail.traceID,
+ exceptionId: errorDetail.errorId,
+ });
  history.push(`/trace/${errorDetail.traceID}?spanId=${errorDetail.spanID}`);
  };
 
+ const logEventCalledRef = useRef(false);
+ useEffect(() => {
+ if (!logEventCalledRef.current && !isUndefined(data)) {
+ logEvent('Exception: Detail page visited', {
+ groupId: errorDetail.groupID,
+ spanId: errorDetail.spanID,
+ traceId: errorDetail.traceID,
+ exceptionId: errorDetail.errorId
+ });
+ logEventCalledRef.current = true;
+ }
+ }, [data]);
+
  return (
  <>
  <Typography>{errorDetail.exceptionType}</Typography>

frontend/src/container/ExplorerOptions/ExplorerOptions.tsx

@@ -14,6 +14,7 @@ import {
  Tooltip,
  Typography,
 } from 'antd';
+import logEvent from 'api/common/logEvent';
 import axios from 'axios';
 import cx from 'classnames';
 import { getViewDetailsUsingViewKey } from 'components/ExplorerCard/utils';
@@ -93,7 +94,23 @@ function ExplorerOptions({
  setIsExport(value);
  }, []);
 
+ const {
+ currentQuery,
+ panelType,
+ isStagedQueryUpdated,
+ redirectWithQueryBuilderData,
+ } = useQueryBuilder();
+
  const handleSaveViewModalToggle = (): void => {
+ if (sourcepage === DataSource.TRACES) {
+ logEvent('Traces Explorer: Save view clicked', {
+ panelType,
+ });
+ } else if (sourcepage === DataSource.LOGS) {
+ logEvent('Logs Explorer: Save view clicked', {
+ panelType,
+ });
+ }
  setIsSaveModalOpen(!isSaveModalOpen);
  };
 
@@ -104,18 +121,37 @@ function ExplorerOptions({
  const { role } = useSelector<AppState, AppReducer>((state) => state.app);
 
  const onCreateAlertsHandler = useCallback(() => {
+ if (sourcepage === DataSource.TRACES) {
+ logEvent('Traces Explorer: Create alert', {
+ panelType,
+ });
+ } else if (sourcepage === DataSource.LOGS) {
+ logEvent('Logs Explorer: Create alert', {
+ panelType,
+ });
+ }
  history.push(
  `${ROUTES.ALERTS_NEW}?${QueryParams.compositeQuery}=${encodeURIComponent(
  JSON.stringify(query),
  )}`,
  );
+ // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [history, query]);
 
  const onCancel = (value: boolean) => (): void => {
  onModalToggle(value);
  };
 
  const onAddToDashboard = (): void => {
+ if (sourcepage === DataSource.TRACES) {
+ logEvent('Traces Explorer: Add to dashboard clicked', {
+ panelType,
+ });
+ } else if (sourcepage === DataSource.LOGS) {
+ logEvent('Logs Explorer: Add to dashboard clicked', {
+ panelType,
+ });
+ }
  setIsExport(true);
  };
 
@@ -127,13 +163,6 @@ function ExplorerOptions({
  refetch: refetchAllView,
  } = useGetAllViews(sourcepage);
 
- const {
- currentQuery,
- panelType,
- isStagedQueryUpdated,
- redirectWithQueryBuilderData,
- } = useQueryBuilder();
-
  const compositeQuery = mapCompositeQueryFromQuery(currentQuery, panelType);
 
  const viewName = useGetSearchQueryParam(QueryParams.viewName) || '';
@@ -224,6 +253,17 @@ function ExplorerOptions({
  onMenuItemSelectHandler({
  key: option.key,
  });
+ if (sourcepage === DataSource.TRACES) {
+ logEvent('Traces Explorer: Select view', {
+ panelType,
+ viewName: option.value,
+ });
+ } else if (sourcepage === DataSource.LOGS) {
+ logEvent('Logs Explorer: Select view', {
+ panelType,
+ viewName: option.value,
+ });
+ }
  if (ref.current) {
  ref.current.blur();
  }
@@ -259,6 +299,17 @@ function ExplorerOptions({
  viewName: newViewName,
  setNewViewName,
  });
+ if (sourcepage === DataSource.TRACES) {
+ logEvent('Traces Explorer: Save view successful', {
+ panelType,
+ viewName: newViewName,
+ });
+ } else if (sourcepage === DataSource.LOGS) {
+ logEvent('Logs Explorer: Save view successful', {
+ panelType,
+ viewName: newViewName,
+ });
+ }
  };
 
  // TODO: Remove this and move this to scss file
@@ -499,7 +550,7 @@ function ExplorerOptions({
 
 export interface ExplorerOptionsProps {
  isLoading?: boolean;
- onExport: (dashboard: Dashboard | null) => void;
+ onExport: (dashboard: Dashboard | null, isNewDashboard?: boolean) => void;
  query: Query | null;
  disabled: boolean;
  sourcepage: DataSource;

frontend/src/container/ExportPanel/ExportPanelContainer.tsx

@@ -16,6 +16,7 @@ import {
  Wrapper,
 } from './styles';
 import { filterOptions, getSelectOptions } from './utils';
+// import logEvent from 'api/common/logEvent';
 
 function ExportPanelContainer({
  isLoading,
@@ -41,7 +42,7 @@ function ExportPanelContainer({
  } = useMutation(createDashboard, {
  onSuccess: (data) => {
  if (data.payload) {
- onExport(data?.payload);
+ onExport(data?.payload, true);
  }
  refetch();
  },
@@ -55,7 +56,7 @@ function ExportPanelContainer({
  ({ uuid }) => uuid === selectedDashboardId,
  );
 
- onExport(currentSelectedDashboard || null);
+ onExport(currentSelectedDashboard || null, false);
  }, [data, selectedDashboardId, onExport]);
 
  const handleSelect = useCallback(

frontend/src/container/ExportPanel/index.tsx

@@ -40,7 +40,7 @@ function ExportPanel({
 
 export interface ExportPanelProps {
  isLoading?: boolean;
- onExport: (dashboard: Dashboard | null) => void;
+ onExport: (dashboard: Dashboard | null, isNewDashboard?: boolean) => void;
  query: Query | null;
 }
 

frontend/src/container/GridCardLayout/DashboardEmptyState/DashboardEmptyState.tsx

@@ -3,6 +3,7 @@ import './DashboardEmptyState.styles.scss';
 
 import { PlusOutlined } from '@ant-design/icons';
 import { Button, Typography } from 'antd';
+import logEvent from 'api/common/logEvent';
 import SettingsDrawer from 'container/NewDashboard/DashboardDescription/SettingsDrawer';
 import useComponentPermission from 'hooks/useComponentPermission';
 import { useDashboard } from 'providers/Dashboard/Dashboard';
@@ -36,6 +37,12 @@ export default function DashboardEmptyState(): JSX.Element {
 
  const onEmptyWidgetHandler = useCallback(() => {
  handleToggleDashboardSlider(true);
+ logEvent('Dashboard Detail: Add new panel clicked', {
+ dashboardId: selectedDashboard?.uuid,
+ dashboardName: selectedDashboard?.data.title,
+ numberOfPanels: selectedDashboard?.data.widgets?.length,
+ });
+ // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [handleToggleDashboardSlider]);
  return (
  <section className="dashboard-empty-state">

frontend/src/container/GridCardLayout/GridCardLayout.tsx

@@ -3,6 +3,7 @@ import './GridCardLayout.styles.scss';
 import { Color } from '@signozhq/design-tokens';
 import { Button, Form, Input, Modal, Typography } from 'antd';
 import { useForm } from 'antd/es/form/Form';
+import logEvent from 'api/common/logEvent';
 import cx from 'classnames';
 import { SOMETHING_WENT_WRONG } from 'constants/api';
 import { QueryParams } from 'constants/query';
@@ -15,7 +16,7 @@ import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useNotifications } from 'hooks/useNotifications';
 import useUrlQuery from 'hooks/useUrlQuery';
 import history from 'lib/history';
-import { defaultTo } from 'lodash-es';
+import { defaultTo, isUndefined } from 'lodash-es';
 import isEqual from 'lodash-es/isEqual';
 import {
  Check,
@@ -27,7 +28,7 @@ import {
 } from 'lucide-react';
 import { useDashboard } from 'providers/Dashboard/Dashboard';
 import { sortLayout } from 'providers/Dashboard/util';
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { FullScreen, FullScreenHandle } from 'react-full-screen';
 import { ItemCallback, Layout } from 'react-grid-layout';
 import { useDispatch, useSelector } from 'react-redux';
@@ -126,6 +127,18 @@ function GraphLayout(props: GraphLayoutProps): JSX.Element {
  setDashboardLayout(sortLayout(layouts));
  }, [layouts]);
 
+ const logEventCalledRef = useRef(false);
+ useEffect(() => {
+ if (!logEventCalledRef.current && !isUndefined(data)) {
+ logEvent('Dashboard Detail: Opened', {
+ dashboardId: data.uuid,
+ dashboardName: data.title,
+ numberOfPanels: data.widgets?.length,
+ numberOfVariables: Object.keys(data?.variables || {}).length || 0,
+ });
+ logEventCalledRef.current = true;
+ }
+ }, [data]);
  const onSaveHandler = (): void => {
  if (!selectedDashboard) return;
 

frontend/src/container/GridCardLayout/WidgetHeader/index.tsx

@@ -79,7 +79,7 @@ function WidgetHeader({
  );
  }, [widget.id, widget.panelTypes, widget.query]);
 
- const onCreateAlertsHandler = useCreateAlerts(widget);
+ const onCreateAlertsHandler = useCreateAlerts(widget, 'dashboardView');
 
  const onDownloadHandler = useCallback((): void => {
  const csv = unparse(tableProcessedDataRef.current);