Skip to content

Commit 87928d3

Browse files
kshmidt-digmakshmidt-digma
committed
Update API contracts
1 parent ded6230 commit 87928d3

File tree

9 files changed

+187
-100
lines changed

9 files changed

+187
-100
lines changed

‎src/components/Agentic/IncidentDetails/AdditionalInfo/RelatedIssues/index.tsx‎

Lines changed: 57 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,10 @@ import {
44
getCoreRowModel,
55
useReactTable
66
} from "@tanstack/react-table";
7-
import { InsightType } from "../../../../../types";
7+
import { useMemo } from "react";
8+
import { useAgenticSelector } from "../../../../../containers/Agentic/hooks";
9+
import { useGetIncidentQuery } from "../../../../../redux/services/digma";
10+
import type { IncidentIssue } from "../../../../../redux/services/types";
811
import { getIdeLauncherLinkForSpan } from "../../../../../utils/getIdeLauncherLinkForSpan";
912
import { getInsightTypeInfo } from "../../../../../utils/getInsightTypeInfo";
1013
import { Tag } from "../../../../common/v3/Tag";
@@ -16,37 +19,56 @@ import {
1619
import { getValueLabel } from "../../../../Insights/InsightsCatalog/InsightsPage/InsightCardRenderer/insightCards/common/InsightCard/InsightHeader/InsightIcon/getValueLabel";
1720
import type { ColumnMeta } from "../types";
1821
import * as s from "./styles";
19-
import type { IncidentRelatedIssue } from "./types";
2022

21-
const mockData: {
22-
issues: {
23-
type: InsightType;
24-
spanUid: string;
25-
criticality: number;
26-
}[];
27-
} = {
28-
issues: [
29-
{
30-
type: InsightType.EndpointBottleneck,
31-
spanUid: "span-456",
32-
criticality: 1
33-
},
23+
// const mockData: {
24+
// issues: {
25+
// type: InsightType;
26+
// spanUid: string;
27+
// criticality: number;
28+
// }[];
29+
// } = {
30+
// issues: [
31+
// {
32+
// type: InsightType.EndpointBottleneck,
33+
// spanUid: "span-456",
34+
// criticality: 1
35+
// },
36+
// {
37+
// type: InsightType.SlowEndpoint,
38+
// spanUid: "span-012",
39+
// criticality: 0.2
40+
// },
41+
// {
42+
// type: InsightType.EndpointChattyApiV2,
43+
// spanUid: "span-678",
44+
// criticality: 0.3
45+
// }
46+
// ]
47+
// };
48+
49+
const REFRESH_INTERVAL = 10 * 1000; // in milliseconds
50+
51+
const columnHelper = createColumnHelper<IncidentIssue>();
52+
53+
export const RelatedIssues = () => {
54+
const incidentId = useAgenticSelector((state) => state.incidents.incidentId);
55+
const { data } = useGetIncidentQuery(
3456
{
35-
type: InsightType.SlowEndpoint,
36-
spanUid: "span-012",
37-
criticality: 0.2
57+
id: incidentId ?? ""
3858
},
3959
{
40-
type: InsightType.EndpointChattyApiV2,
41-
spanUid: "span-678",
42-
criticality: 0.3
60+
skip: !incidentId,
61+
pollingInterval: REFRESH_INTERVAL
4362
}
44-
]
45-
};
63+
);
4664

47-
const columnHelper = createColumnHelper<IncidentRelatedIssue>();
65+
const issues = useMemo(
66+
() =>
67+
data?.relatedIssues.filter((x) => Boolean(getInsightTypeInfo(x.type))) ??
68+
[],
69+
[data?.relatedIssues]
70+
);
4871

49-
export const RelatedIssues = () => {
5072
const columns = [
5173
columnHelper.accessor((x) => x, {
5274
header: "Issue",
@@ -62,17 +84,21 @@ export const RelatedIssues = () => {
6284
}
6385

6486
return (
65-
<s.IssueRow>
87+
<s.IssueInfoContainer>
6688
<InsightIcon
6789
insightTypeInfo={insightTypeInfo}
6890
criticality={issue.criticality}
6991
/>
7092
<Tooltip title={insightTypeInfo.label}>
71-
<s.Link href={getIdeLauncherLinkForSpan(issue.spanUid)}>
72-
{insightTypeInfo.label}
73-
</s.Link>
93+
{issue.spanUid ? (
94+
<s.Link href={getIdeLauncherLinkForSpan(issue.spanUid)}>
95+
{insightTypeInfo.label}
96+
</s.Link>
97+
) : (
98+
<s.IssueTypeTitle>{insightTypeInfo.label}</s.IssueTypeTitle>
99+
)}
74100
</Tooltip>
75-
</s.IssueRow>
101+
</s.IssueInfoContainer>
76102
);
77103
}
78104
}),
@@ -95,7 +121,7 @@ export const RelatedIssues = () => {
95121
];
96122

97123
const table = useReactTable({
98-
data: mockData.issues,
124+
data: issues,
99125
columns,
100126
getCoreRowModel: getCoreRowModel()
101127
});

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

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,21 @@ export const Container = styled.div`
99
padding: 0 24px;
1010
`;
1111

12-
export const IssueRow = styled.div`
12+
export const IssueInfoContainer = styled.div`
1313
display: flex;
1414
align-items: center;
1515
gap: 8px;
1616
`;
1717

18+
export const IssueTypeTitle = styled.span`
19+
font-size: 18px;
20+
line-height: 18px;
21+
color: ${({ theme }) => theme.colors.v3.text.primary};
22+
overflow: hidden;
23+
text-overflow: ellipsis;
24+
white-space: nowrap;
25+
`;
26+
1827
export const Link = styled(CommonLink)`
1928
font-size: 18px;
2029
line-height: 18px;

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

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,5 @@
1-
import type { InsightType } from "../../../../../types";
2-
31
export type ContentAlignment = "left" | "center" | "right";
42

5-
export interface IncidentRelatedIssue {
6-
type: InsightType;
7-
spanUid: string;
8-
criticality: number;
9-
}
10-
113
export interface TableCellContentProps {
124
$align?: ContentAlignment;
135
}

src/components/Agentic/IncidentDetails/AgentLiveStream/index.tsx renamed to src/components/Agentic/IncidentDetails/AgentEvents/index.tsx

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

@@ -15,11 +15,11 @@ const getMessage = (message: string) => {
1515
}
1616
};
1717

18-
export const AgentLiveStream = () => {
18+
export const AgentEvents = () => {
1919
const incidentId = useAgenticSelector((state) => state.incidents.incidentId);
2020
const agentId = useAgenticSelector((state) => state.incidents.agentId);
2121

22-
const { data, isLoading } = useGetIncidentAgentLiveStreamQuery(
22+
const { data, isLoading } = useGetIncidentAgentEventsQuery(
2323
{ incidentId: incidentId ?? "", agentId: agentId ?? "" },
2424
{
2525
pollingInterval: REFRESH_INTERVAL,
@@ -41,7 +41,9 @@ export const AgentLiveStream = () => {
4141
<Fragment key={i}>
4242
{x.type === "tool" ? (
4343
<details key={i}>
44-
<summary>{x.name} (tool)</summary>
44+
<summary>
45+
{x.mcp_name} {x.tool_name}
46+
</summary>
4547
<s.Message>{getMessage(x.message)}</s.Message>
4648
</details>
4749
) : (

src/components/Agentic/IncidentDetails/AgentLiveStream/styles.ts renamed to src/components/Agentic/IncidentDetails/AgentEvents/styles.ts

File renamed without changes.

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

Lines changed: 69 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,67 +1,97 @@
11
import { format } from "date-fns";
2-
import type {
3-
GetIncidentResponse,
4-
IncidentResponseItem
5-
} from "../../../../redux/services/types";
2+
import { useAgenticSelector } from "../../../../containers/Agentic/hooks";
3+
import { useGetIncidentQuery } from "../../../../redux/services/digma";
64
import { Tooltip } from "../../../common/v3/Tooltip";
75
import { Divider } from "./Divider";
86
import * as s from "./styles";
97

10-
const mockData: IncidentResponseItem &
11-
GetIncidentResponse & { affectedServices: string[] } = {
12-
id: "incident-123",
13-
name: "Sample Incident",
14-
active_status: "active",
15-
status: "active",
16-
created_at: "2023-10-01T12:00:00Z",
17-
closed_at: "2023-10-01T12:30:00Z",
18-
affectedServices: ["service-1", "service-2", "service-3", "service-4"],
19-
summary: "This is a summary of the incident."
20-
};
8+
// const mockData: GetIncidentResponse = {
9+
// id: "incident-123",
10+
// name: "Sample Incident",
11+
// activeStatus: "active",
12+
// status: "active",
13+
// createdAt: "2023-10-01T12:00:00Z",
14+
// closedAt: "2023-10-01T12:30:00Z",
15+
// affectedServices: ["service-1", "service-2", "service-3", "service-4"],
16+
// summary: "This is a summary of the incident.",
17+
// relatedIssues: [
18+
// {
19+
// issueId: "issue-1",
20+
// type: "issue",
21+
// spanUid: null,
22+
// criticality: 0.2
23+
// },
24+
// {
25+
// issueId: "issue-2",
26+
// type: "issue",
27+
// spanUid: null,
28+
// criticality: 1
29+
// }
30+
// ]
31+
// };
2132

2233
const DATE_FORMAT = "dd MMM, yyyy";
2334
const SERVICE_TAGS_TO_SHOW = 2;
35+
const REFRESH_INTERVAL = 10 * 1000; // in milliseconds
2436

2537
export const IncidentMetaData = () => {
26-
const hiddenServices = mockData.affectedServices.slice(SERVICE_TAGS_TO_SHOW);
38+
const incidentId = useAgenticSelector((state) => state.incidents.incidentId);
39+
40+
const { data } = useGetIncidentQuery(
41+
{ id: incidentId ?? "" },
42+
{
43+
skip: !incidentId,
44+
pollingInterval: REFRESH_INTERVAL
45+
}
46+
);
47+
48+
if (!data) {
49+
return null;
50+
}
51+
52+
const hiddenServices = data.affectedServices.slice(SERVICE_TAGS_TO_SHOW);
2753

2854
return (
2955
<s.Container>
3056
<s.DateAttribute>
3157
<s.DateLabel>Incident start time:</s.DateLabel>
32-
<Tooltip title={new Date(mockData.created_at).toString()}>
33-
<s.DateValue>{format(mockData.created_at, DATE_FORMAT)}</s.DateValue>
58+
<Tooltip title={new Date(data.createdAt).toString()}>
59+
<s.DateValue>{format(data.createdAt, DATE_FORMAT)}</s.DateValue>
3460
</Tooltip>
3561
</s.DateAttribute>
3662
<s.DividerContainer>
3763
<Divider color={"currentColor"} />
3864
</s.DividerContainer>
3965
<s.DateAttribute>
4066
<s.DateLabel>Incident close time:</s.DateLabel>
41-
{mockData.closed_at && (
42-
<Tooltip title={new Date(mockData.closed_at).toString()}>
43-
<s.DateValue>{format(mockData.closed_at, DATE_FORMAT)}</s.DateValue>
67+
{data.closedAt && (
68+
<Tooltip title={new Date(data.closedAt).toString()}>
69+
<s.DateValue>{format(data.closedAt, DATE_FORMAT)}</s.DateValue>
4470
</Tooltip>
4571
)}
4672
</s.DateAttribute>
47-
<s.DividerContainer>
48-
<Divider color={"currentColor"} />
49-
</s.DividerContainer>
50-
<s.ServicesContainer>
51-
<span>Affected services:</span>
52-
{mockData.affectedServices.slice(0, 2).map((x) => (
53-
<Tooltip key={x} title={x}>
54-
<s.ServiceTag>{x}</s.ServiceTag>
55-
</Tooltip>
56-
))}
57-
{hiddenServices.length > 0 && (
58-
<Tooltip title={hiddenServices.join(", ")}>
59-
<s.HiddenServicesCountTag>
60-
+{hiddenServices.length}
61-
</s.HiddenServicesCountTag>
62-
</Tooltip>
63-
)}
64-
</s.ServicesContainer>
73+
{data.affectedServices.length > 0 && (
74+
<>
75+
<s.DividerContainer>
76+
<Divider color={"currentColor"} />
77+
</s.DividerContainer>
78+
<s.ServicesContainer>
79+
<span>Affected services:</span>
80+
{data.affectedServices.slice(0, 2).map((x) => (
81+
<Tooltip key={x} title={x}>
82+
<s.ServiceTag>{x}</s.ServiceTag>
83+
</Tooltip>
84+
))}
85+
{hiddenServices.length > 0 && (
86+
<Tooltip title={hiddenServices.join(", ")}>
87+
<s.HiddenServicesCountTag>
88+
+{hiddenServices.length}
89+
</s.HiddenServicesCountTag>
90+
</Tooltip>
91+
)}
92+
</s.ServicesContainer>
93+
</>
94+
)}
6595
</s.Container>
6696
);
6797
};

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,8 @@ import { TwoVerticalLinesIcon } from "../../common/icons/16px/TwoVerticalLinesIc
1515
import { Direction } from "../../common/icons/types";
1616
import { Tooltip } from "../../common/v3/Tooltip";
1717
import { AdditionalInfo } from "./AdditionalInfo";
18+
import { AgentEvents } from "./AgentEvents";
1819
import { AgentFlowChart } from "./AgentFlowChart";
19-
import { AgentLiveStream } from "./AgentLiveStream";
2020
import { Chat } from "./Chat";
2121
import { IncidentMetaData } from "./IncidentMetaData";
2222
import * as s from "./styles";
@@ -46,7 +46,7 @@ export const IncidentDetails = () => {
4646
}
4747
);
4848

49-
const handleSummaryBreadcrumbClick = () => {
49+
const handleHomeBreadcrumbClick = () => {
5050
dispatch(setAgentId(null));
5151
};
5252

@@ -93,8 +93,8 @@ export const IncidentDetails = () => {
9393
<s.BottomContentContainer>
9494
<s.SummaryContainer>
9595
<s.Breadcrumbs>
96-
<s.BaseBreadcrumb onClick={handleSummaryBreadcrumbClick}>
97-
Summary
96+
<s.BaseBreadcrumb onClick={handleHomeBreadcrumbClick}>
97+
Home
9898
</s.BaseBreadcrumb>
9999
{agentId && (
100100
<>
@@ -118,7 +118,7 @@ export const IncidentDetails = () => {
118118
isChatMode ? (
119119
<Chat />
120120
) : (
121-
<AgentLiveStream />
121+
<AgentEvents />
122122
)
123123
) : (
124124
<s.IncidentSummaryText>

0 commit comments

Comments
 (0)