Skip to content

Commit 9e21041

Browse files
kshmidt-digmakshmidt-digma
committed
Update layout and styles
1 parent b3e7fe2 commit 9e21041

File tree

22 files changed

+698
-83
lines changed

22 files changed

+698
-83
lines changed

‎package-lock.json‎

Lines changed: 59 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -77,6 +77,7 @@
7777
"@types/react": "^18.0.27",
7878
"@types/react-dom": "^18.0.10",
7979
"@types/react-helmet": "^6.1.7",
80+
"@types/react-lottie": "^1.2.10",
8081
"@types/react-syntax-highlighter": "^15.5.7",
8182
"@types/react-transition-group": "^4.4.5",
8283
"@types/semver": "^7.5.6",
@@ -139,6 +140,7 @@
139140
"react-error-boundary": "^5.0.0",
140141
"react-helmet": "^6.1.0",
141142
"react-hook-form": "^7.48.2",
143+
"react-lottie": "^1.2.10",
142144
"react-product-fruits": "^2.2.61",
143145
"react-redux": "^9.2.0",
144146
"react-router": "^7.5.2",

‎src/components/Agentic/IncidentDetails/AdditionalInfo/RelatedIssues/styles.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ export const IssueInfoContainer = styled.div`
1313
display: flex;
1414
align-items: center;
1515
gap: 8px;
16+
overflow: hidden;
1617
`;
1718

1819
export const IssueTypeTitle = styled.span`
@@ -53,6 +54,9 @@ export const TableHeadRow = styled.div`
5354
export const TableHeaderCell = styled.div<TableCellContentProps>`
5455
box-sizing: border-box;
5556
text-align: ${({ $align }) => $align ?? "left"};
57+
overflow: hidden;
58+
text-overflow: ellipsis;
59+
white-space: nowrap;
5660
`;
5761

5862
export const TableBody = styled.div`
@@ -82,4 +86,7 @@ export const TableBodyCell = styled.div<TableCellContentProps>`
8286
return "flex-start";
8387
}
8488
}};
89+
overflow: hidden;
90+
text-overflow: ellipsis;
91+
white-space: nowrap;
8592
`;

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

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { Fragment } from "react/jsx-runtime";
22
import { useAgenticSelector } from "../../../../containers/Agentic/hooks";
33
import { useGetIncidentAgentEventsQuery } from "../../../../redux/services/digma";
4-
import { Spinner } from "../../../common/v3/Spinner";
4+
import { ThreeCirclesSpinner } from "../../../common/ThreeCirclesSpinner";
55
import * as s from "./styles";
66

77
const REFRESH_INTERVAL = 10 * 1000; // in milliseconds
@@ -28,11 +28,7 @@ export const AgentEvents = () => {
2828
);
2929

3030
if (isLoading) {
31-
return (
32-
<s.LoadingContainer>
33-
<Spinner size={30} />
34-
</s.LoadingContainer>
35-
);
31+
return <ThreeCirclesSpinner />;
3632
}
3733

3834
return (

‎src/components/Agentic/IncidentDetails/AgentEvents/styles.ts‎

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,6 @@ export const Container = styled.div`
66
overflow: auto;
77
`;
88

9-
export const LoadingContainer = styled.div`
10-
display: flex;
11-
align-items: center;
12-
justify-content: center;
13-
flex-grow: 1;
14-
`;
15-
169
export const Message = styled.pre`
1710
white-space: pre-wrap;
1811
word-break: break-word;

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

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { useViewport } from "@xyflow/react";
12
import { DigmaLogoThemeableIcon } from "../../../../common/icons/24px/DigmaLogoThemeableIcon";
23
import { KubernetesLogoIcon } from "../../../../common/icons/25px/KubernetesLogoIcon";
34
import { PostgresLogoIcon } from "../../../../common/icons/25px/PostgresLogoIcon";
@@ -6,17 +7,22 @@ import * as s from "./styles";
67
import type { MCPServerBlockProps, MCPServerIconProps } from "./types";
78

