Skip to content

ROX-8948: Add modal for showing image in deferral request #377

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
md2119 merged 2 commits into from
Jan 20, 2022
Merged

ROX-8948: Add modal for showing image in deferral request #377

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e064806
Move ImpactedEntities component to subfolder
vjwilson Jan 19, 2022
5c282fb
Add ImpactedEntitiesModal for entities in requests
vjwilson Jan 19, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion ...tform/src/Containers/VulnMgmt/RiskAcceptance/ApprovedDeferrals/ApprovedDeferralsTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ import VulnerabilityRequestScope from '../PendingApprovals/VulnerabilityRequestS
import UndoVulnRequestModal from '../UndoVulnRequestModal';
import UpdateDeferralModal from './UpdateDeferralModal';
import ApprovedDeferralActionsColumn from './ApprovedDeferralActionsColumn';
import ImpactedEntities from '../ImpactedEntities';
import ImpactedEntities from '../ImpactedEntities/ImpactedEntities';
import VulnRequestedAction from '../VulnRequestedAction';
import DeferralExpirationDate from '../DeferralExpirationDate';
import ApprovedDeferralsSearchFilter from './ApprovedDeferralsSearchFilter';
Expand Down Expand Up @@ -228,7 +228,9 @@ function ApprovedDeferralsTable({
</Td>
<Td dataLabel="Impacted entities">
<ImpactedEntities
deployments={row.deployments}
deploymentCount={row.deploymentCount}
images={row.images}
imageCount={row.imageCount}
/>
</Td>
Expand Down
4 changes: 3 additions & 1 deletion ...Containers/VulnMgmt/RiskAcceptance/ApprovedFalsePositives/ApprovedFalsePositivesTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ import useRiskAcceptance from '../useRiskAcceptance';
import VulnerabilityRequestScope from '../PendingApprovals/VulnerabilityRequestScope';
import UndoVulnRequestModal from '../UndoVulnRequestModal';
import ApprovedFalsePositiveActionsColumn from './ApprovedFalsePositiveActionsColumn';
import ImpactedEntities from '../ImpactedEntities';
import ImpactedEntities from '../ImpactedEntities/ImpactedEntities';
import VulnRequestedAction from '../VulnRequestedAction';
import ApprovedFalsePositivesSearchFilter from './ApprovedFalsePositivesSearchFilter';
import SearchFilterResults from '../SearchFilterResults';
Expand Down Expand Up @@ -198,7 +198,9 @@ function ApprovedFalsePositivesTable({
</Td>
<Td dataLabel="Impacted entities">
<ImpactedEntities
deployments={row.deployments}
deploymentCount={row.deploymentCount}
images={row.images}
imageCount={row.imageCount}
/>
</Td>
Expand Down
30 changes: 0 additions & 30 deletions ui/apps/platform/src/Containers/VulnMgmt/RiskAcceptance/ImpactedEntities.tsx
View file
Open in desktop

This file was deleted.

76 changes: 76 additions & 0 deletions ...pps/platform/src/Containers/VulnMgmt/RiskAcceptance/ImpactedEntities/ImpactedEntities.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@
import React, { useState, ReactElement } from 'react';
import pluralize from 'pluralize';
import { Button, ButtonVariant, Flex, FlexItem, Label } from '@patternfly/react-core';

import entityTypes from 'constants/entityTypes';
import ImpactedEntitiesModal from './ImpactedEntitiesModal';

export type ImpactedEntitiesProps = {
deployments: any;
deploymentCount: number;
images: any;
imageCount: number;
};

function ImpactedEntities({
deployments,
deploymentCount,
images,
imageCount,
}: ImpactedEntitiesProps): ReactElement {
const [modalTypeOpen, setModalTypeOpen] = useState('');

function openModal(entityType) {
setModalTypeOpen(entityType);
}

function closeModal() {
setModalTypeOpen('');
}
return (
<>
<Flex spaceItems={{ default: 'spaceItemsMd' }}>
<FlexItem>
<Button
variant={ButtonVariant.link}
isInline
onClick={() => {
openModal(entityTypes.DEPLOYMENT);
}}
>
<Label color="blue">
{deploymentCount} {pluralize('deployment', deploymentCount)}
</Label>
</Button>
</FlexItem>
<FlexItem>
<Button
variant={ButtonVariant.link}
isInline
onClick={() => {
openModal(entityTypes.IMAGE);
}}
>
<Label color="blue">
{imageCount} {pluralize('image', imageCount)}
</Label>
</Button>
</FlexItem>
</Flex>
<ImpactedEntitiesModal
entityType={modalTypeOpen}
isOpen={modalTypeOpen === entityTypes.DEPLOYMENT}
entities={deployments}
onClose={closeModal}
/>
<ImpactedEntitiesModal
entityType={modalTypeOpen}
isOpen={modalTypeOpen === entityTypes.IMAGE}
entities={images}
onClose={closeModal}
/>
</>
);
}

export default ImpactedEntities;
72 changes: 72 additions & 0 deletions ...latform/src/Containers/VulnMgmt/RiskAcceptance/ImpactedEntities/ImpactedEntitiesModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
import React, { ReactElement } from 'react';
import { Link } from 'react-router-dom';
import { Flex, FlexItem, Modal, ModalVariant, Title } from '@patternfly/react-core';
import { TableComposable, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
import pluralize from 'pluralize';

import entityTypes from 'constants/entityTypes';
import { resourceLabels } from 'messages/common';
import { vulnManagementPath } from 'routePaths';

function EntityName({ entity, entityType }) {
return entityType === entityTypes.IMAGE ? (
<Link to={`${vulnManagementPath}/image/${entity.id as string}`}>
{entity?.name?.fullName}
</Link>
) : (
<Flex direction={{ default: 'column' }}>
<FlexItem className="pf-u-mb-0">
<Link to={`${vulnManagementPath}/deployment/${entity.id as string}`}>
{entity.name}
</Link>
</FlexItem>
<FlexItem className="pf-u-color-400 pf-u-font-size-xs">
{`in "${entity.clusterName as string}/${entity.namespace as string}"`}
</FlexItem>
</Flex>
);
}
export type ImpactedEntitiesModalProps = {
isOpen: boolean;
entityType: string;
entities: Record<string, any>[];
onClose: () => void;
};

function ImpactedEntitiesModal({
isOpen,
entityType,
entities,
onClose,
}: ImpactedEntitiesModalProps): ReactElement {
const entityTypeName = pluralize(resourceLabels[entityType] ?? '', entities?.length);
const header = (
<Title headingLevel="h2">
<span style={{ textTransform: 'capitalize' }}>{entityTypeName}</span> impacted by this
request
</Title>
);

return (
<Modal variant={ModalVariant.small} header={header} isOpen={isOpen} onClose={onClose}>
<TableComposable aria-label="Simple table" variant="compact">
<Thead>
<Tr>
<Th>Name</Th>
</Tr>
</Thead>
<Tbody>
{entities.map((entity) => (
<Tr key={entity?.name ?? entity?.name?.fullName}>
<Td dataLabel="Name">
<EntityName entity={entity} entityType={entityType} />
</Td>
</Tr>
))}
</Tbody>
</TableComposable>
</Modal>
);
}

export default ImpactedEntitiesModal;
4 changes: 3 additions & 1 deletion ...latform/src/Containers/VulnMgmt/RiskAcceptance/PendingApprovals/PendingApprovalsTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ import DenyDeferralModal from './DenyDeferralModal';
import DenyFalsePositiveModal from './DenyFalsePositiveModal';
import CancelVulnRequestModal from './CancelVulnRequestModal';
import DeferralExpirationDate from '../DeferralExpirationDate';
import ImpactedEntities from '../ImpactedEntities';
import ImpactedEntities from '../ImpactedEntities/ImpactedEntities';
import PendingApprovalsSearchFilter from './PendingApprovalsSearchFilter';
import SearchFilterResults from '../SearchFilterResults';

Expand Down Expand Up @@ -296,7 +296,9 @@ function PendingApprovalsTable({
</Td>
<Td dataLabel="Impacted entities">
<ImpactedEntities
deployments={row.deployments}
deploymentCount={row.deploymentCount}
images={row.images}
imageCount={row.imageCount}
/>
</Td>
Expand Down
24 changes: 24 additions & 0 deletions ui/apps/platform/src/Containers/VulnMgmt/RiskAcceptance/vulnerabilityRequests.graphql.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,19 @@ export type VulnerabilityRequest = {
cves: {
ids: string[];
};
deployments: {
id: string;
name: string;
namespace: string;
clusterName: string;
};
deploymentCount: number;
images: {
id: string;
name: {
fullName: string;
};
};
imageCount: number;
};

Expand Down Expand Up @@ -84,7 +96,19 @@ export const GET_VULNERABILITY_REQUESTS = gql`
cves {
ids
}
deployments(query: $query) {
id
name
namespace
clusterName
}
deploymentCount(query: $query)
images(query: $query) {
id
name {
fullName
}
}
imageCount(query: $query)
}
vulnerabilityRequestsCount(query: $query)
Expand Down