Skip to content

Commit a6f605b

Browse files
kahboomkahboom
authored
chore(cve): v1 parity detail enhancements (#211)
1 parent 8778426 commit a6f605b

File tree

5 files changed

+195
-259
lines changed

5 files changed

+195
-259
lines changed

‎client/src/app/pages/vulnerability-details/advisories-by-vulnerability.stories.tsx

+79
Original file line numberDiff line numberDiff line change
@@ -28,3 +28,82 @@ export const EmptyState: Story = {
2828
advisories: [],
2929
},
3030
};
31+
32+
export const PrimaryState: Story = {
33+
args: {
34+
variant: "compact",
35+
advisories: [
36+
{
37+
uuid: "urn:uuid:753e8448-2086-4908-a027-1f1a7b95fa6a",
38+
identifier: "CVE-2024-8391",
39+
issuer: {
40+
id: "9cf89bf3-ef8d-44ba-87a8-66a324795996",
41+
name: "eclipse",
42+
cpe_key: null,
43+
website: null,
44+
},
45+
published: "2024-09-04T15:27:58.478Z",
46+
modified: "2024-09-04T17:40:20.318Z",
47+
withdrawn: null,
48+
title:
49+
"Eclipse Vert.x gRPC server does not limit the maximum message size",
50+
labels: {
51+
type: "cve",
52+
file: "2024/8xxx/CVE-2024-8391.json",
53+
importer: "cve",
54+
source: "https://github.com/CVEProject/cvelistV5",
55+
},
56+
severity: null,
57+
score: null,
58+
cvss3_scores: [],
59+
purls: {
60+
affected: [
61+
{
62+
base_purl: {
63+
uuid: "af66fc9c-65d5-5b36-a169-7a417641fb69",
64+
purl: "pkg://maven/io.vertx/vertx-grpc-server",
65+
},
66+
version: "[4.3.0,4.5.10)",
67+
context: null,
68+
},
69+
],
70+
},
71+
number_of_vulnerabilities: 1,
72+
sboms: [
73+
{
74+
id: "urn:uuid:0193013f-1b8a-7152-8857-8b8f4238b8ba",
75+
document_id:
76+
"https://access.redhat.com/security/data/sbom/spdx/quarkus-bom-3.2.12.Final-redhat-00002",
77+
labels: {
78+
type: "spdx",
79+
},
80+
data_licenses: ["CC0-1.0"],
81+
published: "2024-07-05T09:40:48Z",
82+
authors: [
83+
"Organization: Red Hat Product Security ([email protected])",
84+
],
85+
name: "quarkus-bom",
86+
version: "3.2.12.Final-redhat-00002",
87+
status: ["affected"],
88+
},
89+
{
90+
id: "urn:uuid:0193013f-0f00-77e1-afe4-b7d7f8585b7a",
91+
document_id:
92+
"https://access.redhat.com/security/data/sbom/spdx/quarkus-bom-3.2.11.Final-redhat-00001",
93+
labels: {
94+
type: "spdx",
95+
},
96+
data_licenses: ["CC0-1.0"],
97+
published: "2024-05-28T09:26:01Z",
98+
authors: [
99+
"Organization: Red Hat Product Security ([email protected])",
100+
],
101+
name: "quarkus-bom",
102+
version: "3.2.11.Final-redhat-00001",
103+
status: ["affected"],
104+
},
105+
],
106+
},
107+
],
108+
},
109+
};

‎client/src/app/pages/vulnerability-details/advisories-by-vulnerability.tsx

+17-75
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,6 @@
11
import React from "react";
22

