Refactor incident statuses (#1399)

* Add Agentic directives

* Add MCP management to the Template page

* Format tool name

* Add incident pending status support

* Update types for statuses

* Display current incident status in the header

* Update Node to 24

---------

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

Author: kshmidt-digma

.nvmrc

@@ -1 +1 @@
-22
+24

README.md

@@ -20,7 +20,7 @@ Run tests:
 npm run test
 ```
 
-Start dev server:
+Start dev server (with Web distribution):
 
 ```shell
 npm run start
@@ -42,21 +42,28 @@ Supported `platform` values:
 
 Build of the package will be in the `./dist` directory
 
-## Environment variables
+## Environment variables for Web distribution
 
 To set environment variables use .env file
 
-| Name              | Type   | Default | Description                                               |
-| ----------------- | ------ | ------- | --------------------------------------------------------- |
-| PORT              | number | 3000    | Port (for dev server)                                     |
-| UI_BASE_URL       | string | -       | Base URL to proxy requests to ingress (for dev server)    |
-| JAEGER_API_PATH   | string | -       | URL path to proxy requests to Jaeger UI (for dev server ) |
-| API_BASE_URL      | string | -       | Base URL to proxy Digma API requests (for dev server)     |
-| AUTH_API_BASE_URL | string | -       | Base URL to proxy auth API requests (for dev server)      |
-| API_TOKEN         | string | -       | API token (for dev server)                                |
-| USERNAME          | string | -       | User login (for dev server)                               |
-| PASSWORD          | string | -       | User password (for dev server)                            |
-| JAEGER_UI_PATH    | string | -       | Path to custom Jaeger UI build                            |
+| Name                            | Type    | Default | Description                                              |
+| ------------------------------- | ------- | ------- | -------------------------------------------------------- |
+| PORT                            | number  | 3000    | Port (for dev server)                                    |
+| UI_BASE_URL                     | string  | -       | Base URL to proxy requests to ingress (for dev server)   |
+| JAEGER_API_PATH                 | string  | -       | URL path to proxy requests to Jaeger UI (for dev server) |
+| API_BASE_URL                    | string  | -       | Base URL to proxy Digma API requests (for dev server)    |
+| AUTH_API_BASE_URL               | string  | -       | Base URL to proxy auth API requests (for dev server)     |
+| API_TOKEN                       | string  | -       | API token (for dev server)                               |
+| LOGIN                           | string  | -       | User login (for dev server)                              |
+| PASSWORD                        | string  | -       | User password (for dev server)                           |
+| IS_JAEGER_ENABLED               | boolean | false   | Enable links to Jaeger                                   |
+| 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                               |
+| GOOGLE_CLIENT_ID                | string  | -       | Google client ID                                         |
+| POSTHOG_API_KEY                 | string  | -       | PostHog API key                                          |
+| POSTHOG_URL                     | string  | -       | PostHog URL                                              |
+| PRODUCT_FRUITS_WORKSPACE_CODE   | string  | -       | Product Fruits workspace code                            |
 
 ## Jaeger UI
 

package-lock.json

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

package.json

@@ -1,50 +1,25 @@
-import { useState } from "react";
 import { useAdminDispatch } from "../../../../containers/Admin/hooks";
 import { setEnvironmentToDelete } from "../../../../redux/slices/environmentsManagerSlice";
 import { TrashBinIcon } from "../../../common/icons/16px/TrashBinIcon";
-import { ThreeDotsVerticalIcon } from "../../../common/icons/ThreeDotsVerticalIcon";
-import { NewPopover } from "../../../common/NewPopover";
-import { NewIconButton } from "../../../common/v3/NewIconButton";
-import { MenuList } from "../../../Navigation/common/MenuList";
-import * as s from "./styles";
+import { KebabMenu } from "../../../common/KebabMenu";
+import type { MenuItem } from "../../../Navigation/common/MenuList/types";
 import type { ActionMenuButtonProps } from "./types";
 
 export const ActionsMenuButton = ({ environment }: ActionMenuButtonProps) => {
-  const [isKebabButtonMenuOpen, setIsKebabButtonMenuOpen] = useState(false);
   const dispatch = useAdminDispatch();
 
   const handleDeleteMenuItemClick = () => {
     dispatch(setEnvironmentToDelete(environment.id));
   };
 
-  const handleKebabMenuOpenChange = (isOpen: boolean) => {
-    setIsKebabButtonMenuOpen(isOpen);
-  };
+  const items: MenuItem[] = [
+    {
+      id: "delete",
+      icon: <TrashBinIcon />,
+      label: "Delete",
+      onClick: handleDeleteMenuItemClick
+    }
+  ];
 
-  return (
-    <NewPopover
-      content={
-        <s.Popup>
-          <MenuList
-            items={[
-              {
-                id: "delete",
-                icon: <TrashBinIcon />,
-                label: "Delete",
-                onClick: handleDeleteMenuItemClick
-              }
-            ]}
-          />
-        </s.Popup>
-      }
-      onOpenChange={handleKebabMenuOpenChange}
-      isOpen={isKebabButtonMenuOpen}
-      placement={"bottom-end"}
-    >
-      <NewIconButton
-        icon={ThreeDotsVerticalIcon}
-        buttonType={"secondaryBorderless"}
-      />
-    </NewPopover>
-  );
+  return <KebabMenu items={items} />;
 };

src/components/Admin/Environments/ActionsMenuButton/index.tsx

@@ -80,7 +80,10 @@ export const AgentEvents = () => {
   );
 
   const isAgentRunning = useMemo(
-    () => Boolean(agentsData?.agents.find((x) => x.name === agentId)?.running),
+    () =>
+      Boolean(
+        agentsData?.agents.find((x) => x.name === agentId)?.status === "running"
+      ),
     [agentsData, agentId]
   );
 
@@ -104,15 +107,22 @@ export const AgentEvents = () => {
             speed={shouldShowTypingForEvent(i) ? TYPING_SPEED : undefined}
           />
         );
-      case "tool":
+      case "tool": {
+        let toolName = event.tool_name;
+
+        if (event.mcp_name) {
+          toolName += ` ${[event.mcp_name, "MCP tool"]
+            .filter(Boolean)
+            .join(" ")})`;
+        }
+
         return (
           <Accordion
-            summary={`${event.tool_name} (${[event.mcp_name, "MCP tool"]
-              .filter(Boolean)
-              .join(" ")})`}
+            summary={toolName}
             content={<TypingMarkdown text={convertToMarkdown(event.message)} />}
           />
         );
+      }
       default:
         return null;
     }

