particle-os/debian-image-builder-frontend
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Wizard: edit compliance according to updated mockups

Browse source 
Changes the compliance step based on most recent mockups
This commit is contained in:
Katarina Sieklova 2025-04-16 17:01:25 +02:00 • committed by Klara Simickova
parent ad6b38a115
commit cfa437a34b
5 changed files with 103 additions and 179 deletions
Download patch file Download diff file Expand all files Collapse all files

33
src/Components/CreateImageWizard/steps/Oscap/components/OpenSCAPFGLabel.tsx
View file

@ -1,33 +0,0 @@
import React from 'react';
import { Popover, TextContent, Text, Button } from '@patternfly/react-core';
import { HelpIcon } from '@patternfly/react-icons';
const OpenSCAPFGLabel = () => {
return (
<>
OpenSCAP profile
<Popover
maxWidth="30rem"
bodyContent={
<TextContent>
<Text>
To run a manual compliance scan in OpenSCAP, download this image.
</Text>
</TextContent>
}
>
<Button
variant="plain"
aria-label="About OpenSCAP"
isInline
className="pf-v5-u-pl-sm pf-v5-u-pt-0 pf-v5-u-pb-0 pf-v5-u-pr-0"
>
<HelpIcon />
</Button>
</Popover>
</>
);
};
export default OpenSCAPFGLabel;

116
src/Components/CreateImageWizard/steps/Oscap/components/OscapProfileInformation.tsx
View file

