diff --git a/ui/apps/platform/cypress/helpers/nav.ts b/ui/apps/platform/cypress/helpers/nav.ts index ec2de561c7578..d1b8c07c3be82 100644 --- a/ui/apps/platform/cypress/helpers/nav.ts +++ b/ui/apps/platform/cypress/helpers/nav.ts @@ -77,8 +77,6 @@ export function visitFromHorizontalNav(linkTitle: string) { export function visitFromHorizontalNavExpandable(expandableItemTitle: string) { return (linkTitle: string) => { cy.get(`nav.pf-m-horizontal.pf-m-subnav button:contains("${expandableItemTitle}")`).click(); - cy.get( - `nav.pf-m-horizontal.pf-m-subnav .pf-v6-c-menu a[role="menuitem"]:contains("${linkTitle}")` - ).click(); + cy.get(`${pf6.dropdown} a[role="menuitem"]:contains("${linkTitle}")`).click(); }; } diff --git a/ui/apps/platform/cypress/helpers/tableHelpers.ts b/ui/apps/platform/cypress/helpers/tableHelpers.ts index c810a073eced4..c18b0e12bd5a2 100644 --- a/ui/apps/platform/cypress/helpers/tableHelpers.ts +++ b/ui/apps/platform/cypress/helpers/tableHelpers.ts @@ -1,3 +1,5 @@ +import pf6 from '../selectors/pf6'; + export function getTableRowLinkByName(name: string) { const exactName = new RegExp(`^${name}$`, 'g'); return cy @@ -96,9 +98,9 @@ function resetManagedColumns() { export function verifyColumnManagement({ tableSelector }: { tableSelector: string }) { resetManagedColumns(); - // Open the colum management modal and get the list of columns + // Open the column management modal and get the list of columns cy.get('button:contains("Columns")').click(); - cy.get('.pf-v6-c-modal-box label') + cy.get(pf6.columnManagementLabel) .then(($labels) => { cy.get('.pf-v6-c-modal-box button:contains("Cancel")').click(); const columns = $labels.map((_, el) => el.innerText).get(); diff --git a/ui/apps/platform/cypress/integration/vulnerabilities/workloadCves/WorkloadCves.helpers.js b/ui/apps/platform/cypress/integration/vulnerabilities/workloadCves/WorkloadCves.helpers.js index 36b492850a052..d34c7be0a120b 100644 --- a/ui/apps/platform/cypress/integration/vulnerabilities/workloadCves/WorkloadCves.helpers.js +++ b/ui/apps/platform/cypress/integration/vulnerabilities/workloadCves/WorkloadCves.helpers.js @@ -7,7 +7,11 @@ import { import { visit } from '../../../helpers/visit'; import { selectors } from './WorkloadCves.selectors'; import { selectors as vulnSelectors } from '../vulnerabilities.selectors'; -import { compoundFiltersSelectors } from '../../../helpers/compoundFilters'; +import { + compoundFiltersSelectors, + selectAttribute, + selectEntity, +} from '../../../helpers/compoundFilters'; export function getDateString(date) { return format(date, 'MMM DD, YYYY'); @@ -95,23 +99,6 @@ function selectSearchOption(searchOption) { cy.get(selectors.searchOptionsDropdown).click(); } -export function selectEntitySearchOption(entity) { - cy.get(selectors.searchEntityDropdown).click(); - cy.get(selectors.searchEntityMenuItem) - .contains(new RegExp(`^${entity}$`)) - .click(); - - cy.get(selectors.searchEntityDropdown).click(); -} - -export function selectAttributeSearchOption(searchAttribute) { - cy.get(selectors.searchAttributeDropdown).click(); - cy.get(selectors.searchAttributeMenuItem) - .contains(new RegExp(`^${searchAttribute}$`)) - .click(); - cy.get(selectors.searchAttributeDropdown).click(); -} - /** * Type a value into the search filter typeahead and select the first matching value. * @param {('CVE' | 'Image' | 'Deployment' | 'Cluster' | 'Namespace' | 'Requester' | 'Request name')} searchOption @@ -125,16 +112,6 @@ export function typeAndSelectCustomSearchFilterValue(searchOption, value) { cy.get(selectors.searchOptionsValueTypeahead(searchOption)).click(); } -export function typeAndEnterSearchFilterValue(entity, searchTerm, value) { - selectEntitySearchOption(entity); - selectAttributeSearchOption(searchTerm); - cy.get(selectors.searchValueTypeahead).click(); - cy.get(selectors.searchValueTypeahead).type(value); - cy.get(selectors.searchValueMenuItem) - .contains(new RegExp(`^${value}$`)) - .click(); -} - /** * Type and enter custom text into the search filter typeahead * @param {string} entity @@ -142,8 +119,8 @@ export function typeAndEnterSearchFilterValue(entity, searchTerm, value) { * @param {string} value */ export function typeAndEnterCustomSearchFilterValue(entity, searchTerm, value) { - selectEntitySearchOption(entity); - selectAttributeSearchOption(searchTerm); + selectEntity(entity); + selectAttribute(searchTerm); cy.get(selectors.searchValueTypeahead).click(); cy.get(selectors.searchValueTypeahead).type(value); cy.get(selectors.searchValueApplyButton).click(); diff --git a/ui/apps/platform/cypress/integration/vulnerabilities/workloadCves/WorkloadCves.selectors.ts b/ui/apps/platform/cypress/integration/vulnerabilities/workloadCves/WorkloadCves.selectors.ts index 05946b72bb746..b402f389d2a14 100644 --- a/ui/apps/platform/cypress/integration/vulnerabilities/workloadCves/WorkloadCves.selectors.ts +++ b/ui/apps/platform/cypress/integration/vulnerabilities/workloadCves/WorkloadCves.selectors.ts @@ -1,3 +1,5 @@ +import pf6 from '../../../selectors/pf6'; + const watchedImageLabelText = 'Watched image'; const filterChipSection = '.pf-v6-c-toolbar .pf-v6-c-toolbar__group[aria-label="applied search filters"]'; @@ -13,7 +15,7 @@ export const selectors = { searchOptionsValueMenuItem: (searchOption) => `.pf-v6-c-toolbar ul[aria-label="Filter by ${searchOption}"] button`, severityDropdown: '.pf-v6-c-toolbar button[aria-label="CVE severity"]', - severityMenuItems: '.pf-v6-c-toolbar [aria-label="CVE severity select menu"] ul', + severityMenuItems: `${pf6.select}[aria-label="CVE severity select menu"] ul`, severityMenuItem: (severity) => `${selectors.severityMenuItems} label:contains("${severity}")`, fixabilityDropdown: '.pf-v6-c-toolbar button[aria-label="CVE status"]', fixabilityMenuItems: '.pf-v6-c-toolbar [aria-label="CVE status select menu"] ul', @@ -29,7 +31,7 @@ export const selectors = { `${selectors.filterChipGroupForCategory(category)} + ul li:contains("${item}")`, filterChipGroupItemRemove: (category, item) => `${selectors.filterChipGroupItem(category, item)} button[aria-label="close"]`, - filterLabelGroup: `${filterChipSection} .pf-v5-c-label-group`, + filterLabelGroup: `${filterChipSection} .pf-v6-c-label-group`, filterLabelGroupForCategory: (category) => `${selectors.filterLabelGroup} *:contains("${category}")`, filterLabelGroupRemove: (category) => @@ -41,14 +43,6 @@ export const selectors = { filterLabelGroupItemRemove: (category, item) => `${selectors.filterLabelGroupItem(category, item)} button[aria-label="close"]`, - searchEntityDropdown: - '.pf-v6-c-toolbar button[aria-label="compound search filter entity selector toggle"]', - searchEntityMenuItem: - '.pf-v6-c-toolbar [aria-label="compound search filter entity selector menu"] button', - searchAttributeDropdown: - '.pf-v6-c-toolbar button[aria-label="compound search filter attribute selector toggle"]', - searchAttributeMenuItem: - '.pf-v6-c-toolbar [aria-label="compound search filter attribute selector menu"] button', searchValueTypeahead: '.pf-v6-c-toolbar input[aria-label^="Filter results by"]', searchValueMenuItem: '.pf-v6-c-toolbar [aria-label="Filter results select menu"] button', searchValueApplyButton: @@ -56,7 +50,6 @@ export const selectors = { // General selectors filteredViewLabel: '.pf-v6-c-label:contains("Filtered view")', - iconText: (textContent) => `svg ~ *:contains("${textContent}")`, bulkActionMenuToggle: 'button:contains("Bulk actions")', menuOption: (optionText) => `*[role="menu"] button:contains("${optionText}")`, severityIcon: (severity) => `span.pf-v6-c-icon:contains('${severity}')`, diff --git a/ui/apps/platform/cypress/integration/vulnerabilities/workloadCves/deploymentSingle.test.ts b/ui/apps/platform/cypress/integration/vulnerabilities/workloadCves/deploymentSingle.test.ts index d4b72cafd6a1d..ec8887073ff0d 100644 --- a/ui/apps/platform/cypress/integration/vulnerabilities/workloadCves/deploymentSingle.test.ts +++ b/ui/apps/platform/cypress/integration/vulnerabilities/workloadCves/deploymentSingle.test.ts @@ -8,6 +8,7 @@ import { } from './WorkloadCves.helpers'; import { selectors as vulnSelectors } from '../vulnerabilities.selectors'; import { selectors } from './WorkloadCves.selectors'; +import { compoundFiltersSelectors } from '../../../helpers/compoundFilters'; describe('Workload CVE Deployment Single page', () => { withAuth(); @@ -23,11 +24,11 @@ describe('Workload CVE Deployment Single page', () => { visitFirstDeployment(); // Check that only applicable resource menu items are present in the toolbar - cy.get(selectors.searchEntityDropdown).click(); - cy.get(selectors.searchEntityMenuItem).contains('Image'); - cy.get(selectors.searchEntityMenuItem).contains('CVE'); - cy.get(selectors.searchEntityMenuItem).contains('Image component'); - cy.get(selectors.searchEntityDropdown).click(); + cy.get(compoundFiltersSelectors.entityMenuToggle).click(); + cy.get(compoundFiltersSelectors.entityMenuItem).contains('Image'); + cy.get(compoundFiltersSelectors.entityMenuItem).contains('CVE'); + cy.get(compoundFiltersSelectors.entityMenuItem).contains('Image component'); + cy.get(compoundFiltersSelectors.entityMenuToggle).click(); }); it('should navigate between vulnerabilities and resources tabs', () => { diff --git a/ui/apps/platform/cypress/integration/vulnerabilities/workloadCves/imageCveSingle.test.js b/ui/apps/platform/cypress/integration/vulnerabilities/workloadCves/imageCveSingle.test.js index 5bdfafc23d606..753aff492275c 100644 --- a/ui/apps/platform/cypress/integration/vulnerabilities/workloadCves/imageCveSingle.test.js +++ b/ui/apps/platform/cypress/integration/vulnerabilities/workloadCves/imageCveSingle.test.js @@ -3,12 +3,11 @@ import { verifyColumnManagement } from '../../../helpers/tableHelpers'; import { applyLocalSeverityFilters, selectEntityTab, - typeAndEnterCustomSearchFilterValue, - typeAndEnterSearchFilterValue, visitWorkloadCveOverview, } from './WorkloadCves.helpers'; import { selectors } from './WorkloadCves.selectors'; import { selectors as vulnSelectors } from '../vulnerabilities.selectors'; +import { addAutocompleteFilter, compoundFiltersSelectors } from '../../../helpers/compoundFilters'; describe('Workload CVE Image CVE Single page', () => { withAuth(); @@ -23,14 +22,14 @@ describe('Workload CVE Image CVE Single page', () => { visitFirstCve(); // Check that only applicable resource menu items are present in the toolbar - cy.get(selectors.searchEntityDropdown).click(); - cy.get(selectors.searchEntityMenuItem).contains('CVE').should('not.exist'); - cy.get(selectors.searchEntityMenuItem).contains('Image'); - cy.get(selectors.searchEntityMenuItem).contains('Image component'); - cy.get(selectors.searchEntityMenuItem).contains('Deployment'); - cy.get(selectors.searchEntityMenuItem).contains('Cluster'); - cy.get(selectors.searchEntityMenuItem).contains('Namespace'); - cy.get(selectors.searchEntityDropdown).click(); + cy.get(compoundFiltersSelectors.entityMenuToggle).click(); + cy.get(compoundFiltersSelectors.entityMenuItem).contains('CVE').should('not.exist'); + cy.get(compoundFiltersSelectors.entityMenuItem).contains('Image'); + cy.get(compoundFiltersSelectors.entityMenuItem).contains('Image component'); + cy.get(compoundFiltersSelectors.entityMenuItem).contains('Deployment'); + cy.get(compoundFiltersSelectors.entityMenuItem).contains('Cluster'); + cy.get(compoundFiltersSelectors.entityMenuItem).contains('Namespace'); + cy.get(compoundFiltersSelectors.entityMenuToggle).click(); }); it('should correctly handle local filters on the images tab', () => { @@ -86,7 +85,7 @@ describe('Workload CVE Image CVE Single page', () => { cy.get(`${selectors.firstTableRow} td[data-label="Namespace"]`).then(([$namespace]) => { const namespace = $namespace.innerText; - typeAndEnterCustomSearchFilterValue('Namespace', 'Name', `bogus-${namespace}`); + addAutocompleteFilter('Namespace', 'Name', `bogus-${namespace}`); cy.get(`table tbody tr td[data-label="Namespace"]:contains("${namespace}")`).should( 'not.exist' @@ -94,7 +93,7 @@ describe('Workload CVE Image CVE Single page', () => { cy.get(vulnSelectors.clearFiltersButton).click(); - typeAndEnterSearchFilterValue('Namespace', 'Name', namespace); + addAutocompleteFilter('Namespace', 'Name', namespace); cy.get( `table tbody tr td[data-label="Namespace"]:not(:contains("${namespace}"))` diff --git a/ui/apps/platform/cypress/integration/vulnerabilities/workloadCves/imageSingle.test.ts b/ui/apps/platform/cypress/integration/vulnerabilities/workloadCves/imageSingle.test.ts index a8151339129e3..94b137fa51bfe 100644 --- a/ui/apps/platform/cypress/integration/vulnerabilities/workloadCves/imageSingle.test.ts +++ b/ui/apps/platform/cypress/integration/vulnerabilities/workloadCves/imageSingle.test.ts @@ -1,4 +1,5 @@ import withAuth from '../../../helpers/basicAuth'; +import { addAutocompleteFilter, compoundFiltersSelectors } from '../../../helpers/compoundFilters'; import { hasFeatureFlag } from '../../../helpers/features'; import { getRouteMatcherMapForGraphQL, @@ -17,7 +18,6 @@ import { selectors as vulnSelectors } from '../vulnerabilities.selectors'; import { applyLocalSeverityFilters, selectEntityTab, - typeAndEnterSearchFilterValue, visitWorkloadCveOverview, } from './WorkloadCves.helpers'; import { selectors } from './WorkloadCves.selectors'; @@ -45,10 +45,10 @@ describe('Workload CVE Image Single page', () => { visitFirstImage(); // Check that only applicable resource menu items are present in the toolbar - cy.get(selectors.searchEntityDropdown).click(); - cy.get(selectors.searchEntityMenuItem).contains('Image'); - cy.get(selectors.searchEntityMenuItem).contains('Image component'); - cy.get(selectors.searchEntityDropdown).click(); + cy.get(compoundFiltersSelectors.entityMenuToggle).click(); + cy.get(compoundFiltersSelectors.entityMenuItem).contains('Image'); + cy.get(compoundFiltersSelectors.entityMenuItem).contains('Image component'); + cy.get(compoundFiltersSelectors.entityMenuToggle).click(); }); it('should display consistent data between the cards and the table test', () => { @@ -138,7 +138,7 @@ describe('Workload CVE Image Single page', () => { .then(([$cveNameCell]) => { const cveName = $cveNameCell.innerText; // Enter the CVE name into the CVE filter - typeAndEnterSearchFilterValue('CVE', 'Name', cveName); + addAutocompleteFilter('CVE', 'Name', cveName); // Check that the header above the table shows only one result cy.get(`*:contains("1 result found")`); // Check that the only row in the table has the correct CVE name diff --git a/ui/apps/platform/cypress/selectors/pf6.ts b/ui/apps/platform/cypress/selectors/pf6.ts index b9f7721b08914..d54aacc4c0d41 100644 --- a/ui/apps/platform/cypress/selectors/pf6.ts +++ b/ui/apps/platform/cypress/selectors/pf6.ts @@ -3,6 +3,13 @@ const actionsColumnSelectors = { menuListButton: '.pf-v6-c-menu__list button', } as const; +const columnManagementSelectors = { + columnManagementLabel: + // data-ouia-component-id for these labels are in the format of "ColumnManagementModal-column--label" so + // we match the start and end of the data-ouia-component-id string + '[data-ouia-component-id^="ColumnManagementModal-column"][data-ouia-component-id$="label"] label', +} as const; + const dropdownSelectors = { dropdown: 'div[data-ouia-component-type="PF6/Dropdown"]', dropdownItem: '*[data-ouia-component-type="PF6/DropdownItem"]', @@ -20,11 +27,18 @@ const navSelectors = { navExpandable: `li[data-ouia-component-type="PF6/NavExpandable"]`, navItem: `li[data-ouia-component-type="PF6/NavItem"]`, } as const; + const pageHeaderSelectors = { pageHeaderTitle: '[data-ouia-component-id="PageHeader-title"]', pageHeaderSubtitle: '[data-ouia-component-id="PageHeader-subtitle"]', } as const; +const select = 'div[data-ouia-component-type="PF6/Select"]'; +const selectSelectors = { + select, + selectItem: `${select} *[role="listbox"] li`, +} as const; + const tabsSelectors = { tab: '[data-ouia-component-type="PF6/Tab"]', tabButton: '[data-ouia-component-type="PF6/TabButton"]', @@ -32,9 +46,11 @@ const tabsSelectors = { export default { ...actionsColumnSelectors, + ...columnManagementSelectors, ...dropdownSelectors, ...menuSelectors, ...navSelectors, ...pageHeaderSelectors, + ...selectSelectors, ...tabsSelectors, }; diff --git a/ui/apps/platform/src/Components/CompoundSearchFilter/components/SearchFilterConditionDate.tsx b/ui/apps/platform/src/Components/CompoundSearchFilter/components/SearchFilterConditionDate.tsx index 899f394708372..9f3726b935772 100644 --- a/ui/apps/platform/src/Components/CompoundSearchFilter/components/SearchFilterConditionDate.tsx +++ b/ui/apps/platform/src/Components/CompoundSearchFilter/components/SearchFilterConditionDate.tsx @@ -1,5 +1,5 @@ import { useState } from 'react'; -import { Button, DatePicker, Flex, SelectOption, ToolbarItem } from '@patternfly/react-core'; +import { Button, DatePicker, SelectOption, ToolbarItem } from '@patternfly/react-core'; import { ArrowRightIcon } from '@patternfly/react-icons'; import { format } from 'date-fns'; diff --git a/ui/apps/platform/src/Containers/Clusters/DiscoveredClusters/DiscoveredClustersToolbar.tsx b/ui/apps/platform/src/Containers/Clusters/DiscoveredClusters/DiscoveredClustersToolbar.tsx index 31d6c4179ccbe..cf26de91f10e1 100644 --- a/ui/apps/platform/src/Containers/Clusters/DiscoveredClusters/DiscoveredClustersToolbar.tsx +++ b/ui/apps/platform/src/Containers/Clusters/DiscoveredClusters/DiscoveredClustersToolbar.tsx @@ -47,7 +47,7 @@ function DiscoveredClustersToolbar({ setSearchFilter(updateSearchFilter(searchFilter, payload)) } /> - + setOpenDropdownKey(isOpen ? key : null) } @@ -291,7 +291,7 @@ function HorizontalSubnav({ return ( ); } diff --git a/ui/apps/platform/src/Containers/Policies/Table/PoliciesTable.tsx b/ui/apps/platform/src/Containers/Policies/Table/PoliciesTable.tsx index 3a90d67518e5a..0d86d082dfcff 100644 --- a/ui/apps/platform/src/Containers/Policies/Table/PoliciesTable.tsx +++ b/ui/apps/platform/src/Containers/Policies/Table/PoliciesTable.tsx @@ -209,9 +209,7 @@ function PoliciesTable({ config={searchFilterConfig} searchFilter={searchFilter} onSearch={(payload) => { - handleChangeSearchFilter( - updateSearchFilter(searchFilter, payload) - ); + handleChangeSearchFilter(updateSearchFilter(searchFilter, payload)); }} defaultEntity={'Policy'} /> diff --git a/ui/apps/platform/src/Containers/Violations/ViolationsTableSearchFilter.tsx b/ui/apps/platform/src/Containers/Violations/ViolationsTableSearchFilter.tsx index 2882e6cdbaf51..00d267a34324b 100644 --- a/ui/apps/platform/src/Containers/Violations/ViolationsTableSearchFilter.tsx +++ b/ui/apps/platform/src/Containers/Violations/ViolationsTableSearchFilter.tsx @@ -1,4 +1,4 @@ -import { Toolbar, ToolbarContent, ToolbarGroup, ToolbarItem } from '@patternfly/react-core'; +import { Toolbar, ToolbarContent, ToolbarGroup } from '@patternfly/react-core'; import type { SearchFilter } from 'types/search'; import useAnalytics from 'hooks/useAnalytics'; diff --git a/ui/apps/platform/src/Containers/Vulnerabilities/VirtualMachineCves/VirtualMachine/VirtualMachinePageComponents.tsx b/ui/apps/platform/src/Containers/Vulnerabilities/VirtualMachineCves/VirtualMachine/VirtualMachinePageComponents.tsx index cba1cf3e171e3..3392cecafd90b 100644 --- a/ui/apps/platform/src/Containers/Vulnerabilities/VirtualMachineCves/VirtualMachine/VirtualMachinePageComponents.tsx +++ b/ui/apps/platform/src/Containers/Vulnerabilities/VirtualMachineCves/VirtualMachine/VirtualMachinePageComponents.tsx @@ -5,7 +5,6 @@ import { Toolbar, ToolbarContent, ToolbarGroup, - ToolbarItem, } from '@patternfly/react-core'; import CompoundSearchFilter from 'Components/CompoundSearchFilter/components/CompoundSearchFilter'; @@ -122,7 +121,7 @@ function VirtualMachinePageComponents({ }; return ( - + - + - + Deployments @@ -118,7 +118,6 @@ function DeploymentPage({ showVulnerabilityStateTabs, vulnerabilityState }: Depl )} - {deploymentNotFound ? ( ) : ( <> - + {metadataRequest.error && ( - + { setActiveTabKey(key); pagination.setPage(1); }} - className="pf-v6-u-pl-md pf-v6-u-background-color-100" + usePageInsets mountOnEnter unmountOnExit > Vulnerabilities} > - + Review and triage vulnerability data scanned for images within this deployment @@ -180,15 +170,10 @@ function DeploymentPage({ showVulnerabilityStateTabs, vulnerabilityState }: Depl } /> - Details} - > + Details}> Resources} > diff --git a/ui/apps/platform/src/Containers/Vulnerabilities/WorkloadCves/Deployment/DeploymentPageDetails.tsx b/ui/apps/platform/src/Containers/Vulnerabilities/WorkloadCves/Deployment/DeploymentPageDetails.tsx index 20eca1b86666a..a68b803a080c6 100644 --- a/ui/apps/platform/src/Containers/Vulnerabilities/WorkloadCves/Deployment/DeploymentPageDetails.tsx +++ b/ui/apps/platform/src/Containers/Vulnerabilities/WorkloadCves/Deployment/DeploymentPageDetails.tsx @@ -1,6 +1,5 @@ import { Bullseye, - Card, Content, DescriptionList, DescriptionListDescription, @@ -87,19 +86,11 @@ function DeploymentPageDetails({ deploymentId }: DeploymentPageDetailsProps) { return ( <> - + View details about this deployment - + {error && ( )} {deploymentDetailsData && ( - - - - - - Name - - {deploymentDetailsData.name} - - - - Cluster - - {deploymentDetailsData.cluster?.name || '-'} - - - - Replicas - - {deploymentDetailsData.replicas} - - - - Created - - {deploymentDetailsData.created - ? getDateTime(deploymentDetailsData.created) - : '-'} - - - - Namespace - - {deploymentDetailsData.namespace} - - - - Service account - - {deploymentDetailsData.serviceAccount} - - - - Deployment type - - {deploymentDetailsData.type} - - - - Labels - - - - - - Annotations - - - - - - - - + + + + + Name + + {deploymentDetailsData.name} + + + + Cluster + + {deploymentDetailsData.cluster?.name || '-'} + + + + Replicas + + {deploymentDetailsData.replicas} + + + + Created + + {deploymentDetailsData.created + ? getDateTime(deploymentDetailsData.created) + : '-'} + + + + Namespace + + {deploymentDetailsData.namespace} + + + + Service account + + {deploymentDetailsData.serviceAccount} + + + + Deployment type + + {deploymentDetailsData.type} + + + + Labels + + + + + + Annotations + + + + + + + )} diff --git a/ui/apps/platform/src/Containers/Vulnerabilities/WorkloadCves/Deployment/DeploymentPageResources.tsx b/ui/apps/platform/src/Containers/Vulnerabilities/WorkloadCves/Deployment/DeploymentPageResources.tsx index e95681a20c4e6..87e8ec0c9049f 100644 --- a/ui/apps/platform/src/Containers/Vulnerabilities/WorkloadCves/Deployment/DeploymentPageResources.tsx +++ b/ui/apps/platform/src/Containers/Vulnerabilities/WorkloadCves/Deployment/DeploymentPageResources.tsx @@ -1,4 +1,3 @@ -import type { CSSProperties } from 'react'; import { Bullseye, Content, @@ -63,21 +62,13 @@ function DeploymentPageResources({ deploymentId, pagination }: DeploymentPageRes return ( <> - + Navigate to resources associated with this deployment - + {error && ( imageTableToggle.onToggle(!imageTableToggle.isOpen)} isExpanded={imageTableToggle.isOpen} - style={ - { - '--pf-v5-c-expandable-section__content--MarginTop': - 'var(--pf-t--global--spacer--xs)', - } as CSSProperties - } > -
- setPage(newPage)} - onPerPageSelect={(_, newPerPage) => { - setPerPage(newPerPage); - }} - /> - -
+ setPage(newPage)} + onPerPageSelect={(_, newPerPage) => { + setPerPage(newPerPage); + }} + /> + )} diff --git a/ui/apps/platform/src/Containers/Vulnerabilities/WorkloadCves/Deployment/DeploymentPageVulnerabilities.tsx b/ui/apps/platform/src/Containers/Vulnerabilities/WorkloadCves/Deployment/DeploymentPageVulnerabilities.tsx index 93a8c19321e40..d614fc6259805 100644 --- a/ui/apps/platform/src/Containers/Vulnerabilities/WorkloadCves/Deployment/DeploymentPageVulnerabilities.tsx +++ b/ui/apps/platform/src/Containers/Vulnerabilities/WorkloadCves/Deployment/DeploymentPageVulnerabilities.tsx @@ -234,12 +234,7 @@ function DeploymentPageVulnerabilities({ return ( <> - + {showVulnerabilityStateTabs && ( )} -
- { - setSearchFilter(newFilter); - setPage(1); - trackAppliedFilter(WORKLOAD_CVE_FILTER_APPLIED, searchPayload); - }} - additionalContextFilter={{ - 'Deployment ID': deploymentId, - ...baseSearchFilter, - }} - > - {additionalToolbarItems} - -
+ + + { + setSearchFilter(newFilter); + setPage(1); + trackAppliedFilter(WORKLOAD_CVE_FILTER_APPLIED, searchPayload); + }} + additionalContextFilter={{ + 'Deployment ID': deploymentId, + ...baseSearchFilter, + }} + > + {additionalToolbarItems} + -
-
- - - - - {pluralize(totalVulnerabilityCount, 'result', 'results')}{' '} - found - - {isFiltered && } - - - - - - - setPage(newPage)} - onPerPageSelect={(_, newPerPage) => { - setPerPage(newPerPage); - }} - /> - - -
- { - setSearchFilter({}); - setPage(1); - }} - tableConfig={columnConfig} - /> -
-
+ + + + + {pluralize(totalVulnerabilityCount, 'result', 'results')} found + + {isFiltered && } + + + + + + + setPage(newPage)} + onPerPageSelect={(_, newPerPage) => { + setPerPage(newPerPage); + }} + /> + + +
+ { + setSearchFilter({}); + setPage(1); + }} + tableConfig={columnConfig} + />
diff --git a/ui/apps/platform/src/Containers/Vulnerabilities/WorkloadCves/Deployment/ImageResourceTable.tsx b/ui/apps/platform/src/Containers/Vulnerabilities/WorkloadCves/Deployment/ImageResourceTable.tsx index 4e062011b5029..cb527b32f6f19 100644 --- a/ui/apps/platform/src/Containers/Vulnerabilities/WorkloadCves/Deployment/ImageResourceTable.tsx +++ b/ui/apps/platform/src/Containers/Vulnerabilities/WorkloadCves/Deployment/ImageResourceTable.tsx @@ -45,7 +45,7 @@ export type ImageResourceTableProps = { function ImageResourceTable({ data, getSortParams }: ImageResourceTableProps) { return ( - +
@@ -57,12 +57,7 @@ function ImageResourceTable({ data, getSortParams }: ImageResourceTableProps) { {data.images.length === 0 && } {data.images.map(({ id, name, deploymentCount, operatingSystem, scanTime }) => { return ( - +
Name
{name ? : 'NAME UNKNOWN'} diff --git a/ui/apps/platform/src/Containers/Vulnerabilities/WorkloadCves/Image/DeploymentResourceTable.tsx b/ui/apps/platform/src/Containers/Vulnerabilities/WorkloadCves/Image/DeploymentResourceTable.tsx index 366146ffe7a27..8bb79a9a546ed 100644 --- a/ui/apps/platform/src/Containers/Vulnerabilities/WorkloadCves/Image/DeploymentResourceTable.tsx +++ b/ui/apps/platform/src/Containers/Vulnerabilities/WorkloadCves/Image/DeploymentResourceTable.tsx @@ -73,7 +73,7 @@ function DeploymentResourceTable({ const vulnerabilityState = useVulnerabilityState(); const getVisibilityClass = generateVisibilityForColumns(columnVisibilityState); return ( - +
+ + + + + + + + ); + })} +
@@ -94,12 +94,7 @@ function DeploymentResourceTable({ {data.deployments.length === 0 && } {data.deployments.map(({ id, name, type, clusterName, namespace, created }) => { return ( -
+ - + {imageData ? ( )} - + { setActiveTabKey(key); pagination.setPage(1); }} - className="pf-v6-u-pl-md pf-v6-u-background-color-100" mountOnEnter unmountOnExit > Vulnerabilities} > @@ -337,11 +330,7 @@ function ImagePage({ } /> - Resources} - > + Resources}> Signature verification} > @@ -368,7 +356,7 @@ function ImagePage({ return ( <> - + Images @@ -384,7 +372,6 @@ function ImagePage({ )} - {mainContent} {isViewBasedReportsEnabled && isCreateViewBasedReportModalOpen && ( - + Navigate to resources associated with this image - + {error && ( -
- setPage(newPage)} - onPerPageSelect={(_, newPerPage) => { - setPerPage(newPerPage); - }} - /> - -
+ setPage(newPage)} + onPerPageSelect={(_, newPerPage) => { + setPerPage(newPerPage); + }} + /> + )} diff --git a/ui/apps/platform/src/Containers/Vulnerabilities/WorkloadCves/Image/ImagePageSignatureVerification.tsx b/ui/apps/platform/src/Containers/Vulnerabilities/WorkloadCves/Image/ImagePageSignatureVerification.tsx index 9d4d371e53206..49e01710bfd06 100644 --- a/ui/apps/platform/src/Containers/Vulnerabilities/WorkloadCves/Image/ImagePageSignatureVerification.tsx +++ b/ui/apps/platform/src/Containers/Vulnerabilities/WorkloadCves/Image/ImagePageSignatureVerification.tsx @@ -47,51 +47,36 @@ function getStatusMessage({ status, description }: SignatureVerificationResult) function ImagePageSignatureVerification({ results }: ImagePageSignatureVerificationProps) { return ( <> - + Review the signature verification results for this image - -
- - - - - - - - + +
IntegrationStatusVerification time
+ + + + + + + - {results?.map((result) => { - return ( - - - - - - - - ); - })} -
IntegrationStatusVerification time
{result.verifierId}{getStatusMessage(result)} - -
-
+ {results?.map((result) => { + return ( +
{result.verifierId}{getStatusMessage(result)} + +
); diff --git a/ui/apps/platform/src/Containers/Vulnerabilities/WorkloadCves/Image/ImagePageVulnerabilities.tsx b/ui/apps/platform/src/Containers/Vulnerabilities/WorkloadCves/Image/ImagePageVulnerabilities.tsx index 3b8d40f7c71ef..e46e17ceb1ae9 100644 --- a/ui/apps/platform/src/Containers/Vulnerabilities/WorkloadCves/Image/ImagePageVulnerabilities.tsx +++ b/ui/apps/platform/src/Containers/Vulnerabilities/WorkloadCves/Image/ImagePageVulnerabilities.tsx @@ -292,28 +292,19 @@ function ImagePageVulnerabilities({ onClose={closeModals} /> )} - + Review and triage vulnerability data scanned on this image {isBaseImageDetectionEnabled && baseImage && ( - + )} - - {showVulnerabilityStateTabs && ( + {showVulnerabilityStateTabs && ( + { @@ -321,138 +312,129 @@ function ImagePageVulnerabilities({ setPage(1); }} /> - )} -
- { - setSearchFilter(newFilter); - setPage(1); - trackAppliedFilter(WORKLOAD_CVE_FILTER_APPLIED, searchPayload); - }} - additionalContextFilter={{ - 'Image SHA': imageId, - ...baseSearchFilter, - }} - > - {additionalToolbarItems} - -
-
- - ( - - )} - /> - ( - - )} + + )} + + { + setSearchFilter(newFilter); + setPage(1); + trackAppliedFilter(WORKLOAD_CVE_FILTER_APPLIED, searchPayload); + }} + additionalContextFilter={{ + 'Image SHA': imageId, + ...baseSearchFilter, + }} + > + {additionalToolbarItems} + + + ( + + )} + /> + ( + + )} + /> + + + + + + + {pluralize(totalVulnerabilityCount, 'result', 'results')} found + + {isFiltered && } + + + + - - -
- - - - - {pluralize(totalVulnerabilityCount, 'result', 'results')}{' '} - found - - {isFiltered && } - - + + {canSelectRows && ( + <> - + + + showModal({ + type: 'DEFERRAL', + cves: Array.from(selectedCves.values()), + }) + } + > + Defer CVEs + + + showModal({ + type: 'FALSE_POSITIVE', + cves: Array.from(selectedCves.values()), + }) + } + > + Mark as false positives + + - {canSelectRows && ( - <> - - - - showModal({ - type: 'DEFERRAL', - cves: Array.from(selectedCves.values()), - }) - } - > - Defer CVEs - - - showModal({ - type: 'FALSE_POSITIVE', - cves: Array.from(selectedCves.values()), - }) - } - > - Mark as false positives - - - - - - )} - - setPage(newPage)} - onPerPageSelect={(_, newPerPage) => { - setPerPage(newPerPage); - }} - /> - - -
- { - setSearchFilter({}); - setPage(1); - }} - tableConfig={columnConfig} - /> -
-
+ + + )} + + setPage(newPage)} + onPerPageSelect={(_, newPerPage) => { + setPerPage(newPerPage); + }} + /> + + +
+ { + setSearchFilter({}); + setPage(1); + }} + tableConfig={columnConfig} + />
diff --git a/ui/apps/platform/src/Containers/Vulnerabilities/WorkloadCves/ImageCve/ImageCvePage.tsx b/ui/apps/platform/src/Containers/Vulnerabilities/WorkloadCves/ImageCve/ImageCvePage.tsx index cd42a54cb82e5..2c31cb7c56668 100644 --- a/ui/apps/platform/src/Containers/Vulnerabilities/WorkloadCves/ImageCve/ImageCvePage.tsx +++ b/ui/apps/platform/src/Containers/Vulnerabilities/WorkloadCves/ImageCve/ImageCvePage.tsx @@ -383,7 +383,7 @@ function ImageCvePage({ - + CVEs {!metadataRequest.error && ( @@ -395,8 +395,7 @@ function ImageCvePage({ )} - - + {metadataRequest.error ? ( - + {showVulnerabilityStateTabs && ( )} -
-
- { - setSearchFilter(newFilter); - setPage(1); - trackAppliedFilter(WORKLOAD_CVE_FILTER_APPLIED, searchPayload); - }} - additionalContextFilter={{ - // Only allow exact match for CVE ID using quotes, the autocomplete API does not - // support regex for exact matching - CVE: `"${cveId}"`, - ...baseSearchFilter, - }} - /> -
- - ( - - )} - /> - ( - - )} - /> - -
- -
- - - - - {isFiltered && } - - - - {entityTab === 'Image' && ( - - )} - {entityTab === 'Deployment' && ( - - )} - - - setPage(newPage)} - onPerPageSelect={(_, newPerPage) => { - setPerPage(newPerPage); + + + { + setSearchFilter(newFilter); + setPage(1); + trackAppliedFilter(WORKLOAD_CVE_FILTER_APPLIED, searchPayload); + }} + additionalContextFilter={{ + // Only allow exact match for CVE ID using quotes, the autocomplete API does not + // support regex for exact matching + CVE: `"${cveId}"`, + ...baseSearchFilter, + }} + /> + + ( + + )} + /> + ( + + )} + /> + + + + + + - - - -
+ {isFiltered && } + + + {entityTab === 'Image' && ( - )} {entityTab === 'Deployment' && ( - )} -
+ + + setPage(newPage)} + onPerPageSelect={(_, newPerPage) => { + setPerPage(newPerPage); + }} + /> + + +
+ {entityTab === 'Image' && ( + + )} + {entityTab === 'Deployment' && ( + + )}
diff --git a/ui/apps/platform/src/Containers/Vulnerabilities/WorkloadCves/NamespaceView/NamespaceViewPage.tsx b/ui/apps/platform/src/Containers/Vulnerabilities/WorkloadCves/NamespaceView/NamespaceViewPage.tsx index 5cd513b94bb51..f5a61b381ffc6 100644 --- a/ui/apps/platform/src/Containers/Vulnerabilities/WorkloadCves/NamespaceView/NamespaceViewPage.tsx +++ b/ui/apps/platform/src/Containers/Vulnerabilities/WorkloadCves/NamespaceView/NamespaceViewPage.tsx @@ -1,7 +1,6 @@ import { Breadcrumb, BreadcrumbItem, - Divider, Flex, FlexItem, PageSection, @@ -146,7 +145,7 @@ function NamespaceViewPage() { return ( <> - + {pageTitle} @@ -154,8 +153,7 @@ function NamespaceViewPage() { Namespace view - - + Discover and prioritize namespaces by risk priority - - + )} -
-
-
+ {additionalHeaderItems && ( {additionalHeaderItems} @@ -209,7 +207,7 @@ function VulnerabilitiesOverview({ deploymentTableColumnOverrides={deploymentTableColumnOverrides} /> )} - + ); } diff --git a/ui/apps/platform/src/Containers/Vulnerabilities/WorkloadCves/Overview/WorkloadCvesOverviewPage.tsx b/ui/apps/platform/src/Containers/Vulnerabilities/WorkloadCves/Overview/WorkloadCvesOverviewPage.tsx index 9fac9829bd4cf..6c0e9c842959d 100644 --- a/ui/apps/platform/src/Containers/Vulnerabilities/WorkloadCves/Overview/WorkloadCvesOverviewPage.tsx +++ b/ui/apps/platform/src/Containers/Vulnerabilities/WorkloadCves/Overview/WorkloadCvesOverviewPage.tsx @@ -2,8 +2,6 @@ import { useEffect, useState } from 'react'; import { Link } from 'react-router-dom-v5-compat'; import { Button, - Card, - CardBody, Content, Divider, Flex, @@ -359,129 +357,106 @@ function WorkloadCvesOverviewPage() { )} - - {isViewingWithCves ? ( - - - - ) : ( - - )} - - - {isViewingWithCves - ? descriptionForVulnerabilityStateMap[currentVulnerabilityState] - : 'View images and deployments that do not have detected vulnerabilities'} - + {isViewingWithCves && ( + + - - - - { - setDefaultWatchedImageName(imageName); - watchedImagesModalToggle.openSelect(); - analyticsTrack(WATCH_IMAGE_MODAL_OPENED); - }} - onUnwatchImage={(imageName) => { - setUnwatchImageName(imageName); - unwatchImageModalToggle.openSelect(); - }} - onEntityTabChange={onEntityTabChange} - activeEntityTabKey={activeEntityTabKey} - additionalToolbarItems={ - isViewBasedReportsEnabled && ( - { - setIsCreateViewBasedReportModalOpen(true); - }} - /> - ) - } - additionalHeaderItems={ - <> - - - {isViewingWithCves - ? 'Vulnerability findings' - : 'Workloads without detected vulnerabilities'} - - - {isViewingWithCves && - (currentVulnerabilityState === 'OBSERVED' || - currentVulnerabilityState === undefined) && ( - - - {hasReadAccessForNamespaces && ( - - Namespace view - - )} - - - - )} - - } - showDeferralUI={showDeferralUI} - cveTableColumnOverrides={{ - cveSelection: hideColumnIf(!showDeferralUI), - topNvdCvss: hideColumnIf( - !isFeatureFlagEnabled('ROX_SCANNER_V4') - ), - epssProbability: hideColumnIf( - !isFeatureFlagEnabled('ROX_SCANNER_V4') - ), - requestDetails: hideColumnIf( - currentVulnerabilityState === 'OBSERVED' - ), - rowActions: hideColumnIf(!showDeferralUI), - }} - imageTableColumnOverrides={{ - cvesBySeverity: hideColumnIf(!isViewingWithCves), - rowActions: hideColumnIf( - !hasWriteAccessForWatchedImage && !hasWriteAccessForImage - ), - }} - deploymentTableColumnOverrides={{ - cvesBySeverity: hideColumnIf(!isViewingWithCves), + )} + + + {isViewingWithCves + ? descriptionForVulnerabilityStateMap[currentVulnerabilityState] + : 'View images and deployments that do not have detected vulnerabilities'} + + + + + { + setDefaultWatchedImageName(imageName); + watchedImagesModalToggle.openSelect(); + analyticsTrack(WATCH_IMAGE_MODAL_OPENED); + }} + onUnwatchImage={(imageName) => { + setUnwatchImageName(imageName); + unwatchImageModalToggle.openSelect(); + }} + onEntityTabChange={onEntityTabChange} + activeEntityTabKey={activeEntityTabKey} + additionalToolbarItems={ + isViewBasedReportsEnabled && ( + { + setIsCreateViewBasedReportModalOpen(true); }} /> - - - + ) + } + additionalHeaderItems={ + <> + + + {isViewingWithCves + ? 'Vulnerability findings' + : 'Workloads without detected vulnerabilities'} + + + {isViewingWithCves && + (currentVulnerabilityState === 'OBSERVED' || + currentVulnerabilityState === undefined) && ( + + + {hasReadAccessForNamespaces && ( + + Namespace view + + )} + + + + )} + + } + showDeferralUI={showDeferralUI} + cveTableColumnOverrides={{ + cveSelection: hideColumnIf(!showDeferralUI), + topNvdCvss: hideColumnIf(!isFeatureFlagEnabled('ROX_SCANNER_V4')), + epssProbability: hideColumnIf(!isFeatureFlagEnabled('ROX_SCANNER_V4')), + requestDetails: hideColumnIf(currentVulnerabilityState === 'OBSERVED'), + rowActions: hideColumnIf(!showDeferralUI), + }} + imageTableColumnOverrides={{ + cvesBySeverity: hideColumnIf(!isViewingWithCves), + rowActions: hideColumnIf( + !hasWriteAccessForWatchedImage && !hasWriteAccessForImage + ), + }} + deploymentTableColumnOverrides={{ + cvesBySeverity: hideColumnIf(!isViewingWithCves), + }} + /> + @@ -220,20 +220,13 @@ function AffectedImagesTable({ const isExpanded = expandedRowSet.has(id); - // Table borders={false} prop above and Tbody style prop below - // to prevent unwanted border between main row and conditional labels row. - // - // Td style={{ paddingTop: 0 }} prop emulates vertical space when label was in cell instead of row - // and assumes adjacent empty cell has no paddingTop. return ( - - + + {labels.length !== 0 && ( - +
+ @@ -114,7 +109,10 @@ function DeploymentComponentVulnerabilitiesTable({ // No border on the last row const style = index !== componentVulns.length - 1 - ? { borderBottom: '1px solid var(--pf-v5-c-table--BorderColor)' } + ? { + borderBlockEnd: + '1px solid var(--pf-v6-c-table__tr--BorderBlockEndColor)', + } : {}; const hasPendingException = componentVulns.some( (vuln) => vuln.pendingExceptionCount > 0 @@ -133,7 +131,7 @@ function DeploymentComponentVulnerabilitiesTable({ // Td style={{ paddingTop: 0 }} prop emulates vertical space when label was in cell instead of row // and assumes adjacent empty cell has no paddingTop. return ( - + )} - + diff --git a/ui/apps/platform/src/Containers/Vulnerabilities/WorkloadCves/Tables/DeploymentOverviewTable.tsx b/ui/apps/platform/src/Containers/Vulnerabilities/WorkloadCves/Tables/DeploymentOverviewTable.tsx index 33d962bd304cb..d2aa001951ad9 100644 --- a/ui/apps/platform/src/Containers/Vulnerabilities/WorkloadCves/Tables/DeploymentOverviewTable.tsx +++ b/ui/apps/platform/src/Containers/Vulnerabilities/WorkloadCves/Tables/DeploymentOverviewTable.tsx @@ -120,7 +120,7 @@ function DeploymentOverviewTable({ const colSpan = Object.values(defaultColumns).length - hiddenColumnCount; return ( -
Image
{image.name ? ( @@ -174,7 +172,7 @@ function DeploymentComponentVulnerabilitiesTable({
+
- diff --git a/ui/apps/platform/src/Containers/Vulnerabilities/WorkloadCves/Tables/DeploymentVulnerabilitiesTable.tsx b/ui/apps/platform/src/Containers/Vulnerabilities/WorkloadCves/Tables/DeploymentVulnerabilitiesTable.tsx index e4d8223ce82f0..dd3910522cb85 100644 --- a/ui/apps/platform/src/Containers/Vulnerabilities/WorkloadCves/Tables/DeploymentVulnerabilitiesTable.tsx +++ b/ui/apps/platform/src/Containers/Vulnerabilities/WorkloadCves/Tables/DeploymentVulnerabilitiesTable.tsx @@ -127,7 +127,7 @@ function DeploymentVulnerabilitiesTable({ const colSpan = Object.values(defaultColumns).length - hiddenColumnCount; return ( -
+
{namespace} + <> {imageCount} {pluralize('image', imageCount)} @@ -238,6 +237,7 @@ function DeploymentOverviewTable({
+
@@ -216,20 +216,13 @@ function DeploymentVulnerabilitiesTable({ const isExpanded = expandedRowSet.has(vulnerabilityId); - // Table borders={false} prop above and Tbody style prop below - // to prevent unwanted border between main row and conditional labels row. - // - // Td style={{ paddingTop: 0 }} prop emulates vertical space when label was in cell instead of row - // and assumes adjacent empty cell has no paddingTop. return ( - - + + {labels.length !== 0 && ( - +
diff --git a/ui/apps/platform/src/Containers/Vulnerabilities/WorkloadCves/Tables/ImageComponentVulnerabilitiesTable.tsx b/ui/apps/platform/src/Containers/Vulnerabilities/WorkloadCves/Tables/ImageComponentVulnerabilitiesTable.tsx index a04b237f05b16..76354933f5cd5 100644 --- a/ui/apps/platform/src/Containers/Vulnerabilities/WorkloadCves/Tables/ImageComponentVulnerabilitiesTable.tsx +++ b/ui/apps/platform/src/Containers/Vulnerabilities/WorkloadCves/Tables/ImageComponentVulnerabilitiesTable.tsx @@ -67,12 +67,7 @@ function ImageComponentVulnerabilitiesTable({ const sortedComponentVulns = sortTableData(componentVulns, sortOption); return ( - +
@@ -99,11 +94,14 @@ function ImageComponentVulnerabilitiesTable({ // No border on the last row const style = index !== componentVulns.length - 1 - ? { borderBottom: '1px solid var(--pf-v5-c-table--BorderColor)' } + ? { + borderBlockEnd: + '1px solid var(--pf-v6-c-table__tr--BorderBlockEndColor)', + } : {}; return ( - + @@ -127,7 +125,7 @@ function ImageComponentVulnerabilitiesTable({ - + diff --git a/ui/apps/platform/src/Containers/Vulnerabilities/WorkloadCves/Tables/ImageOverviewTable.tsx b/ui/apps/platform/src/Containers/Vulnerabilities/WorkloadCves/Tables/ImageOverviewTable.tsx index c4d7090f580a2..f66542d5d91f7 100644 --- a/ui/apps/platform/src/Containers/Vulnerabilities/WorkloadCves/Tables/ImageOverviewTable.tsx +++ b/ui/apps/platform/src/Containers/Vulnerabilities/WorkloadCves/Tables/ImageOverviewTable.tsx @@ -237,7 +237,7 @@ function ImageOverviewTable({ const [sbomTargetImage, setSbomTargetImage] = useState(); return ( -
Component
{name} {version}
+
- + +
@@ -387,13 +387,12 @@ function ImageOverviewTable({ // Td style={{ paddingTop: 0 }} prop emulates vertical space when label was in cell instead of row // and assumes adjacent empty cell has no paddingTop. return ( -
{name ? ( + @@ -312,14 +312,12 @@ function ImageVulnerabilitiesTable({ // Td style={{ paddingTop: 0 }} prop emulates vertical space when label was in cell instead of row // and assumes adjacent empty cell has no paddingTop. return ( - - + + {labels.length !== 0 && ( - +
diff --git a/ui/apps/platform/src/Containers/Vulnerabilities/WorkloadCves/Tables/WorkloadCVEOverviewTable.tsx b/ui/apps/platform/src/Containers/Vulnerabilities/WorkloadCves/Tables/WorkloadCVEOverviewTable.tsx index 35f1ec23fa463..2d12b8f98d4f8 100644 --- a/ui/apps/platform/src/Containers/Vulnerabilities/WorkloadCves/Tables/WorkloadCVEOverviewTable.tsx +++ b/ui/apps/platform/src/Containers/Vulnerabilities/WorkloadCves/Tables/WorkloadCVEOverviewTable.tsx @@ -232,7 +232,7 @@ function WorkloadCVEOverviewTable({ const colSpan = Object.values(defaultColumns).length - hiddenColumnCount; return ( - +
@@ -379,14 +379,14 @@ function WorkloadCVEOverviewTable({ // Td style={{ paddingTop: 0 }} prop emulates vertical space when label was in cell instead of row // and assumes adjacent empty cell has no paddingTop. return ( - - + + {labels.length !== 0 && ( - +
{affectedImageCount}/{unfilteredImageCount} affected images @@ -503,7 +504,11 @@ function WorkloadCVEOverviewTable({
diff --git a/ui/apps/platform/src/Containers/Vulnerabilities/WorkloadCves/WatchedImages/WatchedImagesModal.tsx b/ui/apps/platform/src/Containers/Vulnerabilities/WorkloadCves/WatchedImages/WatchedImagesModal.tsx index 19bec3d7385ea..2a8ccfc98136c 100644 --- a/ui/apps/platform/src/Containers/Vulnerabilities/WorkloadCves/WatchedImages/WatchedImagesModal.tsx +++ b/ui/apps/platform/src/Containers/Vulnerabilities/WorkloadCves/WatchedImages/WatchedImagesModal.tsx @@ -86,7 +86,7 @@ function WatchedImagesModal({ , ]} > - + {watchImageMutation.isSuccess && ( )} {watchedImages.length > 0 && ( - +
@@ -57,7 +49,6 @@ function WatchedImagesTable({
Image