Skip to content

Commit

Permalink
feat: implement histogram type view for policy violation types on all…
Browse files Browse the repository at this point in the history 
… versions
  • Loading branch information
@maurycupitt
maurycupitt committed Jul 12, 2023
1 parent a289bef commit c528f17
Show file tree
Hide file tree
Showing 4 changed files with 111 additions and 51 deletions.
7 changes: 1 addition & 6 deletions src/components/Popup/IQServer/ComponentInfoPage/ComponentInfoPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -92,12 +92,7 @@ function GetPolicyViolationsIndicator({ policyData, policyType }) {
<section className='nx-card nx-card--equal' aria-label={policyTypeLabel}>
<div className='nx-card__content'>
<div className='nx-card__call-out'>
<NxPolicyViolationIndicator
style={{
width: '10px !important',
margin: 'none !important',
}}
policyThreatLevel={0}>
<NxPolicyViolationIndicator>
None
</NxPolicyViolationIndicator>
</div>
Expand Down
4 changes: 4 additions & 0 deletions .../Popup/IQServer/RemediationPage/AllVersionsPage/AllVersionsDetails/AllVersionsDetails.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,3 +33,7 @@
overscroll-behavior: contain;
overflow: auto;
}

.nx-threat-indicator--unspecified {
color: lightslategray !important;
}
143 changes: 99 additions & 44 deletions .../Popup/IQServer/RemediationPage/AllVersionsPage/AllVersionsDetails/AllVersionsDetails.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ import {
NxList,
NxLoadingSpinner,
NxMeter,
NxPolicyViolationIndicator,
NxThreatIndicator,
ThreatLevelNumber,
} from '@sonatype/react-shared-components'
import { PackageURL } from 'packageurl-js'
Expand All @@ -27,26 +27,27 @@ import { ExtensionPopupContext } from '../../../../../../context/ExtensionPopupC
import { ExtensionConfigurationContext } from '../../../../../../context/ExtensionConfigurationContext'
import './AllVersionsDetails.css'
import { DATA_SOURCE } from '../../../../../../utils/Constants'
import { ApiComponentPolicyViolationListDTOV2 } from '@sonatype/nexus-iq-api-client'
import { ApiPolicyViolationDTOV2 } from '@sonatype/nexus-iq-api-client'
import { getNewUrlandGo } from '../../../../../../utils/Helpers'
import { Tooltip, withStyles } from '@material-ui/core'
import { Tooltip } from '@material-ui/core'
import { getMaxThreatLevelForPolicyViolations } from '../../../../../../types/Component'