@ -1,8 +1,6 @@
import React, { useEffect } from 'react';
import {
CodeBlock,
CodeBlockCode,
Spinner,
TextContent,
TextList,
@ -11,7 +9,6 @@ import {
TextListVariants,
} from '@patternfly/react-core';
import { RELEASES } from '../../../../../constants';
import { useGetOscapCustomizationsQuery } from '../../../../../store/backendApi';
import { PolicyRead, usePolicyQuery } from '../../../../../store/complianceApi';
import { useAppDispatch, useAppSelector } from '../../../../../store/hooks';
@ -22,7 +19,6 @@ import {
selectComplianceProfileID,
selectDistribution,
} from '../../../../../store/wizardSlice';
import { useFlag } from '../../../../../Utilities/useGetEnvironment';
type OscapProfileInformationOptionPropType = {
allowChangingCompliancePolicy?: boolean;
@ -36,9 +32,6 @@ export const OscapProfileInformation = ({
const compliancePolicyID = useAppSelector(selectCompliancePolicyID);
const complianceProfileID = useAppSelector(selectComplianceProfileID);
const isKernelEnabled = useFlag('image-builder.kernel.enabled');
const isServicesStepEnabled = useFlag('image-builder.services.enabled');
const {
data: oscapProfileInfo,
isFetching: isFetchingOscapProfileInfo,
@ -82,15 +75,6 @@ export const OscapProfileInformation = ({
);
}, [isSuccessPolicyInfo]);
const enabledServicesDisplayString =
oscapProfileInfo?.services?.enabled?.join(' ');
const disabledAndMaskedServices = [
...(oscapProfileInfo?.services?.disabled ?? []),
...(oscapProfileInfo?.services?.masked ?? []),
];
const disabledAndMaskedServicesDisplayString =
disabledAndMaskedServices.join(' ');
const oscapProfile = oscapProfileInfo?.openscap as OpenScapProfile;
return (
@ -111,15 +95,6 @@ export const OscapProfileInformation = ({
<TextListItem component={TextListItemVariants.dd}>
{oscapProfile?.profile_description}
</TextListItem>
<TextListItem
component={TextListItemVariants.dt}
className="pf-v5-u-min-width"
>
Operating system:
</TextListItem>
<TextListItem component={TextListItemVariants.dd}>
{RELEASES.get(release)}
</TextListItem>
<TextListItem
component={TextListItemVariants.dt}
className="pf-v5-u-min-width"
@ -132,53 +107,50 @@ export const OscapProfileInformation = ({
>
{oscapProfile?.profile_id}
</TextListItem>
{!isKernelEnabled && (
<>
<TextListItem
component={TextListItemVariants.dt}
className="pf-v5-u-min-width"
>
Kernel arguments:
</TextListItem>
<TextListItem component={TextListItemVariants.dd}>
<CodeBlock>
<CodeBlockCode>
{oscapProfileInfo?.kernel?.append}
</CodeBlockCode>
</CodeBlock>
</TextListItem>
</>
)}
{!isServicesStepEnabled && (
<>
<TextListItem
component={TextListItemVariants.dt}
className="pf-v5-u-min-width"
>
Disabled services:
</TextListItem>
<TextListItem component={TextListItemVariants.dd}>
<CodeBlock>
<CodeBlockCode>
{disabledAndMaskedServicesDisplayString}
</CodeBlockCode>
</CodeBlock>
</TextListItem>
<TextListItem
component={TextListItemVariants.dt}
className="pf-v5-u-min-width"
>
Enabled services:
</TextListItem>
<TextListItem component={TextListItemVariants.dd}>
<CodeBlock>
<CodeBlockCode>
{enabledServicesDisplayString}
</CodeBlockCode>
</CodeBlock>
</TextListItem>
</>
)}
</TextList>
</TextContent>
</>
)}
{isSuccessPolicyInfo && (
<>
<TextContent>
<TextList component={TextListVariants.dl}>
<TextListItem
component={TextListItemVariants.dt}
className="pf-v5-u-min-width"
>
Policy description:
</TextListItem>
<TextListItem component={TextListItemVariants.dd}>
{policyInfo?.data?.schema?.description}
</TextListItem>
<TextListItem
component={TextListItemVariants.dt}
className="pf-v5-u-min-width"
>
Business objective:
</TextListItem>
<TextListItem component={TextListItemVariants.dd}>
{policyInfo?.data?.schema?.business_objective}
</TextListItem>
<TextListItem
component={TextListItemVariants.dt}
className="pf-v5-u-min-width"
>
Policy type:
</TextListItem>
<TextListItem component={TextListItemVariants.dd}>
{policyInfo?.data?.schema?.type}
</TextListItem>
<TextListItem
component={TextListItemVariants.dt}
className="pf-v5-u-min-width"
>
Reference ID:
</TextListItem>
<TextListItem component={TextListItemVariants.dd}>
{policyInfo?.data?.schema?.id}
</TextListItem>
</TextList>
</TextContent>
</>

9
src/Components/CreateImageWizard/steps/Oscap/components/ProfileSelector.tsx
View file

@ -17,8 +17,6 @@ import {
import { TimesIcon } from '@patternfly/react-icons';
import { v4 as uuidv4 } from 'uuid';
import OpenSCAPFGLabel from './OpenSCAPFGLabel';
import {
useGetOscapProfilesQuery,
useGetOscapCustomizationsQuery,
@ -323,6 +321,11 @@ const ProfileSelector = () => {
onClick={() => setIsOpen(!isOpen)}
isExpanded={isOpen}
isDisabled={!isSuccess || hasWslTargetOnly}
style={
{
width: '100%',
} as React.CSSProperties
}
>
<TextInputGroup isPlain>
<TextInputGroupMain
@ -350,7 +353,7 @@ const ProfileSelector = () => {
);
return (
<FormGroup data-testid="profiles-form-group" label={<OpenSCAPFGLabel />}>
<FormGroup data-testid="profiles-form-group" label="Profile">
<Select
isScrollable
isOpen={isOpen}

120
src/Components/CreateImageWizard/steps/Oscap/index.tsx
View file

@ -1,14 +1,14 @@
import React, { useEffect } from 'react';
import {
Button,
Alert,
AlertActionLink,
Form,
FormGroup,
Radio,
Text,
Title,
ToggleGroup,
ToggleGroupItem,
} from '@patternfly/react-core';
import { ExternalLinkAltIcon } from '@patternfly/react-icons';
import useChrome from '@redhat-cloud-services/frontend-components/useChrome';
import OscapOnPremSpinner from './components/OnPremSpinner';
@ -16,14 +16,12 @@ import OscapOnPremWarning from './components/OnPremWarning';
import Oscap from './Oscap';
import { removeBetaFromRelease } from './removeBetaFromRelease';
import {
COMPLIANCE_AND_VULN_SCANNING_URL,
COMPLIANCE_URL,
} from '../../../../constants';
import { COMPLIANCE_URL } from '../../../../constants';
import {
useBackendPrefetch,
useGetOscapCustomizationsQuery,
} from '../../../../store/backendApi';
import { usePoliciesQuery } from '../../../../store/complianceApi';
import { useAppDispatch, useAppSelector } from '../../../../store/hooks';
import {
ComplianceType,
@ -54,6 +52,7 @@ const OscapContent = () => {
const profileID = useAppSelector(selectComplianceProfileID);
const prefetchOscapProfile = useBackendPrefetch('getOscapProfiles', {});
const release = removeBetaFromRelease(useAppSelector(selectDistribution));
const majorVersion = release.split('-')[1];
const { data: currentProfileData } = useGetOscapCustomizationsQuery(
{
@ -101,78 +100,59 @@ const OscapContent = () => {
analytics.screen('ib-createimagewizard-step-security-openscap');
}
}
const { data: policies } = usePoliciesQuery(
{
filter: `os_major_version=${majorVersion}`,
},
{
skip: complianceType === 'openscap',
}
);
return (
<Form>
<Title headingLevel="h1" size="xl">
{complianceEnabled ? 'Compliance' : 'OpenSCAP profile'}
</Title>
<Text>
Below you can select which Insights compliance policy or OpenSCAP
profile your image will be compliant to. Insights compliance allows the
use of tailored policies, whereas OpenSCAP gives you the default
versions. This will automatically help monitor the adherence of your
registered RHEL systems to a selected policy or profile.
</Text>
{complianceEnabled && (
<FormGroup>
<Radio
id="openscap radio openscap type"
label="OpenSCAP"
name="oscap-radio-openscap"
isChecked={complianceType === 'openscap'}
onChange={() => handleTypeChange('openscap')}
/>
<Radio
id="openscap radio compliance type"
label="Insights compliance"
name="oscap-radio-compliance"
isChecked={complianceType === 'compliance'}
<ToggleGroup aria-label="Default with single selectable">
<ToggleGroupItem
text="Compliance policies"
buttonId="toggle-group-compliance"
isSelected={complianceType === 'compliance'}
onChange={() => handleTypeChange('compliance')}
/>
</FormGroup>
)}
{(!complianceEnabled || complianceType === 'openscap') && (
<Text>
OpenSCAP enables you to automatically monitor the adherence of your
registered RHEL systems to a selected regulatory compliance profile.
<br />
<Button
component="a"
target="_blank"
variant="link"
icon={<ExternalLinkAltIcon />}
iconPosition="right"
isInline
href={COMPLIANCE_AND_VULN_SCANNING_URL}
>
Documentation
</Button>
</Text>
)}
{complianceType === 'compliance' && (
<Text>
Insights compliance enables you to monitor the adherence of your
registered RHEL systems to a selected compliance policy.
<br />
<Button
component="a"
target="_blank"
variant="link"
icon={<ExternalLinkAltIcon />}
iconPosition="right"
isInline
href={COMPLIANCE_URL}
>
Define new policies in Insights Compliance
</Button>
<br />
<Button
component="a"
target="_blank"
variant="link"
icon={<ExternalLinkAltIcon />}
iconPosition="right"
isInline
href={COMPLIANCE_AND_VULN_SCANNING_URL}
>
Documentation
</Button>
</Text>
<ToggleGroupItem
text="OpenSCAP profiles"
buttonId="toggle-group-openscap"
isSelected={complianceType === 'openscap'}
onChange={() => handleTypeChange('openscap')}
/>
</ToggleGroup>
)}
{Array.isArray(policies?.data) &&
policies.data.length === 0 &&
complianceType === 'compliance' && (
<Alert variant="info" isInline title="No compliance policies created">
<p>
Currently there are no compliance policies in your environment. To
help you get started, select one of the default policies below and
we will create the policy for you. However, in order to modify the
policy or to create a new one, you must go through Insights
Compliance.
</p>
<AlertActionLink component="a" href={COMPLIANCE_URL}>
Save blueprint and navigate to Insights Compliance
</AlertActionLink>
</Alert>
)}
<Oscap />
</Form>
);