diff --git a/src/App.scss b/src/App.scss index 7009047dd..b93c12f55 100644 --- a/src/App.scss +++ b/src/App.scss @@ -154,3 +154,7 @@ margin-top: 0; } } + +.status-icon { + color: var(--pf-v5-global--icon--Color--light--dark); +} diff --git a/src/Components/PresentationalComponents/CveStatusWithPopover/CveStatusWithPopover.js b/src/Components/PresentationalComponents/CveStatusWithPopover/CveStatusWithPopover.js new file mode 100644 index 000000000..a14cdf363 --- /dev/null +++ b/src/Components/PresentationalComponents/CveStatusWithPopover/CveStatusWithPopover.js @@ -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 ? + ( + + + + + {icon} + {label} + + + + + + ) : ( + + {icon} + {label} + + ); +}; + +CveStatusWithPopover.propTypes = { + popoverText: PropTypes.string, + statusId: PropTypes.string +}; diff --git a/src/Components/PresentationalComponents/StatusColumn/StatusColumn.js b/src/Components/PresentationalComponents/StatusColumn/StatusColumn.js index 31f46b103..17a1259b7 100644 --- a/src/Components/PresentationalComponents/StatusColumn/StatusColumn.js +++ b/src/Components/PresentationalComponents/StatusColumn/StatusColumn.js @@ -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 ( - + {cveStatusId !== systemStatusId && }> - + } { - status && status.label + status && } ); @@ -28,7 +33,8 @@ StatusColumn.defautProps = { StatusColumn.propTypes = { cveStatusId: PropType.number, - systemStatusId: PropType.number + systemStatusId: PropType.number, + statusText: PropType.string }; export default StatusColumn; diff --git a/src/Components/SmartComponents/LandingPage/__snapshots__/LandingPage.test.js.snap b/src/Components/SmartComponents/LandingPage/__snapshots__/LandingPage.test.js.snap index a548a9908..67eb87c31 100644 --- a/src/Components/SmartComponents/LandingPage/__snapshots__/LandingPage.test.js.snap +++ b/src/Components/SmartComponents/LandingPage/__snapshots__/LandingPage.test.js.snap @@ -1142,8 +1142,55 @@ exports[`CVEs: Should match the snapshot 1`] = ` data-label="Status" tabindex="-1" > - - On-hold + +
+
+
+
+ + + + + + + On-hold + +
+
+
+
), status: ( - + {row.attributes.systems_status_divergent > 0 ? ( }> ) : ( '' - )}{' '} - {STATUS_OPTIONS.find(option => option.value === row.attributes.status_id.toString()).label} + )} + ), advisory_available: ( @@ -191,7 +195,10 @@ export function createCveListBySystem(systemId, cveList, columns, linkToCustomer ), status: ( - + ), remediation: ( diff --git a/src/Helpers/__snapshots__/VulnerabilityHelper.test.js.snap b/src/Helpers/__snapshots__/VulnerabilityHelper.test.js.snap index 9dffd5127..9115621a1 100644 --- a/src/Helpers/__snapshots__/VulnerabilityHelper.test.js.snap +++ b/src/Helpers/__snapshots__/VulnerabilityHelper.test.js.snap @@ -62,10 +62,18 @@ exports[`VulnerabilitiesHelper test function createCveListByAccount() with cveLi , }, { - "title": + "title": - - On-hold + , }, { @@ -153,10 +161,18 @@ exports[`VulnerabilitiesHelper test function createCveListByAccount() with cveLi , }, { - "title": + "title": - - In review + , }, { @@ -244,10 +260,18 @@ exports[`VulnerabilitiesHelper test function createCveListByAccount() with cveLi , }, { - "title": + "title": - - On-hold + , }, { @@ -357,33 +381,9 @@ exports[`VulnerabilitiesHelper test function createCveListBySystem() with cveLis }, { "title": - , }, diff --git a/src/Helpers/constants.js b/src/Helpers/constants.js index db49831bf..ea1ed6d66 100644 --- a/src/Helpers/constants.js +++ b/src/Helpers/constants.js @@ -15,7 +15,14 @@ import { Fragment } from 'react'; import TagFilter from '../Components/PresentationalComponents/Filters/CustomFilters/TagFilter'; import NotVulnerableLabel from '../Components/PresentationalComponents/Snippets/NotVulnerableLabel'; import { isEmpty } from 'lodash'; -import { OutlinedQuestionCircleIcon } from '@patternfly/react-icons'; +import { + CheckCircleIcon, + ClipboardCheckIcon, + InProgressIcon, + OutlinedCalendarAltIcon, + OutlinedQuestionCircleIcon, + PauseCircleIcon +} from '@patternfly/react-icons'; import { InsightsLink } from '@redhat-cloud-services/frontend-components/InsightsLink'; import { groupOrWorkspace } from './MiscHelper'; @@ -311,13 +318,54 @@ export const IMPACT_OPTIONS = [ ]; export const STATUS_OPTIONS = [ - { label: intl.formatMessage(messages.notReviewed), value: '0' }, - { label: intl.formatMessage(messages.inReview), value: '1' }, - { label: intl.formatMessage(messages.onHold), value: '2' }, - { label: intl.formatMessage(messages.scheduledPatch), value: '3' }, - { label: intl.formatMessage(messages.resolved), value: '4' }, - { label: intl.formatMessage(messages.noAction), value: '5' }, - { label: intl.formatMessage(messages.resolvedViaMitigation), value: '6' } + { + label: intl.formatMessage(messages.notReviewed), + value: '0' + }, + { + label: intl.formatMessage(messages.inReview), + value: '1', + icon: + + + }, + { + label: intl.formatMessage(messages.onHold), + value: '2', + icon: + + + }, + { + label: intl.formatMessage(messages.scheduledPatch), + value: '3', + icon: + + + }, + { + label: intl.formatMessage(messages.resolved), + value: '4', + icon: + + + }, + { + label: intl.formatMessage(messages.noAction), + value: '5', + icon: + + + }, + { + label: intl.formatMessage(messages.resolvedViaMitigation), + value: '6', + icon: + + + } ]; export const BUSINESS_RISK_OPTIONS = [ @@ -695,8 +743,12 @@ export const getSystemsExposedHeader = (isWorkspaceEnabled) => [ renderFunc: ( value, _id, - { cve_status_id: cveStatusId, status_id: systemStatusId } - ) => , + { cve_status_id: cveStatusId, status_id: systemsStatusId, status_text: statusText } + ) => , isShownByDefault: true }, {