Skip to content

Commit

Permalink
feat(RHINENG-12933): change CVE status column style
Browse files Browse the repository at this point in the history
  • Loading branch information
@xmicha82
xmicha82 committed Jan 8, 2025
1 parent bb575d9 commit 01502d3
Show file tree
Hide file tree
Showing 7 changed files with 223 additions and 59 deletions.
4 changes: 4 additions & 0 deletions src/App.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -154,3 +154,7 @@
margin-top: 0;
}
}

.status-icon {
color: var(--pf-v5-global--icon--Color--light--dark);
}
48 changes: 48 additions & 0 deletions src/Components/PresentationalComponents/CveStatusWithPopover/CveStatusWithPopover.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
import React from 'react';
import PropTypes from 'prop-types';
import { STATUS_OPTIONS } from '../../../Helpers/constants';
import {
DescriptionList,
DescriptionListGroup,
DescriptionListTermHelpText,
DescriptionListTermHelpTextButton,
Popover
} from '@patternfly/react-core';

export const CveStatusWithPopover = ({ popoverText, statusId }) => {
const label = STATUS_OPTIONS
.find(option => option.value === statusId)
.label;

const icon = STATUS_OPTIONS
.find(option => option.value === statusId)
.icon;

return popoverText ?
(<DescriptionList>
<DescriptionListGroup>
<DescriptionListTermHelpText>
<Popover
headerContent="Justification"
bodyContent={popoverText}
>
<DescriptionListTermHelpTextButton style={{ fontWeight: 'normal' }}>
{icon}
{label}
</DescriptionListTermHelpTextButton>
</Popover>
</DescriptionListTermHelpText>
</DescriptionListGroup>
</DescriptionList>
) : (
<span>
{icon}
{label}
</span>
);
};

CveStatusWithPopover.propTypes = {
popoverText: PropTypes.string,
statusId: PropTypes.string
};
16 changes: 11 additions & 5 deletions src/Components/PresentationalComponents/StatusColumn/StatusColumn.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,18 +5,23 @@ import { ServerAltIcon } from '@patternfly/react-icons';
import { FormattedMessage } from 'react-intl';
import messages from '../../../Messages';
import { STATUS_OPTIONS } from '../../../Helpers/constants';
import { CveStatusWithPopover } from '../CveStatusWithPopover/CveStatusWithPopover';

