Skip to content

Commit 2413771

Browse files
kshmidt-digmakshmidt-digma
committed
Add URL params, related artifacts, chats, improve styling
1 parent d7dd3a4 commit 2413771

File tree

41 files changed

+1002
-434
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

41 files changed

+1002
-434
lines changed

‎src/components/Admin/Home/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import { useEffect, useMemo, useState } from "react";
2-
import { useSearchParams } from "react-router";
32
import {
43
useAdminDispatch,
54
useAdminSelector
65
} from "../../../containers/Admin/hooks";
76
import { useMount } from "../../../hooks/useMount";
7+
import { useStableSearchParams } from "../../../hooks/useStableSearchParams";
88
import { InsightsSortingCriterion } from "../../../redux/services/types";
99
import {
1010
setSelectedEnvironmentId,
@@ -26,7 +26,7 @@ export const Home = () => {
2626
);
2727
const dispatch = useAdminDispatch();
2828
const [issuesQuery, setIssuesQuery] = useState<string>();
29-
const [searchParams, setSearchParams] = useSearchParams();
29+
const [searchParams, setSearchParams] = useStableSearchParams();
3030
const environmentParam = searchParams.get("environment");
3131
const issuesParam = searchParams.get("issues");
3232
const servicesParam = useMemo(

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

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
import { createColumnHelper } from "@tanstack/react-table";
2+
import { useMemo } from "react";
3+
import { useParams } from "react-router";
4+
import { useGetIncidentQuery } from "../../../../../redux/services/digma";
5+
import type {
6+
ArtifactType,
7+
IncidentArtifact
8+
} from "../../../../../redux/services/types";
9+
import { PullRequestIcon } from "../../../../common/icons/24px/PullRequestIcon";
10+
import { Tooltip } from "../../../../common/v3/Tooltip";
11+
import { Table } from "../Table";
12+
import * as s from "./styles";
13+
14+
const REFRESH_INTERVAL = 10 * 1000; // in milliseconds
15+
16+
const columnHelper = createColumnHelper<IncidentArtifact>();
17+
18+
const getArtifactIcon = (type: ArtifactType) => {
19+
switch (type) {
20+
case "pr":
21+
return <PullRequestIcon color={"currentColor"} size={24} />;
22+
default:
23+
return null;
24+
}
25+
};
26+
27+
export const Artifacts = () => {
28+
const params = useParams();
29+
const incidentId = params.id;
30+
31+
const { data } = useGetIncidentQuery(
32+
{
33+
id: incidentId ?? ""
34+
},
35+
{
36+
skip: !incidentId,
37+
pollingInterval: REFRESH_INTERVAL
38+
}
39+
);
40+
41+
const artifacts = useMemo(
42+
() => [...(data?.related_artifacts ?? [])].sort((a, b) => a.id - b.id),
43+
[data?.related_artifacts]
44+
);
45+
46+
const columns = [
47+
columnHelper.accessor((x) => x, {
48+
header: "Changes",
49+
meta: {
50+
width: "80%"
51+
},
52+
cell: (info) => {
53+
const artifact = info.getValue();
54+
55+
return (
56+
<s.ArtifactInfoContainer>
57+
<s.ArtifactIconContainer>
58+
{getArtifactIcon(artifact.type)}
59+
</s.ArtifactIconContainer>
60+
<Tooltip title={artifact.display_name}>
61+
<s.Link
62+
href={artifact.url}
63+
target={"_blank"}
64+
rel={"noopener noreferrer"}
65+
>
66+
{artifact.display_name}
67+
</s.Link>
68+
</Tooltip>
69+
</s.ArtifactInfoContainer>
70+
);
71+
}
72+
}),
73+
columnHelper.accessor("id", {
74+
header: "ID",
75+
meta: {
76+
width: "20%",
77+
textAlign: "right"
78+
},
79+
cell: (info) => {
80+
const id = info.getValue();
81+
return <s.ArtifactId>#{id}</s.ArtifactId>;
82+
}
83+
})
84+
];
85+
86+
return (
87+
<s.Container>
88+
<Table data={artifacts} columns={columns} />
89+
</s.Container>
90+
);
91+
};

‎src/components/Agentic/IncidentDetails/AdditionalInfo/Artifacts/mockData.ts‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import type { IncidentArtifact } from "../../../../../redux/services/types";
2+
3+
export const mockedArtifacts: IncidentArtifact[] = [
4+
{
5+
id: 1,
6+
type: "pr",
7+
display_name: "Artifact 1",
8+
url: "https://example.com/artifact-1"
9+
},
10+
{
11+
id: 2,
12+
type: "pr",
13+
display_name: "Artifact 2",
14+
url: "https://example.com/artifact-2"
15+
},
16+
{
17+
id: 3,
18+
type: "pr",
19+
display_name: "Artifact 3",
20+
url: "https://example.com/artifact-3"
21+
}
22+
];

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

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import styled from "styled-components";
2+
import { Link as CommonLink } from "../../../../common/v3/Link";
3+
4+
export const Container = styled.div`
5+
display: flex;
6+
flex-direction: column;
7+
gap: 10px;
8+
padding: 0 24px;
9+
`;
10+
11+
export const ArtifactInfoContainer = styled.div`
12+
display: flex;
13+
align-items: center;
14+
gap: 8px;
15+
overflow: hidden;
16+
`;
17+
18+
export const ArtifactIconContainer = styled.div`
19+
display: flex;
20+
color: ${({ theme }) => theme.colors.v3.icon.tertiary};
21+
`;
22+
23+
export const Link = styled(CommonLink)`
24+
font-size: 16px;
25+
line-height: 18px;
26+
text-decoration: underline;
27+
`;
28+
29+
export const ArtifactId = styled.span`
30+
font-size: 16px;
31+
line-height: 18px;
32+
color: ${({ theme }) => theme.colors.v3.text.tertiary};
33+
`;

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

Lines changed: 7 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,6 @@
1-
import {
2-
createColumnHelper,
3-
flexRender,
4-
getCoreRowModel,
5-
useReactTable
6-
} from "@tanstack/react-table";
1+
import { createColumnHelper } from "@tanstack/react-table";
72
import { useMemo } from "react";
8-
import { useAgenticSelector } from "../../../../../containers/Agentic/hooks";
3+
import { useParams } from "react-router";
94
import { useGetIncidentQuery } from "../../../../../redux/services/digma";
105
import type { GenericIncidentIssue } from "../../../../../redux/services/types";
116
import { getIdeLauncherLinkForSpan } from "../../../../../utils/getIdeLauncherLinkForSpan";
@@ -19,32 +14,10 @@ import {
1914
InsightIcon
2015
} from "../../../../Insights/InsightsCatalog/InsightsPage/InsightCardRenderer/insightCards/common/InsightCard/InsightHeader/InsightIcon";
2116
import { getValueLabel } from "../../../../Insights/InsightsCatalog/InsightsPage/InsightCardRenderer/insightCards/common/InsightCard/InsightHeader/InsightIcon/getValueLabel";
22-
import type { ColumnMeta } from "../types";
17+
import { Table } from "../Table";
2318
import * as s from "./styles";
2419
import { isErrorIncidentIssue, isInsightIncidentIssue } from "./typeGuards";
2520

26-
// const mockData: {
27-
// issues: IncidentIssue[];
28-
// } = {
29-
// issues: [
30-
// {
31-
// type: InsightType.EndpointBottleneck,
32-
// spanUid: "span-456",
33-
// criticality: 1
34-
// },
35-
// {
36-
// type: InsightType.SlowEndpoint,
37-
// spanUid: "span-012",
38-
// criticality: 0.2
39-
// },
40-
// {
41-
// type: InsightType.EndpointChattyApiV2,
42-
// spanUid: "span-678",
43-
// criticality: 0.3
44-
// }
45-
// ]
46-
// };
47-
4821
const getErrorTagLabel = (tagType: TagType): string => {
4922
switch (tagType) {
5023
case "lowSeverity":
@@ -63,7 +36,9 @@ const REFRESH_INTERVAL = 10 * 1000; // in milliseconds
6336
const columnHelper = createColumnHelper<GenericIncidentIssue>();
6437

6538
export const RelatedIssues = () => {
66-
const incidentId = useAgenticSelector((state) => state.incidents.incidentId);
39+
const params = useParams();
40+
const incidentId = params.id;
41+
6742
const { data } = useGetIncidentQuery(
6843
{
6944
id: incidentId ?? ""
@@ -166,63 +141,9 @@ export const RelatedIssues = () => {
166141
})
167142
];
168143

169-
const table = useReactTable({
170-
data: issues,
171-
columns,
172-
getCoreRowModel: getCoreRowModel()
173-
});
174-
175144
return (
176145
<s.Container>
177-
<s.Table>
178-
<s.TableHead>
179-
{table.getHeaderGroups().map((headerGroup) => (
180-
<s.TableHeadRow key={headerGroup.id}>
181-
{headerGroup.headers.map((header) => {
182-
const meta = header.column.columnDef.meta as ColumnMeta;
183-
184-
return (
185-
<s.TableHeaderCell
186-
key={header.id}
187-
style={{
188-
width: meta.width
189-
}}
190-
$align={meta.textAlign}
191-
>
192-
{header.isPlaceholder
193-
? null
194-
: flexRender(
195-
header.column.columnDef.header,
196-
header.getContext()
197-
)}
198-
</s.TableHeaderCell>
199-
);
200-
})}
201-
</s.TableHeadRow>
202-
))}
203-
</s.TableHead>
204-
<s.TableBody>
205-
{table.getRowModel().rows.map((row) => (
206-
<s.TableBodyRow key={row.id}>
207-
{row.getVisibleCells().map((cell) => {
208-
const meta = cell.column.columnDef.meta as ColumnMeta;
209-
210-
return (
211-
<s.TableBodyCell
212-
key={cell.id}
213-
$align={meta.textAlign}
214-
style={{
215-
width: meta.width
216-
}}
217-
>
218-
{flexRender(cell.column.columnDef.cell, cell.getContext())}
219-
</s.TableBodyCell>
220-
);
221-
})}
222-
</s.TableBodyRow>
223-
))}
224-
</s.TableBody>
225-
</s.Table>
146+
<Table data={issues} columns={columns} />
226147
</s.Container>
227148
);
228149
};

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

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import type { GenericIncidentIssue } from "../../../../../redux/services/types";
2+
import { InsightType } from "../../../../../types";
3+
4+
export const mockedIncidentIssues: GenericIncidentIssue[] = [
5+
{
6+
type: "issue",
7+
span_uid: "span-456",
8+
criticality: 1,
9+
issue_id: "issue-123",
10+
issue_type: InsightType.EndpointBottleneck
11+
},
12+
{
13+
type: "issue",
14+
span_uid: "span-012",
15+
criticality: 0.2,
16+
issue_id: "issue-124",
17+
issue_type: InsightType.SlowEndpoint
18+
},
19+
{
20+
type: "issue",
21+
span_uid: "span-678",
22+
criticality: 0.3,
23+
issue_id: "issue-125",
24+
issue_type: InsightType.EndpointChattyApiV2
25+
}
26+
];

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

Lines changed: 0 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import styled from "styled-components";
22
import { Link as CommonLink } from "../../../../common/v3/Link";
33
import { Tag } from "../../../../common/v3/Tag";
4-
import type { TableCellContentProps } from "./types";
54

65
export const Container = styled.div`
76
display: flex;
@@ -42,63 +41,3 @@ export const CriticalityLabel = styled.span`
4241
font-size: 16px;
4342
line-height: 18px;
4443
`;
45-
46-
export const Table = styled.div`
47-
width: 100%;
48-
display: flex;
49-
flex-direction: column;
50-
gap: 10px;
51-
`;
52-
53-
export const TableHead = styled.div`
54-
font-size: 16px;
55-
display: flex;
56-
color: ${({ theme }) => theme.colors.v3.text.tertiary};
57-
`;
58-
59-
export const TableHeadRow = styled.div`
60-
display: flex;
61-
gap: 12px;
62-
align-items: center;
63-
width: 100%;
64-
`;
65-
66-
export const TableHeaderCell = styled.div<TableCellContentProps>`
67-
box-sizing: border-box;
68-
text-align: ${({ $align }) => $align ?? "left"};
69-
overflow: hidden;
70-
text-overflow: ellipsis;
71-
white-space: nowrap;
72-
`;
73-
74-
export const TableBody = styled.div`
75-
display: flex;
76-
flex-direction: column;
77-
gap: 12px;
78-
`;
79-
80-
export const TableBodyRow = styled.div`
81-
display: flex;
82-
gap: 12px;
83-
height: 36px;
84-
align-items: center;
85-
`;
86-
87-
export const TableBodyCell = styled.div<TableCellContentProps>`
88-
display: flex;
89-
align-items: center;
90-
justify-content: ${({ $align }) => {
91-
switch ($align) {
92-
case "right":
93-
return "flex-end";
94-
case "center":
95-
return "center";
96-
case "left":
97-
default:
98-
return "flex-start";
99-
}
100-
}};
101-
overflow: hidden;
102-
text-overflow: ellipsis;
103-
white-space: nowrap;
104-
`;

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

Lines changed: 0 additions & 5 deletions
This file was deleted.

0 commit comments

Comments
 (0)