src/components/Agentic/IncidentDetails/AgentEvents/index.tsx

@@ -1,6 +1,6 @@
 import { Position } from "@xyflow/react";
 import { PlusIcon } from "../../../../common/icons/16px/PlusIcon";
-import { MCPServersSideContainer } from "../MCPServersSideContainer";
+import { MCPServersContainer } from "../MCPServersContainer";
 import { MCPServersToolbar } from "../MCPServersToolbar";
 import * as s from "./styles";
 import type { AgentFlowChartNodeToolbarProps } from "./types";
@@ -10,15 +10,20 @@ export const AgentFlowChartNodeToolbar = ({
   position,
   isEditMode,
   onAddMCPServer,
-  onEditMCPServers,
+  onEditMCPServer,
+  onDeleteMCPServer,
   showPlusButton
 }: AgentFlowChartNodeToolbarProps) => {
   const handleAddMCPServer = () => {
-    onAddMCPServer(position);
+    onAddMCPServer();
   };
 
-  const handleEditMCPServers = () => {
-    onEditMCPServers(position);
+  const handleEditMCPServer = (server: string) => {
+    onEditMCPServer(server);
+  };
+
+  const handleDeleteMCPServer = (server: string) => {
+    onDeleteMCPServer(server);
   };
 
   const toolbarItems = [
@@ -27,8 +32,8 @@ export const AgentFlowChartNodeToolbar = ({
           <MCPServersToolbar
             key={"mcp-servers-toolbar"}
             servers={servers}
-            onAddMCPServer={handleAddMCPServer}
-            onEditMCPServers={handleEditMCPServers}
+            onEditMCPServer={handleEditMCPServer}
+            onDeleteMCPServer={handleDeleteMCPServer}
           />
         ]
       : []),
@@ -50,11 +55,9 @@ export const AgentFlowChartNodeToolbar = ({
   return (
     <>
       {isEditMode ? (
-        [Position.Top, Position.Bottom].includes(position) && (
-          <s.NodeToolbarContainer>{sortedToolbarItems}</s.NodeToolbarContainer>
-        )
+        <s.NodeToolbarContainer>{sortedToolbarItems}</s.NodeToolbarContainer>
       ) : (
-        <MCPServersSideContainer servers={servers} />
+        <MCPServersContainer servers={servers} />
       )}
     </>
   );

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

@@ -5,7 +5,8 @@ export interface AgentFlowChartNodeToolbarProps {
   isEditMode?: boolean;
   position: Position;
   servers: ExtendedAgentMCPServer[];
-  onAddMCPServer: (position: Position) => void;
-  onEditMCPServers: (position: Position) => void;
+  onAddMCPServer: () => void;
+  onEditMCPServer: (server: string) => void;
+  onDeleteMCPServer: (server: string) => void;
   showPlusButton?: boolean;
 }

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

@@ -27,9 +27,7 @@ export const MCPServerIcon = ({
           themeKind={isActive ? "light" : "dark"}
         />
       );
-    case "mcp":
-      return <MCPLogoIcon size={size} color={"currentColor"} />;
     default:
-      return null;
+      return <MCPLogoIcon size={size} color={"currentColor"} />;
   }
 };

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

@@ -0,0 +1,32 @@
+import { useViewport } from "@xyflow/react";
+import { Tooltip } from "../../../../common/v3/Tooltip";
+import { MCPServerIcon } from "../MCPServerIcon";
+import * as s from "./styles";
+import type { MCPServersContainerProps } from "./types";
+
+const DEFAULT_ICON_SIZE = 27; // in pixels
+
+export const MCPServersContainer = ({ servers }: MCPServersContainerProps) => {
+  const viewport = useViewport();
+  const zoomLevel = viewport.zoom;
+
+  if (!servers || servers.length === 0) {
+    return null;
+  }
+
+  return (
+    <s.Container $zoomLevel={zoomLevel}>
+      {servers?.map((x) => (
+        <Tooltip title={x.display_name} key={x.name}>
+          <s.MCPServerBlock $isActive={x.active} $zoomLevel={viewport.zoom}>
+            <MCPServerIcon
+              type={x.name}
+              isActive={x.active}
+              size={DEFAULT_ICON_SIZE * viewport.zoom}
+            />
+          </s.MCPServerBlock>
+        </Tooltip>
+      ))}
+    </s.Container>
+  );
+};