diff --git a/frontend/src/components/RouteTab/index.tsx b/frontend/src/components/RouteTab/index.tsx index c76e3e2f99..0624a23738 100644 --- a/frontend/src/components/RouteTab/index.tsx +++ b/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); diff --git a/frontend/src/components/RouteTab/types.ts b/frontend/src/components/RouteTab/types.ts index c8fd2af276..a4dada0daf 100644 --- a/frontend/src/components/RouteTab/types.ts +++ b/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; } diff --git a/frontend/src/container/AlertHistory/Statistics/TopContributorsCard/TopContributorsRows.tsx b/frontend/src/container/AlertHistory/Statistics/TopContributorsCard/TopContributorsRows.tsx index 85857605f8..6be7a26db1 100644 --- a/frontend/src/container/AlertHistory/Statistics/TopContributorsCard/TopContributorsRows.tsx +++ b/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 => ({ + onClick: (): void => { + logEvent('Alert history: Top contributors row: Clicked', { + labels: record.labels, + }); + }, + }); + return ( `top-contributor-${row.fingerprint}`} + onRow={handleRowClick} columns={columns} showHeader={false} dataSource={topContributors} diff --git a/frontend/src/container/AlertHistory/Timeline/Table/Table.tsx b/frontend/src/container/AlertHistory/Timeline/Table/Table.tsx index be5c7ae9c3..dffcf3fb7a 100644 --- a/frontend/src/container/AlertHistory/Timeline/Table/Table.tsx +++ b/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
{t('something_went_wrong')}
; } + const handleRowClick = ( + record: AlertRuleTimelineTableResponse, + ): HTMLAttributes => ({ + onClick: (): void => { + logEvent('Alert history: Timeline table row: Clicked', { + ruleId: record.ruleID, + labels: record.labels, + }); + }, + }); + return (
; } + const handleTabChange = (route: string): void => { + if (route === ROUTES.ALERT_HISTORY) { + logEvent('Alert History tab: Visited', { ruleId }); + } + }; + return (
} />