import { isNull , isUndefined } from 'lodash' ; import { useEffect , useState } from 'react' ; import { useHistory } from 'react-router-dom' ; import { SecurityReportSummary , SeverityRating as SRating , VulnerabilitySeverity } from '../../types' ; import { SEVERITY_RATING } from '../../utils/data' ; import ElementWithTooltip from './ElementWithTooltip' ; import Label from './Label' ; import styles from './SecurityRating.module.css' ; interface Props { summary ? : SecurityReportSummary | null ; className ? : string ; tooltipClassName ? : string ; onlyBadge : boolean ; withLink ? : string ; withoutTooltip ? : boolean ; onlyIcon ? : boolean ; tooltipAligment ? : 'right' | 'left' ; } const SecurityRating = ( props ) => { const history = useHistory ( ) ; const [ severity , setSeverity ] = useState < SRating | undefined > ( ) ; useEffect ( ( ) => { if ( props . summary ) { let rating = SEVERITY_RATING . default ! ; for ( const key in VulnerabilitySeverity ) { const sev = key . toLowerCase ( ) ; if ( props . summary && props . summary . hasOwnProperty ( sev ) && ( props . summary as any ) [ sev ] > 0 ) { rating = SEVERITY_RATING [ sev as VulnerabilitySeverity ] ! ; break ; } } setSeverity ( rating ) ; } } , [ props . summary ] ) ; if ( isNull ( props . summary ) || isUndefined ( props . summary ) || isUndefined ( severity ) ) return null ; const badge = ( className ? ) => ( < ElementWithTooltip className = { className } element = { props . onlyBadge ? ( < small > < div className = { `badge rounded-pill text-light fw-bold ${ styles . badge } ${ className }` } style = { { backgroundColor : severity . color , } } > { severity . level } < /div> < /small>) : (<Label className={`fw-bold ${className}`} text="Images Security Rating" textForSmallDevices="Security Rating" bgLeftIcon={severity.color} labelStyle="custom" icon={<span className={`position-relative ${styles.ratingLetter}`}>{severity.level}</span > } onlyIcon = { props . onlyIcon } / > ) } tooltipWidth = { 285 } tooltipClassName = { `${ styles . tooltip } ${ props . tooltipClassName } ${ props . onlyBadge ? styles . onlyBadgeTooltip : '' }` } tooltipMessage = { < div className = "d-flex flex-column" > < div className = "d-flex flex-row align-items-center my-1" > < span className = { `badge rounded-pill text-light fw-bold me-2 ${ styles . badge }` } style = { { backgroundColor : SEVERITY_RATING . default ! . color , } } > { SEVERITY_RATING . default ! . level } < /span> < div > No vulnerabilities found < /div> < /div> < div className = "d-flex flex-row align-items-center my-1" > < span className = { `badge rounded-pill text-light fw-bold me-2 ${ styles . badge }` } style = { { backgroundColor : SEVERITY_RATING [ VulnerabilitySeverity . Low ] ! . color , } } > { SEVERITY_RATING [ VulnerabilitySeverity . Low ] ! . level } < /span> < div > Vulnerabilities of severity < span className = "fw-bold" > LOW < /span> found < /div> < /div> < div className = "d-flex flex-row align-items-center my-1" > < span className = { `badge rounded-pill text-light fw-bold me-2 ${ styles . badge }` } style = { { backgroundColor : SEVERITY_RATING [ VulnerabilitySeverity . Medium ] ! . color , } } > { SEVERITY_RATING [ VulnerabilitySeverity . Medium ] ! . level } < /span> < div > Vulnerabilities of severity < span className = "fw-bold" > MEDIUM < /span> found < /div> < /div> < div className = "d-flex flex-row align-items-center my-1" > < span className = { `badge rounded-pill text-light fw-bold me-2 ${ styles . badge }` } style = { { backgroundColor : SEVERITY_RATING [ VulnerabilitySeverity . High ] ! . color , } } > { SEVERITY_RATING [ VulnerabilitySeverity . High ] ! . level } < /span> < div > Vulnerabilities of severity < span className = "fw-bold" > HIGH < /span> found < /div> < /div> < div className = "d-flex flex-row align-items-center my-1" > < span className = { `badge rounded-pill text-light fw-bold me-2 ${ styles . badge }` } style = { { backgroundColor : SEVERITY_RATING [ VulnerabilitySeverity . Critical ] ! . color , } } > { SEVERITY_RATING [ VulnerabilitySeverity . Critical ] ! . level } < /span> < div > Vulnerabilities of severity < span className = "fw-bold" > CRITICAL < /span> found < /div> < /div> < div className = "d-flex flex-row align-items-center my-1" > < span className = { `badge rounded-pill text-light fw-bold me-2 ${ styles . badge }` } style = { { backgroundColor : SEVERITY_RATING [ VulnerabilitySeverity . UnKnown ] ! . color , } } > { SEVERITY_RATING [ VulnerabilitySeverity . UnKnown ] ! . level } < /span> < div > Vulnerabilities of severity < span className = "fw-bold" > UNKNOWN < /span> found < /div> < /div> < /div>} visibleTooltip={isUndefined(props.withoutTooltip) || !props.withoutTooltip} active/ > ) ; return ( < > { props . withLink ? ( < div className = { props . className } > < button className = { `btn btn-link text-reset p-0 position-relative ${ styles . link }` } onClick = { ( e ) => { e . preventDefault ( ) ; history . push ( { pathname : props . withLink , search : '?modal=security-report' , } ) ; } } aria - label = "Open security report" aria - hidden = "true" tabIndex = { - 1 } > { badge ( ) } < /button> < /div>) : (<>{badge(props.className)}</ > ) } < />); } ; export default SecurityRating ;