Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add cve summary in vulnerability tab #406

Closed
wants to merge 1 commit into from
Closed

feat: add cve summary in vulnerability tab #406

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/api.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,7 @@ const endpoints = {
if (!isEmpty(searchTerm)) {
query += `, searchedCVE: "${searchTerm}"`;
}
return `${query}){Tag Page {TotalCount ItemCount} CVEList {Id Title Description Severity PackageList {Name InstalledVersion FixedVersion}}}}`;
return `${query}){Tag Page {TotalCount ItemCount} CVEList {Id Title Description Severity PackageList {Name InstalledVersion FixedVersion}} Summary {Count UnknownCount LowCount MediumCount HighCount CriticalCount}}}`;
},
allVulnerabilitiesForRepo: (name) =>
`/v2/_zot/ext/search?query={CVEListForImage(image: "${name}"){Tag Page {TotalCount ItemCount} CVEList {Id Title Description Severity Reference PackageList {Name InstalledVersion FixedVersion}}}}`,
Expand Down
89 changes: 89 additions & 0 deletions src/components/Shared/VulnerabilityCountCard.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,89 @@
import React from 'react';

import makeStyles from '@mui/styles/makeStyles';
import { Stack, Tooltip } from '@mui/material';

const criticalColor = '#ff5c74';
const criticalBorderColor = '#f9546d';

const highColor = '#ff6840';
const highBorderColor = '#ee6b49';

const mediumColor = '#ffa052';
const mediumBorderColor = '#f19d5b';

const lowColor = '#f9f486';
const lowBorderColor = '#f0ed94';

const unknownColor = '#f2ffdd';
const unknownBorderColor = '#e9f4d7';

const useStyles = makeStyles((theme) => ({
cveCountCard: {
display: 'flex',
alignItems: 'center',
paddingLeft: '0.5rem',
paddingRight: '0.5rem',
color: theme.palette.primary.main,
fontSize: '1rem',
fontWeight: '600',
borderRadius: '3px',
marginBottom: '0'
},
criticalSeverity: {
backgroundColor: criticalColor,
border: '1px solid ' + criticalBorderColor
},
highSeverity: {
backgroundColor: highColor,
border: '1px solid ' + highBorderColor
},
mediumSeverity: {
backgroundColor: mediumColor,
border: '1px solid ' + mediumBorderColor
},
lowSeverity: {
backgroundColor: lowColor,
border: '1px solid ' + lowBorderColor
},
unknownSeverity: {
backgroundColor: unknownColor,
border: '1px solid ' + unknownBorderColor
},
severityList: {
display: 'flex',
flexWrap: 'wrap',
alignItems: 'center',
gap: '0.5em'
}
}));

function VulnerabilitiyCountCard(props) {
const classes = useStyles();
const { total, critical, high, medium, low, unknown } = props;

return (
<Stack direction="row" spacing="0.5em">
<div className={[classes.cveCountCard].join(' ')}>Total {total}</div>
<div className={classes.severityList}>
<Tooltip title="Critical">
<div className={[classes.cveCountCard, classes.criticalSeverity].join(' ')}>C {critical}</div>
</Tooltip>
<Tooltip title="High">
<div className={[classes.cveCountCard, classes.highSeverity].join(' ')}>H {high}</div>
</Tooltip>
<Tooltip title="Medium">
<div className={[classes.cveCountCard, classes.mediumSeverity].join(' ')}>M {medium}</div>
</Tooltip>
<Tooltip title="Low">
<div className={[classes.cveCountCard, classes.lowSeverity].join(' ')}>L {low}</div>
</Tooltip>
<Tooltip title="Unknown">
<div className={[classes.cveCountCard, classes.unknownSeverity].join(' ')}>U {unknown}</div>
</Tooltip>
</div>
</Stack>
);
}

export default VulnerabilitiyCountCard;
132 changes: 88 additions & 44 deletions src/components/Tag/Tabs/VulnerabilitiesDetails.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ import * as XLSX from 'xlsx';
import exportFromJSON from 'export-from-json';

import VulnerabilitiyCard from '../../Shared/VulnerabilityCard';
import VulnerabilityCountCard from '../../Shared/VulnerabilityCountCard';

