-
Notifications
You must be signed in to change notification settings - Fork 135
/
CvesByStatusSummaryCard.tsx
81 lines (75 loc) · 2.9 KB
/
CvesByStatusSummaryCard.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
import React from 'react';
import { Card, CardTitle, CardBody, Flex, Text, Grid, GridItem } from '@patternfly/react-core';
import { CheckCircleIcon, ExclamationCircleIcon } from '@patternfly/react-icons';
import { FixableStatus } from '../types';
import {
ImageVulnerabilityCounter,
imageVulnerabilityCounterKeys,
} from '../hooks/useImageVulnerabilities';
export type CvesByStatusSummaryCardProps = {
cveStatusCounts: ImageVulnerabilityCounter;
hiddenStatuses: Set<FixableStatus>;
};
const statusDisplays = [
{
status: 'Fixable',
Icon: CheckCircleIcon,
iconColor: 'var(--pf-global--success-color--100)',
text: (counts: ImageVulnerabilityCounter) => {
let count = 0;
imageVulnerabilityCounterKeys.forEach((key) => {
count += counts[key].fixable;
});
return `${count} vulnerabilities with available fixes`;
},
},
{
status: 'Not fixable',
Icon: ExclamationCircleIcon,
iconColor: 'var(--pf-global--danger-color--100)',
text: (counts: ImageVulnerabilityCounter) => {
let count = 0;
imageVulnerabilityCounterKeys.forEach((key) => {
count += counts[key].total - counts[key].fixable;
});
return `${count} vulnerabilities without fixes`;
},
},
] as const;
const disabledColor100 = 'var(--pf-global--disabled-color--100)';
function CvesByStatusSummaryCard({
cveStatusCounts,
hiddenStatuses,
}: CvesByStatusSummaryCardProps) {
return (
<Card isCompact>
<CardTitle>CVEs by status</CardTitle>
<CardBody>
<Grid className="pf-u-pl-sm">
{statusDisplays.map(({ status, Icon, iconColor, text }) => {
const isHidden = hiddenStatuses.has(status);
return (
<GridItem key={status} span={12}>
<Flex
className="pf-u-pt-sm"
spaceItems={{ default: 'spaceItemsSm' }}
alignItems={{ default: 'alignItemsCenter' }}
>
<Icon color={iconColor} />
<Text
style={{
color: isHidden ? disabledColor100 : 'inherit',
}}
>
{isHidden ? 'Results hidden' : text(cveStatusCounts)}
</Text>
</Flex>
</GridItem>
);
})}
</Grid>
</CardBody>
</Card>
);
}
export default CvesByStatusSummaryCard;