chore: add log events to alert history page (#6396)

* chore: pass active route with RouteTab's onChangeHandler

* chore: add log events to alert history page

---------

Co-authored-by: Srikanth Chekuri <srikanth.chekuri92@gmail.com>

frontend/src/components/RouteTab/index.tsx

@@ -11,7 +11,7 @@ function RouteTab({
 }: RouteTabProps & TabsProps): JSX.Element {
 	const onChange = (activeRoute: string): void => {
 		if (onChangeHandler) {
-			onChangeHandler();
+			onChangeHandler(activeRoute);
 		}
 
 		const selectedRoute = routes.find((e) => e.key === activeRoute);

frontend/src/components/RouteTab/types.ts

@@ -11,6 +11,6 @@ export type TabRoutes = {
 export interface RouteTabProps {
 	routes: TabRoutes[];
 	activeKey: TabsProps['activeKey'];
-	onChangeHandler?: VoidFunction;
+	onChangeHandler?: (key: string) => void;
 	history: History<unknown>;
 }

frontend/src/container/AlertHistory/Statistics/TopContributorsCard/TopContributorsRows.tsx

@@ -1,10 +1,16 @@
 import { Color } from '@signozhq/design-tokens';
 import { Progress, Table } from 'antd';
 import { ColumnsType } from 'antd/es/table';
+import logEvent from 'api/common/logEvent';
 import { ConditionalAlertPopover } from 'container/AlertHistory/AlertPopover/AlertPopover';
 import AlertLabels from 'pages/AlertDetails/AlertHeader/AlertLabels/AlertLabels';
 import PaginationInfoText from 'periscope/components/PaginationInfoText/PaginationInfoText';
-import { AlertRuleStats, AlertRuleTopContributors } from 'types/api/alerts/def';
+import { HTMLAttributes } from 'react';
+import {
+	AlertRuleStats,
+	AlertRuleTimelineTableResponse,
+	AlertRuleTopContributors,
+} from 'types/api/alerts/def';
 
 function TopContributorsRows({
 	topContributors,
@@ -70,10 +76,21 @@ function TopContributorsRows({
 		},
 	];
 
+	const handleRowClick = (
+		record: AlertRuleTopContributors,
+	): HTMLAttributes<AlertRuleTimelineTableResponse> => ({
+		onClick: (): void => {
+			logEvent('Alert history: Top contributors row: Clicked', {
+				labels: record.labels,
+			});
+		},
+	});
+
 	return (
 		<Table
 			rowClassName="contributors-row"
 			rowKey={(row): string => `top-contributor-${row.fingerprint}`}
+			onRow={handleRowClick}
 			columns={columns}
 			showHeader={false}
 			dataSource={topContributors}

frontend/src/container/AlertHistory/Timeline/Table/Table.tsx

@@ -1,13 +1,15 @@
 import './Table.styles.scss';
 
 import { Table } from 'antd';
+import logEvent from 'api/common/logEvent';
 import { initialFilters } from 'constants/queryBuilder';
 import {
 	useGetAlertRuleDetailsTimelineTable,
 	useTimelineTable,
 } from 'pages/AlertDetails/hooks';
-import { useMemo, useState } from 'react';
+import { HTMLAttributes, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { AlertRuleTimelineTableResponse } from 'types/api/alerts/def';
 import { TagFilter } from 'types/api/queryBuilder/queryBuilderData';
 
 import { timelineTableColumns } from './useTimelineTable';
@@ -43,6 +45,17 @@ function TimelineTable(): JSX.Element {
 		return <div>{t('something_went_wrong')}</div>;
 	}
 
+	const handleRowClick = (
+		record: AlertRuleTimelineTableResponse,
+	): HTMLAttributes<AlertRuleTimelineTableResponse> => ({
+		onClick: (): void => {
+			logEvent('Alert history: Timeline table row: Clicked', {
+				ruleId: record.ruleID,
+				labels: record.labels,
+			});
+		},
+	});
+
 	return (
 		<div className="timeline-table">
 			<Table
@@ -52,6 +65,7 @@ function TimelineTable(): JSX.Element {
 					labels: labels ?? {},
 					setFilters,
 				})}
+				onRow={handleRowClick}
 				dataSource={timelineData}
 				pagination={paginationConfig}
 				size="middle"

frontend/src/pages/AlertDetails/AlertDetails.tsx

@@ -1,6 +1,7 @@
 import './AlertDetails.styles.scss';
 
 import { Breadcrumb, Button, Divider } from 'antd';
+import logEvent from 'api/common/logEvent';
 import { Filters } from 'components/AlertDetailsFilters/Filters';
 import NotFound from 'components/NotFound';
 import RouteTab from 'components/RouteTab';
@@ -87,6 +88,12 @@ function AlertDetails(): JSX.Element {
 		return <NotFound />;
 	}
 
+	const handleTabChange = (route: string): void => {
+		if (route === ROUTES.ALERT_HISTORY) {
+			logEvent('Alert History tab: Visited', { ruleId });
+		}
+	};
+
 	return (
 		<div className="alert-details">
 			<Breadcrumb
@@ -113,6 +120,7 @@ function AlertDetails(): JSX.Element {
 					routes={routes}
 					activeKey={pathname}
 					history={history}
+					onChangeHandler={handleTabChange}
 					tabBarExtraContent={<Filters />}
 				/>
 			</div>