diff --git a/ui/apps/platform/src/Containers/Policies/Detail/ExcludedDeployment.tsx b/ui/apps/platform/src/Containers/Policies/Detail/ExcludedDeployment.tsx index 37cf2f96a0852..e8e4e2f8037fb 100644 --- a/ui/apps/platform/src/Containers/Policies/Detail/ExcludedDeployment.tsx +++ b/ui/apps/platform/src/Containers/Policies/Detail/ExcludedDeployment.tsx @@ -17,14 +17,32 @@ function ExcludedDeployment({ excludedDeployment, }: ExcludedDeploymentProps): ReactElement { const { name: deploymentName, scope } = excludedDeployment; - const { cluster: clusterId, namespace: namespaceName, label } = scope ?? {}; + const { + cluster: clusterId, + clusterLabel, + namespace: namespaceName, + namespaceLabel, + label, + } = scope ?? {}; return ( - + {clusterId && ( )} + {clusterLabel && ( + + )} {namespaceName && } + {namespaceLabel && ( + + )} {deploymentName && } {label && ( diff --git a/ui/apps/platform/src/Containers/Policies/Detail/PolicyDetailContent.tsx b/ui/apps/platform/src/Containers/Policies/Detail/PolicyDetailContent.tsx index 470318235c036..4a55e32d28d7a 100644 --- a/ui/apps/platform/src/Containers/Policies/Detail/PolicyDetailContent.tsx +++ b/ui/apps/platform/src/Containers/Policies/Detail/PolicyDetailContent.tsx @@ -5,11 +5,12 @@ import { Flex, Grid, Stack, Title } from '@patternfly/react-core'; import { fetchNotifierIntegrations } from 'services/NotifierIntegrationsService'; import type { NotifierIntegration } from 'types/notifier.proto'; -import type { BasePolicy } from 'types/policy.proto'; +import type { BasePolicy, ClientPolicy } from 'types/policy.proto'; import PolicyOverview from './PolicyOverview'; import BooleanPolicyLogicSection from '../Wizard/Step3/BooleanPolicyLogicSection'; import PolicyScopeSection from './PolicyScopeSection'; import PolicyBehaviorSection from './PolicyBehaviorSection'; +import { getExcludedDeployments, getExcludedImageNames } from '../policies.utils'; type PolicyDetailContentProps = { policy: BasePolicy; @@ -30,6 +31,18 @@ function PolicyDetailContent({ policy, isReview = false }: PolicyDetailContentPr }, []); const { enforcementActions, eventSource, exclusions, scope, lifecycleStages } = policy; + const clientPolicy = policy as ClientPolicy; + const hasWizardDeploymentScopes = (clientPolicy.excludedDeploymentScopes ?? []).some( + (d) => d.name || d.scope + ); + const hasWizardImageNames = (clientPolicy.excludedImageNames ?? []).some((name) => name !== ''); + const showPolicyScopeSection = + (scope?.length ?? 0) > 0 || + getExcludedDeployments(exclusions).length > 0 || + getExcludedImageNames(exclusions).length > 0 || + hasWizardDeploymentScopes || + hasWizardImageNames; + return (
@@ -58,10 +71,15 @@ function PolicyDetailContent({ policy, isReview = false }: PolicyDetailContentPr )} - {(scope?.length > 0 || exclusions?.length > 0) && ( + {showPolicyScopeSection && ( Policy scope - + )} diff --git a/ui/apps/platform/src/Containers/Policies/Detail/PolicyScopeSection.tsx b/ui/apps/platform/src/Containers/Policies/Detail/PolicyScopeSection.tsx index 2c6ba1af8cbf9..189842fdbdd82 100644 --- a/ui/apps/platform/src/Containers/Policies/Detail/PolicyScopeSection.tsx +++ b/ui/apps/platform/src/Containers/Policies/Detail/PolicyScopeSection.tsx @@ -2,7 +2,7 @@ import type { ReactElement } from 'react'; import { Card, CardBody, Grid, GridItem, List, ListItem, Title } from '@patternfly/react-core'; import useFetchClustersForPermissions from 'hooks/useFetchClustersForPermissions'; -import type { PolicyExclusion, PolicyScope } from 'types/policy.proto'; +import type { PolicyExcludedDeployment, PolicyExclusion, PolicyScope } from 'types/policy.proto'; import Restriction from './Restriction'; import ExcludedDeployment from './ExcludedDeployment'; import { getExcludedDeployments, getExcludedImageNames } from '../policies.utils'; @@ -10,13 +10,30 @@ import { getExcludedDeployments, getExcludedImageNames } from '../policies.utils type PolicyScopeSectionProps = { scope: PolicyScope[]; exclusions: PolicyExclusion[]; + excludedDeploymentScopes?: PolicyExcludedDeployment[]; + excludedImageNames?: string[]; }; -function PolicyScopeSection({ scope, exclusions }: PolicyScopeSectionProps): ReactElement { +function PolicyScopeSection({ + scope, + exclusions, + excludedDeploymentScopes = [], + excludedImageNames = [], +}: PolicyScopeSectionProps): ReactElement { const { clusters } = useFetchClustersForPermissions(['Deployment']); - const excludedDeploymentScopes = getExcludedDeployments(exclusions); - const excludedImageNames = getExcludedImageNames(exclusions); + const fromExclusionsDeployments = getExcludedDeployments(exclusions); + const excludedDeployments = + fromExclusionsDeployments.length !== 0 + ? fromExclusionsDeployments + : excludedDeploymentScopes.filter((d) => d.name || d.scope); + + const fromExclusionsImageNames = getExcludedImageNames(exclusions); + const imageExclusionNames = + fromExclusionsImageNames.length !== 0 + ? fromExclusionsImageNames + : excludedImageNames.filter((name) => name !== ''); + return ( <> {scope?.length !== 0 && ( @@ -39,11 +56,11 @@ function PolicyScopeSection({ scope, exclusions }: PolicyScopeSectionProps): Rea )} - {excludedDeploymentScopes?.length !== 0 && ( + {excludedDeployments?.length !== 0 && ( <> Excluded resources - {excludedDeploymentScopes.map((excludedDeployment, index) => ( + {excludedDeployments.map((excludedDeployment, index) => ( // eslint-disable-next-line react/no-array-index-key @@ -59,11 +76,11 @@ function PolicyScopeSection({ scope, exclusions }: PolicyScopeSectionProps): Rea )} - {excludedImageNames?.length !== 0 && ( + {imageExclusionNames?.length !== 0 && ( <> Image exclusions - {excludedImageNames.map((name) => ( + {imageExclusionNames.map((name) => ( {name} ))} diff --git a/ui/apps/platform/src/Containers/Policies/Detail/Restriction.tsx b/ui/apps/platform/src/Containers/Policies/Detail/Restriction.tsx index 0cf5fb977d7f4..bb04bab67c83a 100644 --- a/ui/apps/platform/src/Containers/Policies/Detail/Restriction.tsx +++ b/ui/apps/platform/src/Containers/Policies/Detail/Restriction.tsx @@ -13,14 +13,26 @@ type RestrictionProps = { }; function Restriction({ clusters, restriction }: RestrictionProps): ReactElement { - const { cluster: clusterId, namespace, label } = restriction; + const { cluster: clusterId, clusterLabel, namespace, namespaceLabel, label } = restriction; return ( - + {clusterId && ( )} + {clusterLabel && ( + + )} {namespace && } + {namespaceLabel && ( + + )} {label && ( )}