function IqAllVersionDetails() {
const popupContext = useContext(ExtensionPopupContext)
const allVersions = popupContext.iq?.allVersions
const currentPurl = popupContext.currentPurl
const currentVersionRef = useRef<HTMLElement>(null)

function getMaxViolation(policyData: ApiComponentPolicyViolationListDTOV2) {
if (policyData.policyViolations && policyData.policyViolations.length > 0) {
return Math.max(
...policyData.policyViolations.map((violation) =>
violation.threatLevel != undefined ? violation.threatLevel : 0
)
)
}
return 0
}
// function getMaxViolation(policyData: ApiComponentPolicyViolationListDTOV2) {
// if (policyData.policyViolations && policyData.policyViolations.length > 0) {
// return Math.max(
// ...policyData.policyViolations.map((violation) =>
// violation.threatLevel != undefined ? violation.threatLevel : 0
// )
// )
// }
// return 0
// }

useEffect(() => {
if (currentVersionRef.current) {
Expand All @@ -58,14 +59,23 @@ function IqAllVersionDetails() {
}
}, [allVersions])

const VersionTooltip = withStyles((theme) => ({
tooltip: {
backgroundColor: theme.palette.common.white,
color: 'black',
boxShadow: theme.shadows[1],
fontSize: 12,
},
}))(Tooltip)
const formatDate = (date: Date | undefined | null): string => {
if (date) {
const dateTime = new Date(date)
const noTime = dateTime.toUTCString().split(' ').slice(0, 4).join(' ')
return noTime
}
return 'N/A'
}

// const VersionTooltip = withStyles((theme) => ({
// tooltip: {
// backgroundColor: theme.palette.common.white,
// color: 'black',
// boxShadow: theme.shadows[1],
// fontSize: 12,
// },
// }))(Tooltip)

function calculateAge(catalogDate) {
// birthday is a date
Expand All @@ -74,6 +84,52 @@ function IqAllVersionDetails() {
return Math.abs(ageDate.getUTCFullYear() - 1970)
}

function GetPolicyViolationsIndicator({ policyData, policyType }) {
// const extConfigContext = useContext(ExtensionConfigurationContext)
let filteredPolicies: ApiPolicyViolationDTOV2[] | undefined = []
const policyTypes = ['Security', 'License', 'Architecture']

if (policyType === 'All Policies') {
filteredPolicies = policyData.policyViolations
} else if (policyType === 'Other') {
filteredPolicies = policyData.policyViolations?.filter(
(policy) => !policyTypes.some((excludeItem) => policy.policyName.includes(excludeItem))
)
} else {
filteredPolicies = policyData.policyViolations?.filter((policy) => policy.policyName?.includes(policyType))
}

const policyTypeLabel = policyType === 'Architecture' ? 'Quality' : policyType

if (filteredPolicies !== undefined && filteredPolicies.length > 0) {
const maxPolicyThreatLevel = Math.round(
getMaxThreatLevelForPolicyViolations(filteredPolicies)
) as ThreatLevelNumber
return (
<React.Fragment>
<Tooltip
arrow
title={`The highest ${policyTypeLabel} policy threat level: ${maxPolicyThreatLevel}`}>
<span>
<NxThreatIndicator policyThreatLevel={maxPolicyThreatLevel}/>
</span>
</Tooltip>

</React.Fragment>
)
}
return (
<React.Fragment>
<Tooltip
arrow
title={`No ${policyTypeLabel} policy violations`}>
<span>
<NxThreatIndicator />
</span></Tooltip>
</React.Fragment>
)
}

if (allVersions) {
// if (allVersions && currentPurl) {
return (
Expand Down Expand Up @@ -101,30 +157,29 @@ function IqAllVersionDetails() {
marginBottom: '0px',
}}>
<NxGrid.Column className='nx-grid-col-50'>
<NxGrid.Header><strong>{versionPurl.version}</strong>
<Tooltip
title={`Catalog Date: ${formatDate(version.catalogDate)}`}>
<span className='nx-pull-right'>{calculateAge(version.catalogDate)} Yrs</span></Tooltip></NxGrid.Header>
{version.policyData != undefined && (
<VersionTooltip
title={
<React.Fragment>
{/* <Typography color='inherit'>Tooltip with HTML</Typography> */}
{`Total Policy Violation Count: ${version.policyData.policyViolations?.length}`}
<br />
{`Security Vulnerabilities (CVE): ${version.securityData?.securityIssues?.length}`}
<br />
{`Age: ${calculateAge(version.catalogDate)} Year(s)`}
</React.Fragment>
}>
<div>
<NxPolicyViolationIndicator
style={{ marginBottom: '16px !important' }}
policyThreatLevel={
Math.round(
getMaxViolation(version.policyData)
) as ThreatLevelNumber
}>
{versionPurl.version}
</NxPolicyViolationIndicator>
</div>
</VersionTooltip>
<React.Fragment>
<GetPolicyViolationsIndicator
policyData={version.policyData}
policyType={'Security'}
/>
<GetPolicyViolationsIndicator
policyData={version.policyData}
policyType={'License'}
/>
<GetPolicyViolationsIndicator
policyData={version.policyData}
policyType={'Architecture'}
/>
<GetPolicyViolationsIndicator
policyData={version.policyData}
policyType={'Other'}
/>
</React.Fragment>
)}
</NxGrid.Column>
{version.relativePopularity !== undefined && (
Expand Down
8 changes: 7 additions & 1 deletion src/components/Popup/IQServer/RemediationPage/AllVersionsPage/AllVersionsPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,12 +13,14 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { NxH3 } from '@sonatype/react-shared-components'
import { NxFontAwesomeIcon, NxH3 } from '@sonatype/react-shared-components'
import React, { useContext } from 'react'
import { ExtensionPopupContext } from '../../../../../context/ExtensionPopupContext'
import { ExtensionConfigurationContext } from '../../../../../context/ExtensionConfigurationContext'
import AllVersionsDetails from './AllVersionsDetails/AllVersionsDetails'
import { DATA_SOURCE } from '../../../../../utils/Constants'
import { faAddressCard } from '@fortawesome/free-solid-svg-icons'
import { IconDefinition } from '@fortawesome/fontawesome-svg-core'

function IqRemediationPageAllVersion() {
const popupContext = useContext(ExtensionPopupContext)
Expand All @@ -29,6 +31,10 @@ function IqRemediationPageAllVersion() {
<NxH3>
All Versions <span className={'nx-counter'}>{popupContext?.iq?.allVersions.length}</span>
</NxH3>
<NxFontAwesomeIcon icon={faAddressCard as IconDefinition} title="Address Card" />
<NxFontAwesomeIcon icon={faAddressCard as IconDefinition} title="Address Card" />
<NxFontAwesomeIcon icon={faAddressCard as IconDefinition} title="Address Card" />
<NxFontAwesomeIcon icon={faAddressCard as IconDefinition} title="Address Card" />
<AllVersionsDetails />
</React.Fragment>
)
Expand Down

0 comments on commit c528f17

Please sign in to comment.