[Cloud Posture][VulnerabilityManagement] add vendor logos using EuiIcon with custom svgs (#157302)

## Summary

This PR add the logo for each for each CVSS 
- Add Red hat and nvd logos  using `EuiIcon` with custom svgs
- For GHSA vendor which stands for GitHub Security Advisories, we will
use one of the EUI third party logos for Github - `logoGithub`

For icon reference see, [click
here](https://eui.elastic.co/pr_3350/#/display/icons)

<img width="1720" alt="Screen Shot 2023-05-10 at 12 22 35 PM"
src="7b9c3c9c-89aa-4f6a-980d-00c2f88fc833">
This commit is contained in:
Lola 2023-05-12 22:08:56 -04:00 committed by GitHub
parent 473a803bb1
commit 493a8f4d46
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 47 additions and 3 deletions

View file

@ -0,0 +1,8 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="42" height="42" fill="none" viewBox="0 0 42 42">
<rect width="100%" height="100%" fill="black" />
<path fill="url(#nvd)" d="M3 16h36v11H3z"/>
<defs>
<pattern id="nvd" width="1" height="1" patternContentUnits="objectBoundingBox">
<use xlink:href="#b" transform="matrix(.00731 0 0 .02511 -.239 -.115)"/>
</pattern>
<image xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAAAxCAYAAACfxeZPAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAA5KSURBVHgB7Z0JXFTVHsfPnZ1Z2BEHSGFwgaQUSkMrDRURhTJ5ZWr59D19hqaAyqq5gZqKhWWm9UpDEt9TVkVITEnL3HF5CYqiIusowz7rnTvv3LbnK+fMALPcsfv9fPggn/kLw73nd87//P7/e8B0EEBDQ/NIGICGhkYvtEBoaBDQAqGhQUALhIYGAS0QGhoEtEBoaBCwAEWB7rOqqqq+ubT0Eqem5gEPx3Eei8VS+vl5NoWFBQo8PFz6AjNz8OAZ7bFjFUx9rz/3nKRrWKCE8enOo1xoluudbCSSPviiRZMseq21WkJz6lSlvKjook6lwh2BFWAwCNzNzV7h5+fFGD16CNvZWcQBNgblBELe2CNHyu8sWbKbX3m9wR0A7OH3KPz5Q4e//Moz1cmJUbzg4EEewEyUlf1Hl7G1RO/r8+ePVU+dOsqhpkaqzsk9x9P/nXTYyJEDHzz77EBXYAE0Gq0qZNzKhu+/u9EPWDdLIO+d6Od/6nRisUN7bMxkIjJyBM/f34sHbADKpVgpKVm3p0al96u83uj5O3E8BMYqLLgoCRm72hkO4pvAinA4LMayZa8w0VEYc9OmAg5B6AhgAeLi/lkLxeENKHV/Mayhod0+MSnbccRzyZy1a/e1KBRqLaA4lLmA5MqRlLLn1qbNBwcplTjXmP+jVGp4oRNSvT777IhVRRIcPJgdFva0HBWTl39OtGdPWQcwMydO/Ni8N/t7s6efvaGzU

After

Width:  |  Height:  |  Size: 1.3 KiB

View file

@ -0,0 +1,9 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="42" height="42" fill="none" viewBox="0 0 42 42">
<path fill="url(#redhat)" d="M38.714 8H3v26.19h35.714V8Z"/>
<defs>
<pattern id="redhat" width="1" height="1" patternContentUnits="objectBoundingBox">
<use xlink:href="#b" transform="scale(.0103 .01406)"/>
</pattern>
<image xlink:href="data:image/png;base64,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" id="b" width="97" height="71" data-name="redhat.png"/>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 4.7 KiB

View file

@ -5,7 +5,14 @@
* 2.0.
*/
import { EuiFlexGroup, EuiFlexItem, EuiHorizontalRule, EuiLink, EuiText } from '@elastic/eui';
import {
EuiFlexGroup,
EuiFlexItem,
EuiHorizontalRule,
EuiIcon,
EuiLink,
EuiText,
} from '@elastic/eui';
import { css } from '@emotion/react';
import { FormattedMessage } from '@kbn/i18n-react';
import moment from 'moment';
@ -16,6 +23,8 @@ import { CVSScoreBadge } from '../../../components/vulnerability_badges';
import { CVSScoreProps, VectorScoreBase, Vendor, Vulnerability } from '../types';
import { getVectorScoreList } from '../utils';
import { OVERVIEW_TAB_VULNERABILITY_FLYOUT } from '../test_subjects';
import nvdLogo from '../../../assets/icons/nvd_logo.svg';
import redhatLogo from '../../../assets/icons/redhat_logo.svg';
const cvssVendors: Record<string, Vendor> = {
nvd: 'NVD',
@ -23,6 +32,12 @@ const cvssVendors: Record<string, Vendor> = {
ghsa: 'GHSA',
};
const vendorIcons: Record<string, string> = {
nvd: nvdLogo,
redhat: redhatLogo,
ghsa: 'logoGithub',
};
interface VulnerabilityTabProps {
vulnerability: Vulnerability;
}
@ -51,12 +66,24 @@ const CVSScore = ({ vectorBaseScore, vendor }: CVSScoreProps) => {
<EuiFlexItem
grow={false}
css={css`
width: 94px;
width: 116px;
font-weight: 600;
display: flex;
flex-direction: row;
align-items: center;
`}
>
{vendorName}
<span
css={css`
margin-right: 30px;
`}
>
<EuiIcon type={vendorIcons[vendor]} size="xl" />
</span>
<span>{vendorName}</span>
</EuiFlexItem>
<EuiFlexGroup direction="column" gutterSize="s">
{vectorScores.length > 0 &&
vectorScores.map((vectorScore, i) => (