chore: add event on span row click (#7406)

frontend/src/components/HostMetricsDetail/HostMetricTraces/HostMetricTraces.tsx

@@ -1,7 +1,9 @@
 import './HostMetricTraces.styles.scss';
 
+import logEvent from 'api/common/logEvent';
 import { ResizeTable } from 'components/ResizeTable';
 import { DEFAULT_ENTITY_VERSION } from 'constants/app';
+import { InfraMonitoringEvents } from 'constants/events';
 import { QueryParams } from 'constants/query';
 import EmptyLogsSearch from 'container/EmptyLogsSearch/EmptyLogsSearch';
 import NoLogs from 'container/NoLogs/NoLogs';
@@ -19,7 +21,7 @@ import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { Pagination } from 'hooks/queryPagination';
 import useUrlQueryData from 'hooks/useUrlQueryData';
 import { GetMetricQueryRange } from 'lib/dashboard/getQueryResults';
-import { useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useQuery } from 'react-query';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource } from 'types/common/queryBuilder';
@@ -137,6 +139,13 @@ function HostMetricTraces({
 	const totalCount =
 		data?.payload?.data?.newResult?.data?.result?.[0]?.list?.length || 0;
 
+	const handleRowClick = useCallback(() => {
+		logEvent(InfraMonitoringEvents.ItemClicked, {
+			entity: InfraMonitoringEvents.HostEntity,
+			view: InfraMonitoringEvents.TracesView,
+		});
+	}, []);
+
 	return (
 		<div className="host-metric-traces">
 			<div className="host-metric-traces-header">
@@ -189,6 +198,9 @@ function HostMetricTraces({
 						loading={isFetching}
 						dataSource={traces}
 						columns={traceListColumns}
+						onRow={(): Record<string, unknown> => ({
+							onClick: (): void => handleRowClick(),
+						})}
 					/>
 				</div>
 			)}

frontend/src/components/HostMetricsDetail/HostMetricsDetails.tsx

@@ -149,6 +149,10 @@ function HostMetricsDetails({
 
 	const handleTabChange = (e: RadioChangeEvent): void => {
 		setSelectedView(e.target.value);
+		logEvent(InfraMonitoringEvents.TabChanged, {
+			entity: InfraMonitoringEvents.HostEntity,
+			view: e.target.value,
+		});
 	};
 
 	const handleTimeChange = useCallback(

frontend/src/container/InfraMonitoringK8s/Clusters/ClusterDetails/ClusterDetails.tsx

@@ -561,6 +561,7 @@ function ClusterDetails({
 							tracesFilters={logsAndTracesFilters}
 							selectedInterval={selectedInterval}
 							queryKey="clusterTraces"
+							category={InfraMonitoringEvents.Cluster}
 							queryKeyFilters={[QUERY_KEYS.K8S_CLUSTER_NAME]}
 						/>
 					)}

frontend/src/container/InfraMonitoringK8s/DaemonSets/DaemonSetDetails/DaemonSetDetails.tsx

@@ -590,6 +590,7 @@ function DaemonSetDetails({
 							tracesFilters={logAndTracesFilters}
 							selectedInterval={selectedInterval}
 							queryKey="daemonsetTraces"
+							category={InfraMonitoringEvents.DaemonSet}
 							queryKeyFilters={[
 								QUERY_KEYS.K8S_DAEMON_SET_NAME,
 								QUERY_KEYS.K8S_NAMESPACE_NAME,

frontend/src/container/InfraMonitoringK8s/Deployments/DeploymentDetails/DeploymentDetails.tsx

@@ -598,6 +598,7 @@ function DeploymentDetails({
 							tracesFilters={logAndTracesFilters}
 							selectedInterval={selectedInterval}
 							queryKey="deploymentTraces"
+							category={InfraMonitoringEvents.Deployment}
 							queryKeyFilters={[
 								QUERY_KEYS.K8S_DEPLOYMENT_NAME,
 								QUERY_KEYS.K8S_NAMESPACE_NAME,

frontend/src/container/InfraMonitoringK8s/EntityDetailsUtils/EntityTraces/EntityTraces.tsx

@@ -1,8 +1,10 @@
 import './entityTraces.styles.scss';
 
+import logEvent from 'api/common/logEvent';
 import { getListColumns } from 'components/HostMetricsDetail/HostMetricTraces/utils';
 import { ResizeTable } from 'components/ResizeTable';
 import { DEFAULT_ENTITY_VERSION } from 'constants/app';
+import { InfraMonitoringEvents } from 'constants/events';
 import { QueryParams } from 'constants/query';
 import EmptyLogsSearch from 'container/EmptyLogsSearch/EmptyLogsSearch';
 import NoLogs from 'container/NoLogs/NoLogs';
@@ -20,7 +22,7 @@ import { useQueryBuilder } from 'hooks/queryBuilder/useQueryBuilder';
 import { Pagination } from 'hooks/queryPagination';
 import useUrlQueryData from 'hooks/useUrlQueryData';
 import { GetMetricQueryRange } from 'lib/dashboard/getQueryResults';
-import { useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useQuery } from 'react-query';
 import { IBuilderQuery } from 'types/api/queryBuilder/queryBuilderData';
 import { DataSource } from 'types/common/queryBuilder';
@@ -45,6 +47,7 @@ interface Props {
 	tracesFilters: IBuilderQuery['filters'];
 	selectedInterval: Time;
 	queryKey: string;
+	category: string;
 	queryKeyFilters: string[];
 }
 
@@ -56,6 +59,7 @@ function EntityTraces({
 	tracesFilters,
 	selectedInterval,
 	queryKey,
+	category,
 	queryKeyFilters,
 }: Props): JSX.Element {
 	const [traces, setTraces] = useState<any[]>([]);
@@ -145,6 +149,14 @@ function EntityTraces({
 	const totalCount =
 		data?.payload?.data?.newResult?.data?.result?.[0]?.list?.length || 0;
 
+	const handleRowClick = useCallback(() => {
+		logEvent(InfraMonitoringEvents.ItemClicked, {
+			entity: InfraMonitoringEvents.K8sEntity,
+			category,
+			view: InfraMonitoringEvents.TracesView,
+		});
+	}, [category]);
+
 	return (
 		<div className="entity-metric-traces">
 			<div className="entity-metric-traces-header">
@@ -197,6 +209,9 @@ function EntityTraces({
 						loading={isFetching}
 						dataSource={traces}
 						columns={traceListColumns}
+						onRow={(): Record<string, unknown> => ({
+							onClick: (): void => handleRowClick(),
+						})}
 					/>
 				</div>
 			)}

frontend/src/container/InfraMonitoringK8s/Jobs/JobDetails/JobDetails.tsx

@@ -575,6 +575,7 @@ function JobDetails({
 							tracesFilters={logAndTracesFilters}
 							selectedInterval={selectedInterval}
 							queryKey="jobTraces"
+							category={InfraMonitoringEvents.Job}
 							queryKeyFilters={[
 								QUERY_KEYS.K8S_JOB_NAME,
 								QUERY_KEYS.K8S_NAMESPACE_NAME,

frontend/src/container/InfraMonitoringK8s/Namespaces/NamespaceDetails/NamespaceDetails.tsx

@@ -563,6 +563,7 @@ function NamespaceDetails({
 							tracesFilters={logAndTracesFilters}
 							selectedInterval={selectedInterval}
 							queryKey="namespaceTraces"
+							category={InfraMonitoringEvents.Namespace}
 							queryKeyFilters={[QUERY_KEYS.K8S_NAMESPACE_NAME]}
 						/>
 					)}

frontend/src/container/InfraMonitoringK8s/Nodes/NodeDetails/NodeDetails.tsx

@@ -564,6 +564,7 @@ function NodeDetails({
 							selectedInterval={selectedInterval}
 							queryKeyFilters={[QUERY_KEYS.K8S_NODE_NAME, QUERY_KEYS.K8S_CLUSTER_NAME]}
 							queryKey="nodeTraces"
+							category={InfraMonitoringEvents.Node}
 						/>
 					)}
 					{selectedView === VIEW_TYPES.EVENTS && (

frontend/src/container/InfraMonitoringK8s/Pods/PodDetails/PodDetails.tsx

@@ -605,6 +605,7 @@ function PodDetails({
 							tracesFilters={logsAndTracesFilters}
 							selectedInterval={selectedInterval}
 							queryKey="podTraces"
+							category={InfraMonitoringEvents.Pod}
 							queryKeyFilters={[
 								QUERY_KEYS.K8S_POD_NAME,
 								QUERY_KEYS.K8S_CLUSTER_NAME,

frontend/src/container/InfraMonitoringK8s/StatefulSets/StatefulSetDetails/StatefulSetDetails.tsx

@@ -582,6 +582,7 @@ function StatefulSetDetails({
 							tracesFilters={logAndTracesFilters}
 							selectedInterval={selectedInterval}
 							queryKey="statefulsetTraces"
+							category={InfraMonitoringEvents.StatefulSet}
 							queryKeyFilters={[
 								QUERY_KEYS.K8S_STATEFUL_SET_NAME,
 								QUERY_KEYS.K8S_NAMESPACE_NAME,