Add GitHub issue icon, add tracking events

kshmidt-digma · kshmidt-digma · commit fd42a4b66136 · 2025-06-03T11:22:39.000+02:00
diff --git a/src/components/Agentic/IncidentDetails/AdditionalInfo/Artifacts/index.tsx b/src/components/Agentic/IncidentDetails/AdditionalInfo/Artifacts/index.tsx
@@ -1,13 +1,17 @@
 import { createColumnHelper } from "@tanstack/react-table";
 import { useMemo } from "react";
 import { useParams } from "react-router";
+import { useStableSearchParams } from "../../../../../hooks/useStableSearchParams";
 import { useGetIncidentQuery } from "../../../../../redux/services/digma";
 import type {
   ArtifactType,
   IncidentArtifact
 } from "../../../../../redux/services/types";
-import { PullRequestIcon } from "../../../../common/icons/24px/PullRequestIcon";
+import { sendUserActionTrackingEvent } from "../../../../../utils/actions/sendUserActionTrackingEvent";
+import { GitHubIssueIcon } from "../../../../common/icons/24px/GitHubIssueIcon";
+import { GitHubPullRequestIcon } from "../../../../common/icons/24px/GitHubPullRequestIcon";
 import { Tooltip } from "../../../../common/v3/Tooltip";
+import { trackingEvents } from "../../../tracking";
 import { Table } from "../Table";
 import * as s from "./styles";
 
