Add investigate button to the insight card (#1403)

* Add an investigate button to the insight card

* Show server with the MCP logo only for user-defined servers

* Add Close button to Directives and Template pages

* Format test MCP error

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

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                                              |

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "digma-ui",
-  "version": "16.1.0",
+  "version": "16.2.0-alpha.1",
   "description": "Digma UI",
   "scripts": {
     "lint:eslint": "eslint --cache .",

package.json

@@ -9,9 +9,14 @@ export const DEFAULT_SIZE = 12; // in pixels
 
 export const MCPServerIcon = ({
   type,
+  isCustom,
   isActive,
   size = DEFAULT_SIZE
 }: MCPServerIconProps) => {
+  if (isCustom) {
+    return <MCPLogoIcon size={size} color={"currentColor"} />;
+  }
+
   switch (type) {
     case "github":
       return <GitHubLogoIcon size={size} color={"currentColor"} />;

src/components/Agentic/IncidentDetails/AgentFlowChart/MCPServerIcon/index.tsx

@@ -1,5 +1,6 @@
 export interface MCPServerIconProps {
   type: string;
   isActive?: boolean;
+  isCustom?: boolean;
   size?: number;
 }

src/components/Agentic/IncidentDetails/AgentFlowChart/MCPServerIcon/types.ts

@@ -16,12 +16,13 @@ export const MCPServersContainer = ({ servers }: MCPServersContainerProps) => {
 
   return (
     <s.Container $zoomLevel={zoomLevel}>
-      {servers?.map((x) => (
-        <Tooltip title={x.display_name} key={x.name}>
+      {servers?.map((x, i) => (
+        <Tooltip title={x.display_name} key={`${x.name}__${i}`}>
           <s.MCPServerBlock $isActive={x.active} $zoomLevel={viewport.zoom}>
             <MCPServerIcon
               type={x.name}
               isActive={x.active}
+              isCustom={x.isEditable}
               size={DEFAULT_ICON_SIZE * viewport.zoom}
             />
           </s.MCPServerBlock>

src/components/Agentic/IncidentDetails/AgentFlowChart/MCPServersContainer/index.tsx

@@ -82,9 +82,9 @@ export const MCPServersToolbar = ({
 
   return (
     <s.Container $zoomLevel={zoomLevel}>
-      {servers.map((x) => (
+      {servers.map((x, i) => (
         <NewPopover
-          key={x.name}
+          key={`${x.name}__${i}`}
           placement={"bottom-end"}
           content={
             <Popup>
@@ -99,7 +99,12 @@ export const MCPServersToolbar = ({
           <div>
             <Tooltip title={x.display_name}>
               <s.MCPServerIconContainer $isEditable={x.isEditable}>
-                <MCPServerIcon type={x.name} isActive={x.active} size={17} />
+                <MCPServerIcon
+                  type={x.name}
+                  isActive={x.active}
+                  size={17}
+                  isCustom={x.isEditable}
+                />
               </s.MCPServerIconContainer>
             </Tooltip>
           </div>

src/components/Agentic/IncidentDetails/AgentFlowChart/MCPServersToolbar/index.tsx

@@ -10,7 +10,7 @@ import {
   useReactTable
 } from "@tanstack/react-table";
 import { useEffect, useMemo, useRef, useState } from "react";
-import { useBlocker } from "react-router";
+import { useBlocker, useNavigate } from "react-router";
 import { useAgenticDispatch } from "../../../containers/Agentic/hooks";
 import {
   digmaApi,
@@ -22,12 +22,14 @@ import {
 import type { IncidentAgentEvent } from "../../../redux/services/types";
 import { isString } from "../../../typeGuards/isString";
 import { CancelConfirmation } from "../../common/CancelConfirmation";
+import { CrossIcon } from "../../common/icons/16px/CrossIcon";
 import { SortIcon } from "../../common/icons/16px/SortIcon";
 import { TrashBinIcon } from "../../common/icons/16px/TrashBinIcon";
 import { Direction } from "../../common/icons/types";
 import { KebabMenu } from "../../common/KebabMenu";
 import { Checkmark } from "../../common/v3/Checkmark";
 import { Spinner } from "../../common/v3/Spinner";
+import { Tooltip } from "../../common/v3/Tooltip";
 import type { MenuItem } from "../../Navigation/common/MenuList/types";
 import * as s from "./styles";
 import type { ColumnMeta, ExtendedDirective } from "./types";
@@ -50,6 +52,7 @@ export const IncidentDirectives = () => {
   >([]);
   const [isCurrentConversationEnded, setIsCurrentConversationEnded] =
     useState(false);
+  const navigate = useNavigate();
 
   const dispatch = useAgenticDispatch();
 
@@ -87,6 +90,10 @@ export const IncidentDirectives = () => {
   const [deleteIncidentAgentDirective] =
     useDeleteIncidentAgentDirectiveMutation();
 
+  const handleCloseButtonClick = () => {
+    void navigate("/agentic/incidents");
+  };
+
   const handleSearchInputChange = (value: string) => {
     setSearchInputValue(value);
   };
@@ -407,11 +414,16 @@ export const IncidentDirectives = () => {
     <s.Container>
       <s.Header>
         Directives
-        <s.StyledSearchInput
-          onChange={handleSearchInputChange}
-          value={searchInputValue}
-        />
+        <Tooltip title={"Close"}>
+          <s.CloseButton onClick={handleCloseButtonClick}>
+            <CrossIcon color={"currentColor"} size={24} />
+          </s.CloseButton>
+        </Tooltip>
       </s.Header>
+      <s.StyledSearchInput
+        onChange={handleSearchInputChange}
+        value={searchInputValue}
+      />
       <s.TableContainer>
         {directives ? (
           <s.Table>

src/components/Agentic/IncidentDirectives/index.tsx

@@ -25,16 +25,28 @@ export const Header = styled.header`
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 32px 24px 24px;
+  padding: 32px 0 24px;
   gap: 24px;
   color: ${({ theme }) => theme.colors.v3.text.primary};
 `;
 
 export const StyledSearchInput = styled(SearchInput)`
   width: 251px;
+  margin-left: auto;
   flex-grow: 0;
 `;
 
+export const CloseButton = styled.button`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: ${({ theme }) => theme.colors.v3.text.secondary};
+  background: none;
+  border: none;
+  cursor: pointer;
+  margin-left: auto;
+`;
+
 export const TableContainer = styled.div`
   display: flex;
   flex-direction: column;

src/components/Agentic/IncidentDirectives/styles.ts

@@ -15,6 +15,20 @@ import { ServerStep } from "./ServerStep";
 import { ToolsStep } from "./ToolsStep";
 import type { MCPServerDialogProps } from "./types";
 
+const formatErrorMessage = (error: FetchBaseQueryError, prefix: string) => {
+  let errorDetails = "";
+
+  if (isString(error.data)) {
+    errorDetails = error.data;
+  }
+
+  if (isObject(error.data) && isString(error.data.detail)) {
+    errorDetails = error.data.detail;
+  }
+
+  return [prefix, errorDetails].filter(Boolean).join(": ");
+};
+
 export const MCPServerDialog = ({
   agentId,
   serverData,
@@ -57,7 +71,9 @@ export const MCPServerDialog = ({
         setCurrentStep((prev) => prev + 1);
       })
       .catch((error: FetchBaseQueryError) => {
-        setTestServerError(`Failed to test MCP server: ${String(error.data)}`);
+        setTestServerError(
+          formatErrorMessage(error, "Failed to test MCP server")
+        );
       });
   };
 
@@ -79,19 +95,8 @@ export const MCPServerDialog = ({
           onComplete();
         })
         .catch((error: FetchBaseQueryError) => {
-          const errorPrefix = "Failed to add MCP server";
-
-          let errorDetails = "";
-          if (isString(error.data)) {
-            errorDetails = error.data;
-          }
-
-          if (isObject(error.data) && isString(error.data.detail)) {
-            errorDetails = error.data.detail;
-          }
-
           setAddServerError(
-            [errorPrefix, errorDetails].filter(Boolean).join(": ")
+            formatErrorMessage(error, "Failed to add MCP server")
           );
         });
     } else {
@@ -105,19 +110,8 @@ export const MCPServerDialog = ({
           onComplete();
         })
         .catch((error: FetchBaseQueryError) => {
-          const errorPrefix = "Failed to add MCP server";
-
-          let errorDetails = "";
-          if (isString(error.data)) {
-            errorDetails = error.data;
-          }
-
-          if (isObject(error.data) && isString(error.data.detail)) {
-            errorDetails = error.data.detail;
-          }
-
           setAddServerError(
-            [errorPrefix, errorDetails].filter(Boolean).join(": ")
+            formatErrorMessage(error, "Failed to update MCP server")
           );
         });
     }