Skip to content

Commit d9a8c7a

Browse files
kshmidt-digmakshmidt-digma
committed
Add Agentic directives
1 parent 704b3bb commit d9a8c7a

File tree

30 files changed

+811
-155
lines changed

30 files changed

+811
-155
lines changed

‎README.md‎

Lines changed: 20 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ Run tests:
2020
npm run test
2121
```
2222

23-
Start dev server:
23+
Start dev server (with Web distribution):
2424

2525
```shell
2626
npm run start
@@ -42,21 +42,28 @@ Supported `platform` values:
4242

4343
Build of the package will be in the `./dist` directory
4444

45-
## Environment variables
45+
## Environment variables for Web distribution
4646

4747
To set environment variables use .env file
4848

49-
| Name | Type | Default | Description |
50-
| ----------------- | ------ | ------- | --------------------------------------------------------- |
51-
| PORT | number | 3000 | Port (for dev server) |
52-
| UI_BASE_URL | string | - | Base URL to proxy requests to ingress (for dev server) |
53-
| JAEGER_API_PATH | string | - | URL path to proxy requests to Jaeger UI (for dev server ) |
54-
| API_BASE_URL | string | - | Base URL to proxy Digma API requests (for dev server) |
55-
| AUTH_API_BASE_URL | string | - | Base URL to proxy auth API requests (for dev server) |
56-
| API_TOKEN | string | - | API token (for dev server) |
57-
| USERNAME | string | - | User login (for dev server) |
58-
| PASSWORD | string | - | User password (for dev server) |
59-
| JAEGER_UI_PATH | string | - | Path to custom Jaeger UI build |
49+
| Name | Type | Default | Description |
50+
| ------------------------------- | ------- | ------- | --------------------------------------------------------- |
51+
| PORT | number | 3000 | Port (for dev server) |
52+
| UI_BASE_URL | string | - | Base URL to proxy requests to ingress (for dev server) |
53+
| JAEGER_API_PATH | string | - | URL path to proxy requests to Jaeger UI (for dev server ) |
54+
| API_BASE_URL | string | - | Base URL to proxy Digma API requests (for dev server) |
55+
| AUTH_API_BASE_URL | string | - | Base URL to proxy auth API requests (for dev server) |
56+
| API_TOKEN | string | - | API token (for dev server) |
57+
| USERNAME | string | - | User login (for dev server) |
58+
| PASSWORD | string | - | User password (for dev server) |
59+
| IS_JAEGER_ENABLED | boolean | false | Enable links to Jaeger |
60+
| JAEGER_UI_PATH | string | - | Path to custom Jaeger UI build |
61+
| IS_SANDBOX_ENABLED | boolean | false | Enable Sandbox (demo) mode |
62+
| ARE_INSIGHT_SUGGESTIONS_ENABLED | boolean | false | Enable insight suggestions |
63+
| GOOGLE_CLIENT_ID | string | - | Google client ID |
64+
| POSTHOG_API_KEY | string | - | PostHog API key |
65+
| POSTHOG_URL | string | - | PostHog URL |
66+
| PRODUCT_FRUITS_WORKSPACE_CODE | string | - | Product Fruits workspace code |
6067

6168
## Jaeger UI
6269

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

Lines changed: 11 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,25 @@
1-
import { useState } from "react";
21
import { useAdminDispatch } from "../../../../containers/Admin/hooks";
32
import { setEnvironmentToDelete } from "../../../../redux/slices/environmentsManagerSlice";
43
import { TrashBinIcon } from "../../../common/icons/16px/TrashBinIcon";
5-
import { ThreeDotsVerticalIcon } from "../../../common/icons/ThreeDotsVerticalIcon";
6-
import { NewPopover } from "../../../common/NewPopover";
7-
import { NewIconButton } from "../../../common/v3/NewIconButton";
8-
import { MenuList } from "../../../Navigation/common/MenuList";
9-
import * as s from "./styles";
4+
import { KebabMenu } from "../../../common/KebabMenu";
5+
import type { MenuItem } from "../../../Navigation/common/MenuList/types";
106
import type { ActionMenuButtonProps } from "./types";
117

