Add investigate button to the insight card

Author: kshmidt-digma

README.md

@@ -60,6 +60,7 @@ To set environment variables use .env file
 | JAEGER_UI_PATH                  | string  | -       | Path to custom Jaeger UI build                           |
 | IS_SANDBOX_ENABLED              | boolean | false   | Enable Sandbox (demo) mode                               |
 | ARE_INSIGHT_SUGGESTIONS_ENABLED | boolean | false   | Enable insight suggestions                               |
+| IS_AGENTIC_ENABLED              | boolean | false   | Enable Agentic service capabilities                      |
 | GOOGLE_CLIENT_ID                | string  | -       | Google client ID                                         |
 | POSTHOG_API_KEY                 | string  | -       | PostHog API key                                          |
 | POSTHOG_URL                     | string  | -       | PostHog URL                                              |

src/components/Insights/InsightsCatalog/InsightsPage/InsightCardRenderer/insightCards/common/InsightCard/index.tsx

@@ -2,6 +2,7 @@ import { Fragment, useEffect, useRef, useState } from "react";
 import { usePrevious } from "../../../../../../../../hooks/usePrevious";
 import { platform } from "../../../../../../../../platform";
 import {
+  useCreateIncidentFromInsightMutation,
   useMarkInsightReadMutation,
   useRecheckInsightMutation
 } from "../../../../../../../../redux/services/digma";