const StatusColumn = ({ cveStatusId, systemStatusId }) => {
const StatusColumn = ({ cveStatusId, systemStatusId, statusText }) => {
const status = STATUS_OPTIONS.find(status => parseInt(status.value) === systemStatusId);

return (
<span>
<span style={{ display: 'flex', alignItems: 'baseline' }}>
{cveStatusId !== systemStatusId &&
<Tooltip content={<FormattedMessage {...messages.onlyThisSystemCvePair} />}>
<ServerAltIcon data-testid="status-column-server-icon" className="pf-v5-u-mr-xs"/>
<ServerAltIcon
data-testid="status-column-server-icon"
className="pf-v5-u-mr-sm"
/>
</Tooltip>
}
{
status && status.label
status && <CveStatusWithPopover popoverText={statusText} statusId={systemStatusId.toString()} />
}
</span>
);
Expand All @@ -28,7 +33,8 @@ StatusColumn.defautProps = {

StatusColumn.propTypes = {
cveStatusId: PropType.number,
systemStatusId: PropType.number
systemStatusId: PropType.number,
statusText: PropType.string
};

export default StatusColumn;
51 changes: 49 additions & 2 deletions src/Components/SmartComponents/LandingPage/__snapshots__/LandingPage.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1142,8 +1142,55 @@ exports[`CVEs: Should match the snapshot 1`] = `
data-label="Status"
tabindex="-1"
>
<span>
On-hold
<span
style="display: flex; align-items: baseline;"
>
<dl
class="pf-v5-c-description-list"
>
<div
class="pf-v5-c-description-list__group"
>
<dt
class="pf-v5-c-description-list__term"
>
<div
style="display: contents;"
>
<span
class="pf-v5-c-description-list__text pf-m-help-text"
role="button"
style="font-weight: normal;"
tabindex="0"
type="button"
>
<span
class="pf-v5-c-icon"
>
<span
class="pf-v5-c-icon__content"
>
<svg
aria-hidden="true"
class="pf-v5-svg status-icon pf-v5-u-mr-sm"
fill="currentColor"
height="1em"
role="img"
viewBox="0 0 512 512"
width="1em"
>
<path
d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm-16 328c0 8.8-7.2 16-16 16h-48c-8.8 0-16-7.2-16-16V176c0-8.8 7.2-16 16-16h48c8.8 0 16 7.2 16 16v160zm112 0c0 8.8-7.2 16-16 16h-48c-8.8 0-16-7.2-16-16V176c0-8.8 7.2-16 16-16h48c8.8 0 16 7.2 16 16v160z"
/>
</svg>
</span>
</span>
On-hold
</span>
</div>
</dt>
</div>
</dl>
</span>
</td>
<td
Expand Down
19 changes: 13 additions & 6 deletions src/Helpers/VulnerabilityHelper.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,8 @@ import parseCvssScore from '@redhat-cloud-services/frontend-components-utilities
import { processDate } from '@redhat-cloud-services/frontend-components-utilities/helpers';
import { flatMap } from 'lodash';
import React from 'react';
import { BUSINESS_RISK_OPTIONS, STATUS_OPTIONS, CVES_PATH, CUSTOMER_PORTAL_CVE_PATH, MANUAL_REMEDIATION } from './constants';
import { BUSINESS_RISK_OPTIONS, CVES_PATH, CUSTOMER_PORTAL_CVE_PATH, MANUAL_REMEDIATION } from './constants';
import { InsightsLink } from '@redhat-cloud-services/frontend-components/InsightsLink';
import SnippetWithPopover from '../Components/PresentationalComponents/Snippets/SnippetWithPopover';
import { FormattedMessage } from 'react-intl';
import messages from '../Messages';
import CVETableExpandedCell from '../Components/PresentationalComponents/CVETableExpandedCell/CVETableExpandedCell';
Expand All @@ -16,6 +15,7 @@ import GroupedCVELabels from '../Components/PresentationalComponents/Snippets/Gr
import RemediationColumn from '../Components/PresentationalComponents/TableColumns/RemediationColumn';
import { ExternalLinkAltIcon } from '@patternfly/react-icons';
import { intl } from '../Utilities/IntlProvider';
import { CveStatusWithPopover } from '../Components/PresentationalComponents/CveStatusWithPopover/CveStatusWithPopover';

export function createCveListByAccount(cveList, columns, currentFilters) {
let isLoading = cveList && cveList.isLoading;
Expand Down Expand Up @@ -72,19 +72,23 @@ export function createCveListByAccount(cveList, columns, currentFilters) {
</span>
),
status: (
<span key={row.id}>
<span key={row.id} style={{ display: 'flex', alignItems: 'baseline' }}>
{row.attributes.systems_status_divergent > 0 ? (
<Tooltip content={<FormattedMessage {...messages.createCveListByAccountTooltip} />}>
<Icon>
<ExclamationTriangleIcon
color="var(--pf-v5-global--warning-color--100)"
className="pf-v5-u-mr-md"
/>
</Icon>
</Tooltip>
) : (
''
)}{' '}
{STATUS_OPTIONS.find(option => option.value === row.attributes.status_id.toString()).label}
)}
<CveStatusWithPopover
popoverText={row.attributes.status_text}
statusId={row.attributes.status_id.toString()}
/>
</span>
),
advisory_available: (
Expand Down Expand Up @@ -191,7 +195,10 @@ export function createCveListBySystem(systemId, cveList, columns, linkToCustomer
),
status: (
<span key={row.id}>
<SnippetWithPopover row={row} type={1} />
<CveStatusWithPopover
popoverText={row.attributes.status_text}
statusId={row.attributes.status_id.toString()}
/>
</span>
),
remediation: (
Expand Down
72 changes: 36 additions & 36 deletions src/Helpers/__snapshots__/VulnerabilityHelper.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,10 +62,18 @@ exports[`VulnerabilitiesHelper test function createCveListByAccount() with cveLi
</span>,
},
{
"title": <span>
"title": <span
style={
{
"alignItems": "baseline",
"display": "flex",
}
}
>
On-hold
<CveStatusWithPopover
statusId="2"
/>
</span>,
},
{
Expand Down Expand Up @@ -153,10 +161,18 @@ exports[`VulnerabilitiesHelper test function createCveListByAccount() with cveLi
</span>,
},
{
"title": <span>
"title": <span
style={
{
"alignItems": "baseline",
"display": "flex",
}
}
>
In review
<CveStatusWithPopover
statusId="1"
/>
</span>,
},
{
Expand Down Expand Up @@ -244,10 +260,18 @@ exports[`VulnerabilitiesHelper test function createCveListByAccount() with cveLi
</span>,
},
{
"title": <span>
"title": <span
style={
{
"alignItems": "baseline",
"display": "flex",
}
}
>
On-hold
<CveStatusWithPopover
statusId="2"
/>
</span>,
},
{
Expand Down Expand Up @@ -357,33 +381,9 @@ exports[`VulnerabilitiesHelper test function createCveListBySystem() with cveLis
},
{
"title": <span>
<SnippetWithPopover
row={
{
"attributes": {
"business_risk": "Not Defined",
"business_risk_id": 0,
"business_risk_text": null,
"cve_status_id": 0,
"cve_status_text": null,
"cvss2_score": null,
"cvss3_score": "7.500",
"description": "A network amplification",
"impact": "Important",
"known_exploit": false,
"public_date": "2020-05-19T00:00:00+00:00",
"reporter": 1,
"rule": null,
"status": "Scheduled for Patch",
"status_id": 3,
"status_text": "pair status different",
"synopsis": "CVE-2020-12662",
},
"id": "CVE-2019-6116",
"type": "cve",
}
}
type={1}
<CveStatusWithPopover
popoverText="pair status different"
statusId="3"
/>
</span>,
},
Expand Down
Loading

0 comments on commit 01502d3

Please sign in to comment.