128
export const ActionsMenuButton = ({ environment }: ActionMenuButtonProps) => {
13-
const [isKebabButtonMenuOpen, setIsKebabButtonMenuOpen] = useState(false);
149
const dispatch = useAdminDispatch();
1510

1611
const handleDeleteMenuItemClick = () => {
1712
dispatch(setEnvironmentToDelete(environment.id));
1813
};
1914

20-
const handleKebabMenuOpenChange = (isOpen: boolean) => {
21-
setIsKebabButtonMenuOpen(isOpen);
22-
};
15+
const items: MenuItem[] = [
16+
{
17+
id: "delete",
18+
icon: <TrashBinIcon />,
19+
label: "Delete",
20+
onClick: handleDeleteMenuItemClick
21+
}
22+
];
2323

24-
return (
25-
<NewPopover
26-
content={
27-
<s.Popup>
28-
<MenuList
29-
items={[
30-
{
31-
id: "delete",
32-
icon: <TrashBinIcon />,
33-
label: "Delete",
34-
onClick: handleDeleteMenuItemClick
35-
}
36-
]}
37-
/>
38-
</s.Popup>
39-
}
40-
onOpenChange={handleKebabMenuOpenChange}
41-
isOpen={isKebabButtonMenuOpen}
42-
placement={"bottom-end"}
43-
>
44-
<NewIconButton
45-
icon={ThreeDotsVerticalIcon}
46-
buttonType={"secondaryBorderless"}
47-
/>
48-
</NewPopover>
49-
);
24+
return <KebabMenu items={items} />;
5025
};

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

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,15 +10,15 @@ export const AgentFlowChartNodeToolbar = ({
1010
position,
1111
isEditMode,
1212
onAddMCPServer,
13-
onEditMCPServers,
13+
onEditMCPServer,
1414
showPlusButton
1515
}: AgentFlowChartNodeToolbarProps) => {
1616
const handleAddMCPServer = () => {
1717
onAddMCPServer(position);
1818
};
1919

20-
const handleEditMCPServers = () => {
21-
onEditMCPServers(position);
20+
const handleEditMCPServer = (server: string) => {
21+
onEditMCPServer(server, position);
2222
};
2323

2424
const toolbarItems = [
@@ -27,8 +27,7 @@ export const AgentFlowChartNodeToolbar = ({
2727
<MCPServersToolbar
2828
key={"mcp-servers-toolbar"}
2929
servers={servers}
30-
onAddMCPServer={handleAddMCPServer}
31-
onEditMCPServers={handleEditMCPServers}
30+
onEditMCPServer={handleEditMCPServer}
3231
/>
3332
]
3433
: []),

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,6 @@ export interface AgentFlowChartNodeToolbarProps {
66
position: Position;
77
servers: ExtendedAgentMCPServer[];
88
onAddMCPServer: (position: Position) => void;
9-
onEditMCPServers: (position: Position) => void;
9+
onEditMCPServer: (server: string, position: Position) => void;
1010
showPlusButton?: boolean;
1111
}

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

Lines changed: 35 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,7 @@
11
import { useNodeId, useViewport } from "@xyflow/react";
22
import { useState } from "react";
33
import { sendUserActionTrackingEvent } from "../../../../../utils/actions/sendUserActionTrackingEvent";
4-
import { PlusIcon } from "../../../../common/icons/16px/PlusIcon";
54
import { WrenchIcon } from "../../../../common/icons/16px/WrenchIcon";
6-
import { ThreeDotsVerticalIcon } from "../../../../common/icons/ThreeDotsVerticalIcon";
75
import { NewPopover } from "../../../../common/NewPopover";
86
import { MenuList } from "../../../../Navigation/common/MenuList";
97
import type { MenuItem } from "../../../../Navigation/common/MenuList/types";
@@ -15,40 +13,44 @@ import type { MCPServersToolbarProps } from "./types";
1513

1614
export const MCPServersToolbar = ({
1715
servers,
18-
onAddMCPServer,
19-
onEditMCPServers
16+
onEditMCPServer
2017
}: MCPServersToolbarProps) => {
2118
const [isKebabMenuOpen, setIsKebabMenuOpen] = useState(false);
19+
const [selectedMCPServer, setSelectedMCPServer] = useState<string>();
2220
const id = useNodeId();
2321
const viewport = useViewport();
2422
const zoomLevel = viewport.zoom;
2523

26-
const handleKebabMenuOpenChange = (isOpen: boolean) => {
27-
sendUserActionTrackingEvent(
28-
trackingEvents.FLOW_CHART_NODE_MCP_TOOLBAR_MENU_CLICKED,
29-
{
30-
id,
31-
isOpen
32-
}
33-
);
24+
const handleKebabMenuOpenChange = (server: string) => (isOpen: boolean) => {
25+
if (isOpen) {
26+
sendUserActionTrackingEvent(
27+
trackingEvents.FLOW_CHART_NODE_MCP_TOOLBAR_SERVER_ICON_CLICKED,
28+
{
29+
id
30+
}
31+
);
32+
setSelectedMCPServer(server);
33+
} else {
34+
setSelectedMCPServer(undefined);
35+
}
3436
setIsKebabMenuOpen(isOpen);
3537
};
3638

3739
const handleKebabMenuItemClick = (id: string) => {
3840
sendUserActionTrackingEvent(
39-
trackingEvents.FLOW_CHART_NODE_MCP_TOOLBAR_MENU_ITEM_CLICKED,
41+
trackingEvents.FLOW_CHART_NODE_MCP_TOOLBAR_SERVER_ICON_MENU_ITEM_CLICKED,
4042
{
4143
id
4244
}
4345
);
4446

4547
switch (id) {
46-
case "edit":
47-
onEditMCPServers?.();
48-
break;
49-
case "add":
50-
onAddMCPServer?.();
48+
case "edit": {
49+
if (selectedMCPServer) {
50+
onEditMCPServer(selectedMCPServer);
51+
}
5152
break;
53+
}
5254
}
5355

5456
setIsKebabMenuOpen(false);
@@ -58,41 +60,30 @@ export const MCPServersToolbar = ({
5860
{
5961
id: "edit",
6062
icon: <WrenchIcon size={16} color={"currentColor"} />,
61-
label: "Edit MCPs",
63+
label: "Edit",
6264
onClick: () => handleKebabMenuItemClick("edit")
63-
},
64-
{
65-
id: "add",
66-
icon: <PlusIcon size={16} color={"currentColor"} />,
67-
label: "Add new MCP",
68-
onClick: () => handleKebabMenuItemClick("add")
6965
}
7066
];
7167

7268
return (
7369
<s.Container $zoomLevel={zoomLevel}>
7470
{servers.map((x) => (
75-
<MCPServerIcon
71+
<NewPopover
7672
key={x.name}
77-
type={x.name}
78-
isActive={x.active}
79-
size={17}
80-
/>
73+
placement={"bottom-end"}
74+
content={
75+
<Popup>
76+
<MenuList items={kebabMenuItems} />
77+
</Popup>
78+
}
79+
isOpen={isKebabMenuOpen && selectedMCPServer === x.name}
80+
onOpenChange={handleKebabMenuOpenChange(x.name)}
81+
>
82+
<s.MCPServerIconContainer>
83+
<MCPServerIcon type={x.name} isActive={x.active} size={17} />
84+
</s.MCPServerIconContainer>
85+
</NewPopover>
8186
))}
82-
<NewPopover
83-
placement={"bottom-end"}
84-
content={
85-
<Popup>
86-
<MenuList items={kebabMenuItems} />
87-
</Popup>
88-
}
89-
isOpen={isKebabMenuOpen}
90-
onOpenChange={handleKebabMenuOpenChange}
91-
>
92-
<s.KebabMenuButton>
93-
<ThreeDotsVerticalIcon color={"currentColor"} size={16} />
94-
</s.KebabMenuButton>
95-
</NewPopover>
9687
</s.Container>
9788
);
9889
};

‎src/components/Agentic/IncidentDetails/AgentFlowChart/MCPServersToolbar/styles.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,12 @@ export const Container = styled.div<ContainerProps>`
1818
);
1919
`;
2020

21+
export const MCPServerIconContainer = styled.div`
22+
display: flex;
23+
align-items: center;
24+
justify-content: center;
25+
`;
26+
2127
export const KebabMenuButton = styled.button`
2228
border: none;
2329
display: flex;

‎src/components/Agentic/IncidentDetails/AgentFlowChart/MCPServersToolbar/types.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,7 @@ import type { ExtendedAgentMCPServer } from "../types";
22

33
export interface MCPServersToolbarProps {
44
servers: ExtendedAgentMCPServer[];
5-
onAddMCPServer: () => void;
6-
onEditMCPServers: () => void;
5+
onEditMCPServer: (server: string) => void;
76
}
87

98
export interface ContainerProps {

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

Lines changed: 14 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -16,14 +16,18 @@ const getFlowChartNodeData = ({
1616
isInteractive,
1717
isEditMode,
1818
onAddMCPServer,
19-
onEditMCPServers
19+
onEditMCPServer
2020
}: {
2121
agent?: ExtendedAgent;
2222
isInteractive?: boolean;
2323
isSelected?: boolean;
2424
isEditMode?: boolean;
2525
onAddMCPServer?: (agentName: string, position: Position) => void;
26-
onEditMCPServers?: (agentName: string, position: Position) => void;
26+
onEditMCPServer?: (
27+
agentName: string,
28+
server: string,
29+
position: Position
30+
) => void;
2731
}): Partial<FlowChartNodeData> => {
2832
const handleAddMCPServer = (position: Position) => () => {
2933
sendUserActionTrackingEvent(
@@ -41,12 +45,12 @@ const getFlowChartNodeData = ({
4145
onAddMCPServer?.(agent.name, position);
4246
};
4347

44-
const handleEditMCPServers = (position: Position) => () => {
48+
const handleEditMCPServer = (position: Position) => (server: string) => {
4549
if (!agent) {
4650
return;
4751
}
4852

49-
onEditMCPServers?.(agent.name, position);
53+
onEditMCPServer?.(agent.name, server, position);
5054
};
5155

5256
const serverGroups = groupBy(
@@ -73,7 +77,7 @@ const getFlowChartNodeData = ({
7377
position={position}
7478
servers={serverGroups[position] ?? []}
7579
onAddMCPServer={handleAddMCPServer(position)}
76-
onEditMCPServers={handleEditMCPServers(position)}
80+
onEditMCPServer={handleEditMCPServer(position)}
7781
showPlusButton={
7882
isEditMode &&
7983
(["watchman", "triager"].includes(agent.name) ||
@@ -97,7 +101,7 @@ export const AgentFlowChart = ({
97101
className,
98102
isEditMode,
99103
onAddMCPServer,
100-
onEditMCPServers
104+
onEditMCPServer
101105
}: AgentFlowChartProps) => {
102106
const extendedAgents: ExtendedAgent[] = [
103107
{
@@ -182,7 +186,7 @@ export const AgentFlowChart = ({
182186
"inactive",
183187
isEditMode,
184188
onAddMCPServer,
185-
onEditMCPServers
189+
onEditMCPServer
186190
})
187191
}
188192
},
@@ -198,7 +202,7 @@ export const AgentFlowChart = ({
198202
"inactive",
199203
isEditMode,
200204
onAddMCPServer,
201-
onEditMCPServers
205+
onEditMCPServer
202206
})
203207
}
204208
},
@@ -214,7 +218,7 @@ export const AgentFlowChart = ({
214218
"inactive",
215219
isEditMode,
216220
onAddMCPServer,
217-
onEditMCPServers
221+
onEditMCPServer
218222
})
219223
}
220224
},
@@ -230,7 +234,7 @@ export const AgentFlowChart = ({
230234
"inactive",
231235
isEditMode,
232236
onAddMCPServer,
233-
onEditMCPServers
237+
onEditMCPServer
234238
})
235239
}
236240
},

0 commit comments

Comments
 (0)