diff --git a/src/components/Explore/Explore.jsx b/src/components/Explore/Explore.jsx index 27d663a6..13c32e49 100644 --- a/src/components/Explore/Explore.jsx +++ b/src/components/Explore/Explore.jsx @@ -220,7 +220,6 @@ function Explore({ searchInputValue }) { version={item.latestVersion} description={item.description} downloads={item.downloads} - isSigned={item.isSigned} signatureInfo={item.signatureInfo} isBookmarked={item.isBookmarked} vendor={item.vendor} diff --git a/src/components/Home/Home.jsx b/src/components/Home/Home.jsx index 8da2eddc..ca9feb3c 100644 --- a/src/components/Home/Home.jsx +++ b/src/components/Home/Home.jsx @@ -214,7 +214,6 @@ function Home() { version={item.latestVersion} description={item.description} downloads={item.downloads} - isSigned={item.isSigned} signatureInfo={item.signatureInfo} isBookmarked={item.isBookmarked} vendor={item.vendor} diff --git a/src/components/Repo/RepoDetails.jsx b/src/components/Repo/RepoDetails.jsx index f6d50f8b..3529de42 100644 --- a/src/components/Repo/RepoDetails.jsx +++ b/src/components/Repo/RepoDetails.jsx @@ -243,6 +243,12 @@ function RepoDetails() { return lastDate; }; + const getSignatureChips = () => { + return repoDetailData.signatureInfo?.map((si, index) => ( + + )); + }; + return ( <> {isLoading ? ( @@ -271,19 +277,23 @@ function RepoDetails() { - + {getSignatureChips()} {isAuthenticated() && ( - - {repoDetailData?.isBookmarked ? ( - - ) : ( - - )} - + + + {repoDetailData?.isBookmarked ? ( + + ) : ( + + )} + + )} diff --git a/src/components/Shared/PreviewCard.jsx b/src/components/Shared/PreviewCard.jsx index 919d91c2..380f3081 100644 --- a/src/components/Shared/PreviewCard.jsx +++ b/src/components/Shared/PreviewCard.jsx @@ -10,7 +10,7 @@ import repocube3 from '../../assets/repocube-3.png'; import repocube4 from '../../assets/repocube-4.png'; import { isEmpty } from 'lodash'; -import { VulnerabilityIconCheck, SignatureIconCheck } from 'utilities/vulnerabilityAndSignatureCheck'; +import { VulnerabilityIconCheck } from 'utilities/vulnerabilityAndSignatureCheck'; // temporary utility to get image const randomIntFromInterval = (min, max) => { @@ -67,7 +67,7 @@ const useStyles = makeStyles(() => ({ function PreviewCard(props) { const classes = useStyles(); const navigate = useNavigate(); - const { name, isSigned, vulnerabilityData, logo } = props; + const { name, vulnerabilityData, logo } = props; const goToDetails = () => { navigate(`/image/${encodeURIComponent(name)}`); @@ -108,7 +108,6 @@ function PreviewCard(props) { - diff --git a/src/components/Shared/RepoCard.jsx b/src/components/Shared/RepoCard.jsx index f2003e48..cb1f9898 100644 --- a/src/components/Shared/RepoCard.jsx +++ b/src/components/Shared/RepoCard.jsx @@ -28,6 +28,9 @@ import { import makeStyles from '@mui/styles/makeStyles'; import BookmarkIcon from '@mui/icons-material/Bookmark'; import BookmarkBorderIcon from '@mui/icons-material/BookmarkBorder'; +import { VulnerabilityIconCheck, SignatureIconCheck } from 'utilities/vulnerabilityAndSignatureCheck'; +import { Markdown } from 'utilities/MarkdowntojsxWrapper'; +import filterConstants from 'utilities/filterConstants'; import { useTheme } from '@emotion/react'; // placeholder images @@ -36,9 +39,6 @@ import repocube2 from '../../assets/repocube-2.png'; import repocube3 from '../../assets/repocube-3.png'; import repocube4 from '../../assets/repocube-4.png'; -import { VulnerabilityIconCheck, SignatureIconCheck } from 'utilities/vulnerabilityAndSignatureCheck'; -import { Markdown } from 'utilities/MarkdowntojsxWrapper'; - // temporary utility to get image const randomIntFromInterval = (min, max) => { return Math.floor(Math.random() * (max - min + 1) + min); @@ -183,7 +183,6 @@ function RepoCard(props) { platforms, description, downloads, - isSigned, signatureInfo, lastUpdated, version, @@ -291,7 +290,22 @@ function RepoCard(props) {
- + {signatureInfo?.map((s) => s.tool).includes(filterConstants.signatureToolConstants.COSIGN) && ( + si.tool == filterConstants.signatureToolConstants.COSIGN + )} + /> + )} +
+
+ {signatureInfo?.map((s) => s.tool).includes(filterConstants.signatureToolConstants.NOTATION) && ( + si.tool == filterConstants.signatureToolConstants.NOTATION + )} + /> + )}
diff --git a/src/components/Shared/SignatureTooltip.jsx b/src/components/Shared/SignatureTooltip.jsx index c4433b48..7c985e4a 100644 --- a/src/components/Shared/SignatureTooltip.jsx +++ b/src/components/Shared/SignatureTooltip.jsx @@ -1,19 +1,15 @@ -import React from 'react'; +import React, { useMemo } from 'react'; import { Typography, Stack } from '@mui/material'; - import { isEmpty } from 'lodash'; +import { getStrongestSignature } from 'utilities/vulnerabilityAndSignatureCheck'; -function SignatureTooltip({ isSigned, signatureInfo }) { - const { tool, isTrusted, author } = !isEmpty(signatureInfo) - ? signatureInfo[0] - : { tool: 'Unknown', isTrusted: 'Unknown', author: 'Unknown' }; +function SignatureTooltip({ signatureInfo }) { + const strongestSignature = useMemo(() => getStrongestSignature(signatureInfo)); return ( - {isSigned ? 'Verified Signature' : 'Unverified Signature'} - Tool: {tool} - Trusted: {!isEmpty(isTrusted) ? isTrusted : 'Unknown'} - Author: {!isEmpty(author) ? author : 'Unknown'} + Tool: {!isEmpty(strongestSignature) ? strongestSignature.tool : 'Unknown'} + Author: {!isEmpty(strongestSignature) ? strongestSignature.author : 'Unknown'} ); } diff --git a/src/components/Tag/Tabs/DependsOn.jsx b/src/components/Tag/Tabs/DependsOn.jsx index 56b0ed51..1cfafb37 100644 --- a/src/components/Tag/Tabs/DependsOn.jsx +++ b/src/components/Tag/Tabs/DependsOn.jsx @@ -107,7 +107,7 @@ function DependsOn(props) { repoName={dependence.repoName} tag={dependence.tag} vendor={dependence.vendor} - isSigned={dependence.isSigned} + signatureInfo={dependence.signatureInfo} manifests={dependence.manifests} key={index} lastUpdated={dependence.lastUpdated} diff --git a/src/components/Tag/Tabs/IsDependentOn.jsx b/src/components/Tag/Tabs/IsDependentOn.jsx index 4afaf675..03ec2b3d 100644 --- a/src/components/Tag/Tabs/IsDependentOn.jsx +++ b/src/components/Tag/Tabs/IsDependentOn.jsx @@ -107,7 +107,7 @@ function IsDependentOn(props) { repoName={dependence.repoName} tag={dependence.tag} vendor={dependence.vendor} - isSigned={dependence.isSigned} + signatureInfo={dependence.signatureInfo} manifests={dependence.manifests} key={index} lastUpdated={dependence.lastUpdated} diff --git a/src/components/Tag/TagDetails.jsx b/src/components/Tag/TagDetails.jsx index a9579bd7..00886eef 100644 --- a/src/components/Tag/TagDetails.jsx +++ b/src/components/Tag/TagDetails.jsx @@ -260,10 +260,7 @@ function TagDetails() { vulnerabilitySeverity={imageDetailData.vulnerabiltySeverity} count={imageDetailData.vulnerabilityCount} /> - + diff --git a/src/utilities/filterConstants.js b/src/utilities/filterConstants.js index 5ae78784..3a5a3a71 100644 --- a/src/utilities/filterConstants.js +++ b/src/utilities/filterConstants.js @@ -60,6 +60,11 @@ const archFilters = [ } ]; -const filterConstants = { osFilters, imageFilters, archFilters }; +const signatureToolConstants = { + COSIGN: 'cosign', + NOTATION: 'notation' +}; + +const filterConstants = { osFilters, imageFilters, archFilters, signatureToolConstants }; export default filterConstants; diff --git a/src/utilities/vulnerabilityAndSignatureCheck.jsx b/src/utilities/vulnerabilityAndSignatureCheck.jsx index 5f679199..4d6d144f 100644 --- a/src/utilities/vulnerabilityAndSignatureCheck.jsx +++ b/src/utilities/vulnerabilityAndSignatureCheck.jsx @@ -1,3 +1,4 @@ +import { isEmpty } from 'lodash'; import React from 'react'; import { NoneVulnerabilityIcon, @@ -17,9 +18,18 @@ import { UnknownVulnerabilityIcon, UnknownVulnerabilityChip, FailedScanIcon, - FailedScanChip + FailedScanChip, + NotTrustedSignatureIcon, + NotTrustedSignatureChip } from './vulnerabilityAndSignatureComponents'; +const getStrongestSignature = (signatureInfo) => { + if (isEmpty(signatureInfo)) return null; + const trusted = signatureInfo.find((si) => si.isTrusted); + if (!isEmpty(trusted)) return trusted; + return signatureInfo[0]; +}; + const VulnerabilityIconCheck = ({ vulnerabilitySeverity }) => { let result; let vulnerabilityStringTitle = ''; @@ -84,20 +94,24 @@ const VulnerabilityChipCheck = ({ vulnerabilitySeverity }) => { return result; }; -const SignatureIconCheck = ({ isSigned, signatureInfo }) => { - if (isSigned) { - return ; - } else { - return ; - } +const SignatureIconCheck = ({ signatureInfo }) => { + const strongestSignature = getStrongestSignature(signatureInfo); + if (strongestSignature === null) return ; + if (strongestSignature.isTrusted) return ; + return ; }; -const SignatureChipCheck = ({ isSigned }) => { - if (isSigned) { - return ; - } else { - return ; - } +const SignatureChipCheck = ({ signatureInfo }) => { + const strongestSignature = getStrongestSignature(signatureInfo); + if (strongestSignature === null) return ; + if (strongestSignature.isTrusted) return ; + return ; }; -export { VulnerabilityIconCheck, VulnerabilityChipCheck, SignatureIconCheck, SignatureChipCheck }; +export { + VulnerabilityIconCheck, + VulnerabilityChipCheck, + SignatureIconCheck, + SignatureChipCheck, + getStrongestSignature +}; diff --git a/src/utilities/vulnerabilityAndSignatureComponents.jsx b/src/utilities/vulnerabilityAndSignatureComponents.jsx index 370d608f..8f2ad1f4 100644 --- a/src/utilities/vulnerabilityAndSignatureComponents.jsx +++ b/src/utilities/vulnerabilityAndSignatureComponents.jsx @@ -258,6 +258,28 @@ const UnverifiedSignatureIcon = ({ signatureInfo }) => { ); }; + +const NotTrustedSignatureIcon = ({ signatureInfo }) => { + return ( + } placement="top"> + + + ); +}; + const VerifiedSignatureIcon = ({ signatureInfo }) => { return ( } placement="top"> @@ -291,6 +313,21 @@ const UnverifiedSignatureChip = () => { /> ); }; + +const NotTrustedSignatureChip = () => { + return ( + { + return; + }} + deleteIcon={} + /> + ); +}; + const VerifiedSignatureChip = () => { return (