@@ -18,7 +22,9 @@ const columnHelper = createColumnHelper<IncidentArtifact>();
 const getArtifactIcon = (type: ArtifactType) => {
   switch (type) {
     case "pr":
-      return <PullRequestIcon color={"currentColor"} size={24} />;
+      return <GitHubPullRequestIcon color={"currentColor"} size={24} />;
+    case "issue":
+      return <GitHubIssueIcon color={"currentColor"} size={24} />;
     default:
       return null;
   }
@@ -27,6 +33,8 @@ const getArtifactIcon = (type: ArtifactType) => {
 export const Artifacts = () => {
   const params = useParams();
   const incidentId = params.id;
+  const [searchParams] = useStableSearchParams();
+  const agentId = searchParams.get("agent");
 
   const { data } = useGetIncidentQuery(
     {
@@ -52,13 +60,23 @@ export const Artifacts = () => {
       cell: (info) => {
         const artifact = info.getValue();
 
+        const handleArtifactLinkClick = () => {
+          sendUserActionTrackingEvent(
+            trackingEvents.INCIDENT_ARTIFACTS_TABLE_ITEM_LINK_CLICKED,
+            {
+              agentId: agentId ?? ""
+            }
+          );
+        };
+
         return (
           <s.ArtifactInfoContainer>
             <s.ArtifactIconContainer>
               {getArtifactIcon(artifact.type)}
             </s.ArtifactIconContainer>
             <Tooltip title={artifact.display_name}>
               <s.Link
+                onClick={handleArtifactLinkClick}
                 href={artifact.url}
                 target={"_blank"}
                 rel={"noopener noreferrer"}
diff --git a/src/components/Agentic/IncidentDetails/AdditionalInfo/RelatedIssues/index.tsx b/src/components/Agentic/IncidentDetails/AdditionalInfo/RelatedIssues/index.tsx
@@ -1,8 +1,10 @@
 import { createColumnHelper } from "@tanstack/react-table";
 import { useMemo } from "react";
 import { useParams } from "react-router";
+import { useStableSearchParams } from "../../../../../hooks/useStableSearchParams";
 import { useGetIncidentQuery } from "../../../../../redux/services/digma";
 import type { GenericIncidentIssue } from "../../../../../redux/services/types";
+import { sendUserActionTrackingEvent } from "../../../../../utils/actions/sendUserActionTrackingEvent";
 import { getIdeLauncherLinkForError } from "../../../../../utils/getIdeLauncherLinkForError";
 import { getIdeLauncherLinkForSpan } from "../../../../../utils/getIdeLauncherLinkForSpan";
 import { getInsightTypeInfo } from "../../../../../utils/getInsightTypeInfo";
@@ -15,6 +17,7 @@ import {
   InsightIcon
 } from "../../../../Insights/InsightsCatalog/InsightsPage/InsightCardRenderer/insightCards/common/InsightCard/InsightHeader/InsightIcon";
 import { getValueLabel } from "../../../../Insights/InsightsCatalog/InsightsPage/InsightCardRenderer/insightCards/common/InsightCard/InsightHeader/InsightIcon/getValueLabel";
+import { trackingEvents } from "../../../tracking";
 import { Table } from "../Table";
 import * as s from "./styles";
 
@@ -38,6 +41,8 @@ const columnHelper = createColumnHelper<GenericIncidentIssue>();
 export const RelatedIssues = () => {
   const params = useParams();
   const incidentId = params.id;
+  const [searchParams] = useStableSearchParams();
+  const agentId = searchParams.get("agent");
 
   const { data } = useGetIncidentQuery(
     {
@@ -66,6 +71,15 @@ export const RelatedIssues = () => {
       cell: (info) => {
         const issue = info.getValue();
 
+        const handleIssueLinkClick = () => {
+          sendUserActionTrackingEvent(
+            trackingEvents.INCIDENT_RELATED_ISSUES_TABLE_ITEM_LINK_CLICKED,
+            {
+              agentId: agentId ?? ""
+            }
+          );
+        };
+
         switch (issue.type) {
           case "issue": {
             const insightTypeInfo = getInsightTypeInfo(issue.issue_type);
@@ -82,6 +96,7 @@ export const RelatedIssues = () => {
                 <Tooltip title={label}>
                   {issue.span_uid ? (
                     <s.Link
+                      onClick={handleIssueLinkClick}
                       href={getIdeLauncherLinkForSpan(issue.span_uid)}
                       target={"_blank"}
                       rel={"noopener noreferrer"}
@@ -102,6 +117,7 @@ export const RelatedIssues = () => {
               <s.IssueInfoContainer>
                 <Tooltip title={label}>
                   <s.Link
+                    onClick={handleIssueLinkClick}
                     href={getIdeLauncherLinkForError(issue.issue_id)}
                     target={"_blank"}
                     rel={"noopener noreferrer"}
diff --git a/src/components/Agentic/IncidentDetails/AdditionalInfo/index.tsx b/src/components/Agentic/IncidentDetails/AdditionalInfo/index.tsx
@@ -1,4 +1,7 @@
 import { useState, type ReactNode } from "react";
+import { useStableSearchParams } from "../../../../hooks/useStableSearchParams";
+import { sendUserActionTrackingEvent } from "../../../../utils/actions/sendUserActionTrackingEvent";
+import { trackingEvents } from "../../tracking";
 import { Artifacts } from "./Artifacts";
 import { RelatedIssues } from "./RelatedIssues";
 import * as s from "./styles";
@@ -11,8 +14,17 @@ const tabs: { id: TabId; name: string; content: ReactNode }[] = [
 
 export const AdditionalInfo = () => {
   const [selectedTabId, setSelectedTabId] = useState<TabId>("relatedIssues");
+  const [searchParams] = useStableSearchParams();
+  const agentId = searchParams.get("agent");
 
   const handleTabChange = (tabId: TabId) => () => {
+    sendUserActionTrackingEvent(
+      trackingEvents.INCIDENT_RELATED_ASSETS_TAB_CLICKED,
+      {
+        agentId: agentId ?? "",
+        tabId
+      }
+    );
     const newTab = tabs.find((tab) => tab.id === tabId);
 
     if (newTab) {
diff --git a/src/components/Agentic/IncidentDetails/AgentFlowChart/index.tsx b/src/components/Agentic/IncidentDetails/AgentFlowChart/index.tsx
@@ -1,12 +1,14 @@
 import { Position, type Edge } from "@xyflow/react";
 import { useState } from "react";
+import { sendUserActionTrackingEvent } from "../../../../utils/actions/sendUserActionTrackingEvent";
 import { groupBy } from "../../../../utils/groupBy";
 import { PlusIcon } from "../../../common/icons/16px/PlusIcon";
 import { FlowChart } from "../../common/FlowChart";
 import type {
   FlowChartNode,
   FlowChartNodeData
 } from "../../common/FlowChart/FlowChartNode";
+import { trackingEvents } from "../../tracking";
 import { MCPServerBlock } from "./MCPServerBlock";
 import * as s from "./styles";
 import type { AgentFlowChartProps, ExtendedAgent } from "./types";
@@ -27,6 +29,14 @@ const getFlowChartNodeData = ({
   onAddMCPServer?: (agentName: string, position: Position) => void;
 }): Partial<FlowChartNodeData> => {
   const handleAddMCPServerButtonClick = (position: Position) => () => {
+    sendUserActionTrackingEvent(
+      trackingEvents.AGENT_FLOW_CHART_NODE_ADD_MCP_SERVER_BUTTON_CLICKED,
+      {
+        agentName: agent?.name,
+        position
+      }
+    );
+
     if (!agent) {
       return;
     }
diff --git a/src/components/Agentic/IncidentDetails/Chat/index.tsx b/src/components/Agentic/IncidentDetails/Chat/index.tsx
@@ -7,9 +7,11 @@ import {
 } from "../../../../redux/services/digma";
 import type { IncidentAgentChatEvent } from "../../../../redux/services/types";
 import { isNumber } from "../../../../typeGuards/isNumber";
+import { sendUserActionTrackingEvent } from "../../../../utils/actions/sendUserActionTrackingEvent";
 import { ThreeCirclesSpinner } from "../../../common/ThreeCirclesSpinner";
 import { Spinner } from "../../../common/v3/Spinner";
 import { PromptInput } from "../../common/PromptInput";
+import { trackingEvents } from "../../tracking";
 import { Accordion } from "../AgentEvents/Accordion";
 import { TypingMarkdown } from "../TypingMarkdown";
 import { useAutoScroll } from "../useAutoScroll";
@@ -45,6 +47,12 @@ export const Chat = () => {
   );
 
   const handleInputSubmit = () => {
+    sendUserActionTrackingEvent(
+      trackingEvents.INCIDENT_AGENT_MESSAGE_SUBMITTED,
+      {
+        agentName: agentId ?? ""
+      }
+    );
     setInputValue("");
     scrollToBottom();
 
diff --git a/src/components/Agentic/IncidentDetails/index.tsx b/src/components/Agentic/IncidentDetails/index.tsx
@@ -8,11 +8,13 @@ import {
   useGetIncidentAgentsQuery,
   useGetIncidentQuery
 } from "../../../redux/services/digma";
+import { sendUserActionTrackingEvent } from "../../../utils/actions/sendUserActionTrackingEvent";
 import { TwoVerticalLinesIcon } from "../../common/icons/16px/TwoVerticalLinesIcon";
 import { Direction } from "../../common/icons/types";
 import { Spinner } from "../../common/v3/Spinner";
 import type { ToggleOption } from "../../common/v3/Toggle/types";
 import { Tooltip } from "../../common/v3/Tooltip";
+import { trackingEvents } from "../tracking";
 import { AdditionalInfo } from "./AdditionalInfo";
 import { AgentEvents } from "./AgentEvents";
 import { AgentFlowChart } from "./AgentFlowChart";
@@ -59,17 +61,21 @@ export const IncidentDetails = () => {
   );
 
   const handleHomeBreadcrumbClick = () => {
+    sendUserActionTrackingEvent(
+      trackingEvents.INCIDENT_HOME_BREADCRUMB_CLICKED,
+      { agentName: agentId ?? "" }
+    );
     setSearchParams((params) => {
       params.delete("agent");
       return params;
     });
   };
 
-  const handleAgentBreadcrumbClick = () => {
-    setAgentViewMode("summary");
-  };
-
   const handleAgentViewModeChange = (value: AgentViewMode) => {
+    sendUserActionTrackingEvent(
+      trackingEvents.INCIDENT_AGENT_VIEW_MODE_TOGGLE_CHANGED,
+      { agentName: agentId ?? "", mode: value }
+    );
     setAgentViewMode(value);
   };
 
@@ -143,9 +149,7 @@ export const IncidentDetails = () => {
                   {agentId && (
                     <>
                       <s.BreadcrumbsDivider>/</s.BreadcrumbsDivider>
-                      <s.AgentBreadcrumb onClick={handleAgentBreadcrumbClick}>
-                        {agentName}
-                      </s.AgentBreadcrumb>
+                      <s.AgentBreadcrumb>{agentName}</s.AgentBreadcrumb>
                     </>
                   )}
                 </s.Breadcrumbs>
diff --git a/src/components/Agentic/IncidentTemplate/AddMCPServerDialog/index.tsx b/src/components/Agentic/IncidentTemplate/AddMCPServerDialog/index.tsx
@@ -1,6 +1,8 @@
 import { useState, type ChangeEvent } from "react";
+import { sendUserActionTrackingEvent } from "../../../../utils/actions/sendUserActionTrackingEvent";
 import { CrossIcon } from "../../../common/icons/12px/CrossIcon";
 import { NewButton } from "../../../common/v3/NewButton";
+import { trackingEvents } from "../../tracking";
 import * as s from "./styles";
 import type { AddMCPServerDialogProps } from "./types";
 
@@ -15,11 +17,24 @@ export const AddMCPServerDialog = ({
   };
 
   const handleSaveButtonClick = () => {
+    sendUserActionTrackingEvent(
+      trackingEvents.INCIDENT_TEMPLATE_ADD_MCP_DIALOG_SAVE_BUTTON_CLICKED
+    );
     onSave(textAreaValue);
     onClose();
   };
 
+  const handleCancelButtonClick = () => {
+    sendUserActionTrackingEvent(
+      trackingEvents.INCIDENT_TEMPLATE_ADD_MCP_DIALOG_CANCEL_BUTTON_CLICKED
+    );
+    onClose();
+  };
+
   const handleCloseButtonClick = () => {
+    sendUserActionTrackingEvent(
+      trackingEvents.INCIDENT_TEMPLATE_ADD_MCP_DIALOG_CLOSE_BUTTON_CLICKED
+    );
     onClose();
   };
 
@@ -38,7 +53,7 @@ export const AddMCPServerDialog = ({
         <NewButton
           buttonType={"secondary"}
           label={"Cancel"}
-          onClick={handleCloseButtonClick}
+          onClick={handleCancelButtonClick}
         />
         <NewButton label={"Save"} onClick={handleSaveButtonClick} />
       </s.Footer>
diff --git a/src/components/Agentic/Sidebar/index.tsx b/src/components/Agentic/Sidebar/index.tsx
@@ -38,24 +38,32 @@ export const Sidebar = () => {
   const [logout, result] = useLogoutMutation();
 
   const handleLogoLinkClick = () => {
-    sendUserActionTrackingEvent(trackingEvents.LOGO_LINK_CLICKED);
+    sendUserActionTrackingEvent(trackingEvents.SIDEBAR_LOGO_LINK_CLICKED);
   };
 
   const handleIncidentListItemClick = (id: string) => () => {
+    sendUserActionTrackingEvent(
+      trackingEvents.SIDEBAR_INCIDENTS_LIST_ITEM_CLICKED
+    );
     void navigate(`/incidents/${id}`);
   };
 
   const handleTemplateButtonClick = () => {
-    sendUserActionTrackingEvent(trackingEvents.TEMPLATE_BUTTON_CLICKED);
+    sendUserActionTrackingEvent(trackingEvents.SIDEBAR_TEMPLATE_BUTTON_CLICKED);
     void navigate("/incidents/template");
   };
 
   const handleLogoutMenuItemClick = () => {
-    sendUserActionTrackingEvent(trackingEvents.LOGOUT_MENU_ITEM_CLICKED);
+    sendUserActionTrackingEvent(trackingEvents.SIDEBAR_USER_MENU_ITEM_CLICKED, {
+      item: "logout"
+    });
     void logout();
   };
 
   const handleUserMenuOpenChange = (isOpen: boolean) => {
+    sendUserActionTrackingEvent(trackingEvents.SIDEBAR_USER_MENU_OPEN_CHANGED, {
+      isOpen
+    });
     setIsUserMenuOpen(isOpen);
   };
 
diff --git a/src/components/Agentic/common/FlowChart/FlowChartNode/index.tsx b/src/components/Agentic/common/FlowChart/FlowChartNode/index.tsx
diff --git a/src/components/Agentic/tracking.ts b/src/components/Agentic/tracking.ts
diff --git a/src/components/common/icons/24px/GitHubIssueIcon.tsx b/src/components/common/icons/24px/GitHubIssueIcon.tsx
diff --git a/src/components/common/icons/24px/GitHubPullRequestIcon.tsx b/src/components/common/icons/24px/GitHubPullRequestIcon.tsx