3-
import {
4-
Button,
5-
ButtonVariant,
6-
TextContent,
7-
Title,
8-
Toolbar,
9-
ToolbarContent,
10-
ToolbarItem,
11-
} from "@patternfly/react-core";
12-
import spacing from "@patternfly/react-styles/css/utilities/Spacing/spacing";
3+
import { Toolbar, ToolbarContent, ToolbarItem } from "@patternfly/react-core";
134
import {
145
Table,
156
TableProps,
@@ -19,10 +10,9 @@ import {
1910
Thead,
2011
Tr,
2112
} from "@patternfly/react-table";
13+
import { Link } from "react-router-dom";
2214

23-
import { AdvisoryInDrawerInfo } from "@app/components/AdvisoryInDrawerInfo";
2415
import { FilterToolbar } from "@app/components/FilterToolbar";
25-
import { PageDrawerContent } from "@app/components/PageDrawerContext";
2616
import { SeverityShieldAndText } from "@app/components/SeverityShieldAndText";
2717
import { SimplePagination } from "@app/components/SimplePagination";
2818
import {
@@ -31,40 +21,28 @@ import {
3121
} from "@app/components/TableControls";
3222
import { useLocalTableControls } from "@app/hooks/table-controls";
3323
import { formatDate } from "@app/utils/utils";
34-
import { VulnerabilityAdvisoryHead } from "@app/client";
24+
import { VulnerabilityAdvisorySummary } from "@app/client";
3525

3626
interface AdvisoriesByVulnerabilityProps {
3727
variant?: TableProps["variant"];
38-
advisories: VulnerabilityAdvisoryHead[];
28+
advisories: VulnerabilityAdvisorySummary[];
3929
}
4030

4131
export const AdvisoriesByVulnerability: React.FC<
4232
AdvisoriesByVulnerabilityProps
4333
> = ({ variant, advisories }) => {
44-
type RowAction = "showAdvisory";
45-
const [selectedRowAction, setSelectedRowAction] =
46-
React.useState<RowAction | null>(null);
47-
const [selectedRow, setSelectedRow] =
48-
React.useState<VulnerabilityAdvisoryHead | null>(null);
49-
50-
const showDrawer = (action: RowAction, row: VulnerabilityAdvisoryHead) => {
51-
setSelectedRowAction(action);
52-
setSelectedRow(row);
53-
};
54-
55-
//
5634
const tableControls = useLocalTableControls({
5735
variant: variant,
5836
tableName: "advisory-table",
5937
idProperty: "uuid",
6038
items: advisories,
6139
isLoading: false,
6240
columnNames: {
63-
identifier: "Name",
64-
title: "Description",
65-
severity: "CVSS",
66-
published: "Published",
67-
modified: "Modified",
41+
identifier: "ID",
42+
title: "Title",
43+
severity: "Aggregated Severity",
44+
revision: "Revision",
45+
vulnerabilities: "Vulnerabilities",
6846
},
6947
hasActionsColumn: false,
7048
isSortEnabled: false,
@@ -111,8 +89,8 @@ export const AdvisoriesByVulnerability: React.FC<
11189
<Th {...getThProps({ columnKey: "identifier" })} />
11290
<Th {...getThProps({ columnKey: "title" })} />
11391
<Th {...getThProps({ columnKey: "severity" })} />
114-
<Th {...getThProps({ columnKey: "published" })} />
115-
<Th {...getThProps({ columnKey: "modified" })} />
92+
<Th {...getThProps({ columnKey: "revision" })} />
93+
<Th {...getThProps({ columnKey: "vulnerabilities" })} />
11694
</TableHeaderContentWithControls>
11795
</Tr>
11896
</Thead>
@@ -127,13 +105,7 @@ export const AdvisoriesByVulnerability: React.FC<
127105
return (
128106
<Tr key={item.identifier} {...getTrProps({ item })}>
129107
<Td width={15} {...getTdProps({ columnKey: "identifier" })}>
130-
<Button
131-
size="sm"
132-
variant={ButtonVariant.secondary}
133-
onClick={() => showDrawer("showAdvisory", item)}
134-
>
135-
{item.identifier}
136-
</Button>
108+
<Link to={`/advisory/${item.uuid}`}>{item.identifier}</Link>
137109
</Td>
138110
<Td
139111
width={50}
@@ -142,28 +114,24 @@ export const AdvisoriesByVulnerability: React.FC<
142114
>
143115
{item.title}
144116
</Td>
145-
<Td
146-
width={10}
147-
modifier="truncate"
148-
{...getTdProps({ columnKey: "severity" })}
149-
>
117+
<Td width={10} {...getTdProps({ columnKey: "severity" })}>
150118
{item.severity && (
151119
<SeverityShieldAndText value={item.severity} />
152120
)}
153121
</Td>
154122
<Td
155123
width={10}
156124
modifier="truncate"
157-
{...getTdProps({ columnKey: "published" })}
125+
{...getTdProps({ columnKey: "revision" })}
158126
>
159-
{formatDate(item.published)}
127+
{formatDate(item.modified)}
160128
</Td>
161129
<Td
162130
width={10}
163131
modifier="truncate"
164-
{...getTdProps({ columnKey: "modified" })}
132+
{...getTdProps({ columnKey: "vulnerabilities" })}
165133
>
166-
{formatDate(item.modified)}
134+
{item.number_of_vulnerabilities}
167135
</Td>
168136
</Tr>
169137
);
@@ -177,32 +145,6 @@ export const AdvisoriesByVulnerability: React.FC<
177145
isCompact
178146
paginationProps={paginationProps}
179147
/>
180-
181-
<PageDrawerContent
182-
isExpanded={selectedRowAction !== null}
183-
onCloseClick={() => setSelectedRowAction(null)}
184-
pageKey="drawer"
185-
drawerPanelContentProps={{ defaultSize: "600px" }}
186-
header={
187-
<>
188-
{selectedRowAction === "showAdvisory" && (
189-
<TextContent>
190-
<Title headingLevel="h2" size="lg" className={spacing.mtXs}>
191-
Advisory
192-
</Title>
193-
</TextContent>
194-
)}
195-
</>
196-
}
197-
>
198-
{selectedRowAction === "showAdvisory" && (
199-
<>
200-
{selectedRow && (
201-
<AdvisoryInDrawerInfo advisoryId={selectedRow?.uuid} />
202-
)}
203-
</>
204-
)}
205-
</PageDrawerContent>
206148
</>
207149
);
208150
};

‎client/src/app/pages/vulnerability-details/overview.tsx

+47-48
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,10 @@ import {
55
DescriptionListDescription,
66
DescriptionListGroup,
77
DescriptionListTerm,
8-
Text,
9-
TextContent,
8+
Grid,
9+
GridItem,
10+
Stack,
11+
StackItem,
1012
} from "@patternfly/react-core";
1113

1214
import { formatDate } from "@app/utils/utils";
@@ -19,52 +21,49 @@ interface OverviewProps {
1921
export const Overview: React.FC<OverviewProps> = ({ vulnerability }) => {
2022
return (
2123
<>
22-
<TextContent>
23-
<Text>{vulnerability.title || vulnerability.description}</Text>
24-
</TextContent>
25-
<br />
26-
<DescriptionList
27-
columnModifier={{
28-
default: "2Col",
29-
}}
30-
>
31-
<DescriptionListGroup>
32-
<DescriptionListTerm>Published</DescriptionListTerm>
33-
<DescriptionListDescription>
34-
{formatDate(vulnerability.published)}
35-
</DescriptionListDescription>
36-
</DescriptionListGroup>
37-
<DescriptionListGroup>
38-
<DescriptionListTerm>Modified</DescriptionListTerm>
39-
<DescriptionListDescription>
40-
{formatDate(vulnerability.modified)}
41-
</DescriptionListDescription>
42-
</DescriptionListGroup>
43-
<DescriptionListGroup>
44-
<DescriptionListTerm>Released</DescriptionListTerm>
45-
<DescriptionListDescription>
46-
{formatDate(vulnerability.released)}
47-
</DescriptionListDescription>
48-
</DescriptionListGroup>
49-
<DescriptionListGroup>
50-
<DescriptionListTerm>Withdrawn</DescriptionListTerm>
51-
<DescriptionListDescription>
52-
{formatDate(vulnerability.withdrawn)}
53-
</DescriptionListDescription>
54-
</DescriptionListGroup>
55-
<DescriptionListGroup>
56-
<DescriptionListTerm>CWEs</DescriptionListTerm>
57-
<DescriptionListDescription>
58-
{"vulnerability.cwes"}
59-
</DescriptionListDescription>
60-
</DescriptionListGroup>
61-
<DescriptionListGroup>
62-
<DescriptionListTerm>Non normative</DescriptionListTerm>
63-
<DescriptionListDescription>
64-
{vulnerability.normative ? "Yes" : "No"}
65-
</DescriptionListDescription>
66-
</DescriptionListGroup>
67-
</DescriptionList>
24+
<Stack hasGutter>
25+
<StackItem>
26+
<Grid hasGutter>
27+
<GridItem md={10}>
28+
<Grid>
29+
<GridItem md={8}>
30+
<DescriptionListGroup>
31+
<DescriptionListDescription>
32+
{vulnerability.title || vulnerability.description || ""}
33+
</DescriptionListDescription>
34+
</DescriptionListGroup>
35+
</GridItem>
36+
</Grid>
37+
</GridItem>
38+
<GridItem md={10}>
39+
<DescriptionList
40+
columnModifier={{
41+
default: "3Col",
42+
}}
43+
>
44+
<DescriptionListGroup>
45+
<DescriptionListTerm>Reserved</DescriptionListTerm>
46+
<DescriptionListDescription>
47+
{formatDate(vulnerability.reserved)}
48+
</DescriptionListDescription>
49+
</DescriptionListGroup>
50+
<DescriptionListGroup>
51+
<DescriptionListTerm>Published date</DescriptionListTerm>
52+
<DescriptionListDescription>
53+
{formatDate(vulnerability.published)}
54+
</DescriptionListDescription>
55+
</DescriptionListGroup>
56+
<DescriptionListGroup>
57+
<DescriptionListTerm>Last modified</DescriptionListTerm>
58+
<DescriptionListDescription>
59+
{formatDate(vulnerability.modified)}
60+
</DescriptionListDescription>
61+
</DescriptionListGroup>
62+
</DescriptionList>
63+
</GridItem>
64+
</Grid>
65+
</StackItem>
66+
</Stack>
6867
</>
6968
);
7069
};

0 commit comments

Comments
 (0)