const useStyles = makeStyles((theme) => ({
title: {
Expand All @@ -36,6 +37,12 @@ const useStyles = makeStyles((theme) => ({
fontWeight: '600',
marginBottom: '0'
},
cveCountSummary: {
color: theme.palette.primary.main,
fontSize: '1.5rem',
fontWeight: '600',
marginBottom: '0'
},
cveId: {
color: theme.palette.primary.main,
fontSize: '1rem',
Expand Down Expand Up @@ -103,6 +110,7 @@ function VulnerabilitiesDetails(props) {
const classes = useStyles();
const [cveData, setCveData] = useState([]);
const [allCveData, setAllCveData] = useState([]);
const [cveSummary, setCVESummary] = useState({});
const [isLoading, setIsLoading] = useState(true);
const [isLoadingAllCve, setIsLoadingAllCve] = useState(true);
const abortController = useMemo(() => new AbortController(), []);
Expand Down Expand Up @@ -134,9 +142,23 @@ function VulnerabilitiesDetails(props) {
.then((response) => {
if (response.data && response.data.data) {
let cveInfo = response.data.data.CVEListForImage?.CVEList;
let summary = response.data.data.CVEListForImage?.Summary;
let cveListData = mapCVEInfo(cveInfo);
setCveData((previousState) => (pageNumber === 1 ? cveListData : [...previousState, ...cveListData]));
setIsEndOfList(response.data.data.CVEListForImage.Page?.ItemCount < EXPLORE_PAGE_SIZE);
setCVESummary((previousState) => {
if (isEmpty(summary)) {
return previousState;
}
return {
Count: summary.Count,
UnknownCount: summary.UnknownCount,
LowCount: summary.LowCount,
MediumCount: summary.MediumCount,
HighCount: summary.HighCount,
CriticalCount: summary.CriticalCount
};
});
} else if (response.data.errors) {
setIsEndOfList(true);
}
Expand All @@ -146,6 +168,7 @@ function VulnerabilitiesDetails(props) {
console.error(e);
setIsLoading(false);
setCveData([]);
setCVESummary(() => {});
setIsEndOfList(true);
});
};
Expand Down Expand Up @@ -270,6 +293,24 @@ function VulnerabilitiesDetails(props) {
);
};

const renderCVESummary = () => {
if (cveSummary === undefined) {
return;
}
return !isEmpty(cveSummary) ? (
<VulnerabilityCountCard
total={cveSummary.Count}
critical={cveSummary.CriticalCount}
high={cveSummary.HighCount}
medium={cveSummary.MediumCount}
low={cveSummary.LowCount}
unknown={cveSummary.UnknownCount}
/>
) : (
<div>{!isLoading && <Typography className={classes.none}> No Vulnerabilities </Typography>}</div>
);
};

const renderListBottom = () => {
if (isLoading) {
return <Loading />;
Expand All @@ -283,51 +324,54 @@ function VulnerabilitiesDetails(props) {
return (
<Stack direction="column" spacing="1rem" data-testid="vulnerability-container">
<Stack className={classes.vulnerabilities}>
<Typography variant="h4" gutterBottom component="div" align="left" className={classes.title}>
Vulnerabilities
</Typography>
<IconButton disableRipple onClick={handleClickExport} className={classes.export}>
<DownloadIcon />
</IconButton>
<Snackbar
open={openExport && isLoadingAllCve}
message="Getting your data ready for export"
action={<CircularProgress size="2rem" sx={{ color: '#FFFFFF' }} />}
/>
<Menu
anchorEl={anchorExport}
open={openExport}
onClose={handleCloseExport}
data-testid="export-dropdown"
anchorOrigin={{
vertical: 'bottom',
horizontal: 'center'
}}
transformOrigin={{
vertical: 'top',
horizontal: 'center'
}}
>
<MenuItem
onClick={handleOnExportCSV}
disableRipple
disabled={isLoadingAllCve}
className={classes.popper}
data-testid="export-csv-menuItem"
>
csv
</MenuItem>
<Divider sx={{ my: 0.5 }} />
<MenuItem
onClick={handleOnExportExcel}
disableRipple
disabled={isLoadingAllCve}
className={classes.popper}
data-testid="export-excel-menuItem"
<Stack direction="row" justifyContent="space-between">
<Typography variant="h4" gutterBottom component="div" align="left" className={classes.title}>
Vulnerabilities
</Typography>
<IconButton disableRipple onClick={handleClickExport} className={classes.export}>
<DownloadIcon />
</IconButton>
<Snackbar
open={openExport && isLoadingAllCve}
message="Getting your data ready for export"
action={<CircularProgress size="2rem" sx={{ color: '#FFFFFF' }} />}
/>
<Menu
anchorEl={anchorExport}
open={openExport}
onClose={handleCloseExport}
data-testid="export-dropdown"
anchorOrigin={{
vertical: 'bottom',
horizontal: 'center'
}}
transformOrigin={{
vertical: 'top',
horizontal: 'center'
}}
>
MS Excel
</MenuItem>
</Menu>
<MenuItem
onClick={handleOnExportCSV}
disableRipple
disabled={isLoadingAllCve}
className={classes.popper}
data-testid="export-csv-menuItem"
>
csv
</MenuItem>
<Divider sx={{ my: 0.5 }} />
<MenuItem
onClick={handleOnExportExcel}
disableRipple
disabled={isLoadingAllCve}
className={classes.popper}
data-testid="export-excel-menuItem"
>
MS Excel
</MenuItem>
</Menu>
</Stack>
{renderCVESummary()}
</Stack>
<Stack className={classes.search}>
<InputBase
Expand Down
2 changes: 1 addition & 1 deletion src/host.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
const hostConfig = {
auto: true,
auto: false,
default: 'http://localhost:5000'
};

Expand Down
Loading