@@ -71,10 +72,13 @@ export const InsightCard = ({
   const {
     isJaegerEnabled,
     areInsightSuggestionsEnabled,
+    isAgenticEnabled,
     isSandboxModeEnabled
   } = useConfigSelector();
   const cardRef = useRef<HTMLDivElement>(null);
   const [showInfo, setShowInfo] = useState(false);
+  const [createIncidentFromInsight, createIncidentFromInsightResult] =
+    useCreateIncidentFromInsightMutation();
 
   const isCritical = insight.criticality > HIGH_CRITICALITY_THRESHOLD;
 
@@ -276,6 +280,28 @@ export const InsightCard = ({
     }
   };
 
+  const handleInvestigateButtonClick = () => {
+    sendUserActionTrackingEvent(
+      trackingEvents.INSIGHT_CARD_INVESTIGATE_BUTTON_CLICKED,
+      {
+        insightType: insight.type
+      }
+    );
+
+    void createIncidentFromInsight({
+      insightId: insight.id
+    })
+      .unwrap()
+      .then((data) => {
+        const incidentId = data.incidentId;
+        openURLInDefaultBrowser(`/agentic/incidents/${incidentId}`);
+      })
+      .catch(() => {
+        // eslint-disable-next-line no-console
+        console.error("Failed to create incident from insight");
+      });
+  };
+
   if (viewMode === "compact") {
     return (
       <IssueCompactCard
@@ -435,6 +461,23 @@ export const InsightCard = ({
             label={"Suggestion"}
           />
         );
+      case "investigate":
+        return (
+          <s.InvestigateButton
+            icon={
+              createIncidentFromInsightResult.isLoading
+                ? () => <s.InvestigateButtonSpinner />
+                : LightBulbWithScrewIcon
+            }
+            onClick={handleInvestigateButtonClick}
+            isDisabled={createIncidentFromInsightResult.isLoading}
+            label={
+              createIncidentFromInsightResult.isLoading
+                ? "Investigating..."
+                : "Investigate"
+            }
+          />
+        );
 
       default:
         return null;
@@ -495,6 +538,10 @@ export const InsightCard = ({
       actions.push("openSuggestion");
     }
 
+    if (isAgenticEnabled && insight.isDismissible && platform === "Web") {
+      actions.push("investigate");
+    }
+
     if (actions.length === 0) {
       return;
     }

src/components/Insights/InsightsCatalog/InsightsPage/InsightCardRenderer/insightCards/common/InsightCard/styles.ts

@@ -2,6 +2,7 @@ import styled, { css } from "styled-components";
 import { Card } from "../../../../../../../common/v3/Card";
 import { NewButton } from "../../../../../../../common/v3/NewButton";
 import { NewIconButton } from "../../../../../../../common/v3/NewIconButton";
+import { Spinner } from "../../../../../../../common/v3/Spinner";
 import type { StyledCardProps } from "./types";
 
 export const InsightFooter = styled.div`
@@ -68,6 +69,20 @@ export const SuggestionButton = styled(NewButton)`
   }
 `;
 
+export const InvestigateButton = styled(SuggestionButton)`
+  &:disabled {
+    color: ${({ theme }) => theme.colors.v3.icon.white};
+
+    span {
+      color: currentcolor;
+    }
+  }
+`;
+
+export const InvestigateButtonSpinner = styled(Spinner)`
+  color: currentcolor;
+`;
+
 export const TraceActionButtonIconContainer = styled.div`
   display: flex;
   align-items: center;

src/components/Insights/InsightsCatalog/InsightsPage/InsightCardRenderer/insightCards/common/InsightCard/types.ts

@@ -57,4 +57,5 @@ export type Action =
   | "openTrace"
   | "openLiveView"
   | "pin"
-  | "openSuggestion";
+  | "openSuggestion"
+  | "investigate";

src/components/Insights/tracking.ts

@@ -13,6 +13,8 @@ export const trackingEvents = addPrefix(
       "insight card create ticket link clicked",
     INSIGHT_CARD_MARK_AS_READ_BUTTON_CLICKED:
       "insight card mark as read button clicked",
+    INSIGHT_CARD_INVESTIGATE_BUTTON_CLICKED:
+      "insight card investigate button clicked",
     REFRESH_BUTTON_CLICKED: "refresh button clicked",
     INSIGHT_CARD_ASSET_LINK_CLICKED: "insight card asset link clicked",
     ISSUES_FILTER_PRESET_BUTTON_CLICKED: "issues filter preset button clicked",

src/components/common/App/ConfigContext.ts

@@ -33,7 +33,8 @@ export const initialState: ConfigContextData = {
   userId: isString(window.userId) ? window.userId : "",
   isDigmathonGameFinished: window.isDigmathonGameFinished === true,
   runConfig: undefined,
-  areInsightSuggestionsEnabled: window.areInsightSuggestionsEnabled === true,
+  areInsightSuggestionsEnabled: window.isAgenticEnabled === true,
+  isAgenticEnabled: window.isAgenticEnabled === true,
   googleClientId: isString(window.googleClientId) ? window.googleClientId : ""
 };
 

src/components/common/App/types.ts

@@ -181,6 +181,7 @@ export interface ConfigContextData {
   userInfo?: UserInfo;
   runConfig?: RunConfiguration;
   areInsightSuggestionsEnabled: boolean;
+  isAgenticEnabled: boolean;
   googleClientId: string;
 }
 

src/globals.d.ts

@@ -67,6 +67,7 @@ declare global {
     isDigmathonGameFinished?: unknown;
     isLoggingEnabled?: unknown;
     areInsightSuggestionsEnabled?: unknown;
+    isAgenticEnabled?: unknown;
     googleClientId?: unknown;
     isSandboxModeEnabled?: unknown;
     postHogApiKey?: unknown;

src/redux/services/digma.ts

@@ -5,6 +5,8 @@ import type {
   CloseIncidentPayload,
   CreateEnvironmentPayload,
   CreateEnvironmentResponse,
+  CreateIncidentFromInsightPayload,
+  CreateIncidentFromInsightResponse,
   DeleteEnvironmentPayload,
   DeleteEnvironmentResponse,
   DeleteIncidentAgentDirectivePayload,
@@ -739,6 +741,15 @@ export const digmaApi = createApi({
         method: "DELETE"
       }),
       invalidatesTags: ["IncidentAgentMCPServer"]
+    }),
+    createIncidentFromInsight: builder.mutation<
+      CreateIncidentFromInsightResponse,
+      CreateIncidentFromInsightPayload
+    >({
+      query: ({ insightId }) => ({
+        url: `Agentic/issue-entry/${window.encodeURIComponent(insightId)}`,
+        method: "POST"
+      })
     })
   })
 });
@@ -809,5 +820,6 @@ export const {
   useTestIncidentAgentMCPServerMutation,
   useAddIncidentAgentMCPServerMutation,
   useUpdateIncidentAgentMCPServerMutation,
-  useDeleteIncidentAgentMCPServerMutation
+  useDeleteIncidentAgentMCPServerMutation,
+  useCreateIncidentFromInsightMutation
 } = digmaApi;

src/redux/services/types.ts

@@ -1288,3 +1288,11 @@ export interface UpdateMCPServerPayload {
 export interface DeleteMCPServerPayload {
   id: string;
 }
+
+export interface CreateIncidentFromInsightPayload {
+  insightId: string;
+}
+
+export interface CreateIncidentFromInsightResponse {
+  incidentId: string;
+}