89
export const MCPServerIcon = ({ type, isActive }: MCPServerIconProps) => {
10+
const DEFAULT_SIZE = 27; // in pixels
11+
const viewport = useViewport();
12+
13+
const size = viewport.zoom * DEFAULT_SIZE;
14+
915
switch (type) {
1016
case "github":
11-
return <GitHubLogoIcon size={27} color={"currentColor"} />;
17+
return <GitHubLogoIcon size={size} color={"currentColor"} />;
1218
case "postgres":
13-
return <PostgresLogoIcon size={27} color={"currentColor"} />;
19+
return <PostgresLogoIcon size={size} color={"currentColor"} />;
1420
case "kubernetes":
15-
return <KubernetesLogoIcon size={27} color={"currentColor"} />;
21+
return <KubernetesLogoIcon size={size} color={"currentColor"} />;
1622
case "digma":
1723
return (
1824
<DigmaLogoThemeableIcon
19-
size={27}
25+
size={size}
2026
color={"currentColor"}
2127
themeKind={isActive ? "light" : "dark"}
2228
/>
@@ -27,8 +33,10 @@ export const MCPServerIcon = ({ type, isActive }: MCPServerIconProps) => {
2733
};
2834

2935
export const MCPServerBlock = ({ type, isActive }: MCPServerBlockProps) => {
36+
const viewport = useViewport();
37+
3038
return (
31-
<s.MCPServerBlock $isActive={isActive}>
39+
<s.MCPServerBlock $isActive={isActive} $zoomLevel={viewport.zoom}>
3240
<MCPServerIcon type={type} isActive={isActive} />
3341
</s.MCPServerBlock>
3442
);

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

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,20 @@
11
import styled from "styled-components";
22
import type { MCPServerBlockElementProps } from "./types";
33

4+
const DEFAULT_MCP_SERVER_BLOCK_SIZE = 50; // in pixels
5+
46
export const MCPServerBlock = styled.div<MCPServerBlockElementProps>`
57
display: flex;
68
align-items: center;
79
justify-content: center;
8-
width: 50px;
9-
height: 50px;
10+
height: ${({ $zoomLevel }) =>
11+
$zoomLevel
12+
? $zoomLevel * DEFAULT_MCP_SERVER_BLOCK_SIZE
13+
: DEFAULT_MCP_SERVER_BLOCK_SIZE}px;
14+
width: ${({ $zoomLevel }) =>
15+
$zoomLevel
16+
? $zoomLevel * DEFAULT_MCP_SERVER_BLOCK_SIZE
17+
: DEFAULT_MCP_SERVER_BLOCK_SIZE}px;
1018
border-radius: 9px;
1119
border: 1px solid rgb(255 255 255 / 10%);
1220
color: ${({ theme, $isActive }) =>

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,4 +10,5 @@ export interface MCPServerBlockProps {
1010

1111
export interface MCPServerBlockElementProps {
1212
$isActive?: boolean;
13+
$zoomLevel?: number;
1314
}

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

Lines changed: 27 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { Position, type Edge } from "@xyflow/react";
2+
import { useState } from "react";
23
import {
34
useAgenticDispatch,
45
useAgenticSelector
@@ -146,7 +147,8 @@ const REFRESH_INTERVAL = 10 * 1000; // in milliseconds
146147
const getFlowChartNodeData = (
147148
agent?: Agent,
148149
sideContainerPosition?: Position,
149-
selectedAgentId?: string | null
150+
selectedAgentId?: string | null,
151+
zoomLevel?: number
150152
): Partial<FlowChartNodeData> => {
151153
return agent
152154
? {
@@ -158,7 +160,7 @@ const getFlowChartNodeData = (
158160
isVisible: agent.mcp_servers.length > 0,
159161
position: sideContainerPosition,
160162
element: (
161-
<s.MCPServersSideContainer>
163+
<s.MCPServersSideContainer $zoomLevel={zoomLevel}>
162164
{agent.mcp_servers.map((x) => (
163165
<MCPServerBlock
164166
key={x.name}
@@ -177,6 +179,7 @@ export const AgentFlowChart = () => {
177179
const incidentId = useAgenticSelector((state) => state.incidents.incidentId);
178180
const agentId = useAgenticSelector((state) => state.incidents.agentId);
179181
const dispatch = useAgenticDispatch();
182+
const [zoomLevel, setZoomLevel] = useState(1);
180183

181184
const { data } = useGetIncidentAgentsQuery(
182185
{ id: incidentId ?? "" },
@@ -221,6 +224,10 @@ export const AgentFlowChart = () => {
221224
}
222225
};
223226

227+
const handleZoomLevelChange = (newZoomLevel: number) => {
228+
setZoomLevel(newZoomLevel);
229+
};
230+
224231
const nodes: FlowChartNode[] = data
225232
? [
226233
{
@@ -230,7 +237,8 @@ export const AgentFlowChart = () => {
230237
...getFlowChartNodeData(
231238
agents?.find((a) => a.name === "digma"),
232239
Position.Top,
233-
agentId
240+
agentId,
241+
zoomLevel
234242
),
235243
orientation: "vertical",
236244
type: "input"
@@ -243,7 +251,8 @@ export const AgentFlowChart = () => {
243251
...getFlowChartNodeData(
244252
agents?.find((a) => a.name === "watchman"),
245253
Position.Top,
246-
agentId
254+
agentId,
255+
zoomLevel
247256
)
248257
}
249258
},
@@ -254,7 +263,8 @@ export const AgentFlowChart = () => {
254263
...getFlowChartNodeData(
255264
agents?.find((a) => a.name === "triager"),
256265
Position.Top,
257-
agentId
266+
agentId,
267+
zoomLevel
258268
)
259269
}
260270
},
@@ -265,7 +275,8 @@ export const AgentFlowChart = () => {
265275
...getFlowChartNodeData(
266276
agents?.find((a) => a.name === "infra_resolver"),
267277
Position.Top,
268-
agentId
278+
agentId,
279+
zoomLevel
269280
)
270281
}
271282
},
@@ -276,7 +287,8 @@ export const AgentFlowChart = () => {
276287
...getFlowChartNodeData(
277288
agents?.find((a) => a.name === "code_resolver"),
278289
Position.Bottom,
279-
agentId
290+
agentId,
291+
zoomLevel
280292
)
281293
}
282294
},
@@ -287,7 +299,8 @@ export const AgentFlowChart = () => {
287299
...getFlowChartNodeData(
288300
agents?.find((a) => a.name === "validator"),
289301
Position.Top,
290-
agentId
302+
agentId,
303+
zoomLevel
291304
),
292305
type: "output"
293306
}
@@ -323,6 +336,11 @@ export const AgentFlowChart = () => {
323336
: [];
324337

325338
return (
326-
<FlowChart nodes={nodes} edges={edges} onNodeClick={handleNodeClick} />
339+
<FlowChart
340+
nodes={nodes}
341+
edges={edges}
342+
onNodeClick={handleNodeClick}
343+
onZoomLevelChange={handleZoomLevelChange}
344+
/>
327345
);
328346
};

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

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
11
import styled from "styled-components";
2+
import type { MCPServersSideContainerProps } from "./types";
23

3-
export const MCPServersSideContainer = styled.div`
4+
const DEFAULT_GAP_SIZE = 13; // in pixels
5+
6+
export const MCPServersSideContainer = styled.div<MCPServersSideContainerProps>`
47
display: flex;
5-
gap: 13px;
8+
gap: ${({ $zoomLevel }) =>
9+
$zoomLevel ? $zoomLevel * DEFAULT_GAP_SIZE : DEFAULT_GAP_SIZE}px;
610
`;

0 commit comments

Comments
 (0)