CreateImageWizard: add new image types
The image types 'vsphere', 'guest-image', and 'image-installer' are now supported by the CreateImageWizard. They require no additional customizations and support the current registration and packages customizations.
This commit is contained in:
Jacob Kozol
Sanne Raymaekers
parent
127358f49c
commit
f1f3c0cd66
5 changed files with 240 additions and 63 deletions
|
|
@ -103,6 +103,57 @@ const onSave = (values) => {
|
|||
requests.push(request);
|
||||
}
|
||||
|
||||
if (values['target-environment']?.vsphere) {
|
||||
let request = {
|
||||
distribution: values.release,
|
||||
image_requests: [
|
||||
{
|
||||
architecture: 'x86_64',
|
||||
image_type: 'vsphere',
|
||||
upload_request: {
|
||||
type: 'aws.s3',
|
||||
options: {}
|
||||
}
|
||||
}],
|
||||
customizations,
|
||||
};
|
||||
requests.push(request);
|
||||
}
|
||||
|
||||
if (values['target-environment']?.['guest-image']) {
|
||||
let request = {
|
||||
distribution: values.release,
|
||||
image_requests: [
|
||||
{
|
||||
architecture: 'x86_64',
|
||||
image_type: 'guest-image',
|
||||
upload_request: {
|
||||
type: 'aws.s3',
|
||||
options: {}
|
||||
}
|
||||
}],
|
||||
customizations,
|
||||
};
|
||||
requests.push(request);
|
||||
}
|
||||
|
||||
if (values['target-environment']?.['image-installer']) {
|
||||
let request = {
|
||||
distribution: values.release,
|
||||
image_requests: [
|
||||
{
|
||||
architecture: 'x86_64',
|
||||
image_type: 'image-installer',
|
||||
upload_request: {
|
||||
type: 'aws.s3',
|
||||
options: {}
|
||||
}
|
||||
}],
|
||||
customizations,
|
||||
};
|
||||
requests.push(request);
|
||||
}
|
||||
|
||||
return requests;
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -96,6 +96,33 @@ const ReviewStep = () => {
|
|||
</TextContent>
|
||||
</ListItem>
|
||||
}
|
||||
{getState()?.values?.['target-environment']?.vsphere &&
|
||||
<ListItem>
|
||||
<TextContent>
|
||||
<Text component={ TextVariants.h3 }>
|
||||
VMWare
|
||||
</Text>
|
||||
</TextContent>
|
||||
</ListItem>
|
||||
}
|
||||
{getState()?.values?.['target-environment']?.['guest-image'] &&
|
||||
<ListItem>
|
||||
<TextContent>
|
||||
<Text component={ TextVariants.h3 }>
|
||||
Virtualization - Guest image
|
||||
</Text>
|
||||
</TextContent>
|
||||
</ListItem>
|
||||
}
|
||||
{getState()?.values?.['target-environment']?.['image-installer'] &&
|
||||
<ListItem>
|
||||
<TextContent>
|
||||
<Text component={ TextVariants.h3 }>
|
||||
Bare metal - Installer
|
||||
</Text>
|
||||
</TextContent>
|
||||
</ListItem>
|
||||
}
|
||||
</List>
|
||||
</Tab>
|
||||
<Tab eventKey={ 1 } title={ <TabTitleText>Registration</TabTitleText> } data-testid='tab-registration'>
|
||||
|
|
|
|||
|
|
@ -2,16 +2,19 @@ import React, { useState, useEffect } from 'react';
|
|||
import PropTypes from 'prop-types';
|
||||
import useFormApi from '@data-driven-forms/react-form-renderer/use-form-api';
|
||||
import useFieldApi from '@data-driven-forms/react-form-renderer/use-field-api';
|
||||
import { FormGroup, Tile } from '@patternfly/react-core';
|
||||
import { Checkbox, FormGroup, Text, TextVariants, Tile } from '@patternfly/react-core';
|
||||
import './TargetEnvironment.scss';
|
||||
|
||||
const TargetEnvironment = ({ label, isRequired, ...props }) => {
|
||||
const { getState, change } = useFormApi();
|
||||
const { input } = useFieldApi({ label, isRequired, ...props });
|
||||
const [ environemt, setEnvironment ] = useState({
|
||||
const [ environment, setEnvironment ] = useState({
|
||||
aws: false,
|
||||
azure: false,
|
||||
google: false,
|
||||
vsphere: false,
|
||||
'guest-image': false,
|
||||
'image-installer': false,
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
|
|
@ -20,65 +23,86 @@ const TargetEnvironment = ({ label, isRequired, ...props }) => {
|
|||
}
|
||||
}, []);
|
||||
|
||||
return <FormGroup isRequired={ isRequired } label={ label } data-testid="target-select">
|
||||
<div className="tiles">
|
||||
<Tile
|
||||
className="tile pf-u-mr-sm"
|
||||
data-testid="upload-aws"
|
||||
title="Amazon Web Services"
|
||||
icon={ <img
|
||||
className='provider-icon'
|
||||
src={ '/apps/frontend-assets/partners-icons/aws.svg' } /> }
|
||||
onClick={ () => setEnvironment((prevEnv) => {
|
||||
const newEnv = ({
|
||||
...prevEnv,
|
||||
aws: !prevEnv.aws
|
||||
});
|
||||
change(input.name, newEnv);
|
||||
return newEnv;
|
||||
}) }
|
||||
isSelected={ environemt.aws }
|
||||
isStacked
|
||||
isDisplayLarge />
|
||||
<Tile
|
||||
className="tile pf-u-mr-sm"
|
||||
data-testid="upload-google"
|
||||
title="Google Cloud Platform"
|
||||
icon={ <img
|
||||
className='provider-icon'
|
||||
src={ '/apps/frontend-assets/partners-icons/google-cloud-short.svg' } /> }
|
||||
onClick={ () => setEnvironment((prevEnv) => {
|
||||
const newEnv = ({
|
||||
...prevEnv,
|
||||
google: !prevEnv.google
|
||||
});
|
||||
change(input.name, newEnv);
|
||||
return newEnv;
|
||||
}) }
|
||||
isSelected={ environemt.google }
|
||||
isStacked
|
||||
isDisplayLarge />
|
||||
<Tile
|
||||
className="tile pf-u-mr-sm"
|
||||
data-testid="upload-azure"
|
||||
title="Microsoft Azure"
|
||||
icon={ <img
|
||||
className='provider-icon'
|
||||
src={ '/apps/frontend-assets/partners-icons/microsoft-azure-short.svg' } /> }
|
||||
onClick={ () => setEnvironment((prevEnv) => {
|
||||
const newEnv = ({
|
||||
...prevEnv,
|
||||
azure: !prevEnv.azure
|
||||
});
|
||||
input.value = newEnv;
|
||||
change(input.name, newEnv);
|
||||
return newEnv;
|
||||
}) }
|
||||
isSelected={ environemt.azure }
|
||||
isStacked
|
||||
isDisplayLarge />
|
||||
</div>
|
||||
</FormGroup>;
|
||||
const handleSetEnvironment = (env) => setEnvironment((prevEnv) => {
|
||||
const newEnv = ({
|
||||
...prevEnv,
|
||||
[env]: !prevEnv[env]
|
||||
});
|
||||
change(input.name, newEnv);
|
||||
return newEnv;
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<FormGroup isRequired={ isRequired } label={ label } data-testid="target-select">
|
||||
<FormGroup label={ <Text component={ TextVariants.small }>Public cloud</Text> } data-testid="target-public">
|
||||
<div className="tiles">
|
||||
<Tile
|
||||
className="tile pf-u-mr-sm"
|
||||
data-testid="upload-aws"
|
||||
title="Amazon Web Services"
|
||||
icon={ <img
|
||||
className='provider-icon'
|
||||
src={ '/apps/frontend-assets/partners-icons/aws.svg' } /> }
|
||||
onClick={ () => handleSetEnvironment('aws') }
|
||||
isSelected={ environment.aws }
|
||||
isStacked
|
||||
isDisplayLarge />
|
||||
<Tile
|
||||
className="tile pf-u-mr-sm"
|
||||
data-testid="upload-google"
|
||||
title="Google Cloud Platform"
|
||||
icon={ <img
|
||||
className='provider-icon'
|
||||
src={ '/apps/frontend-assets/partners-icons/google-cloud-short.svg' } /> }
|
||||
onClick={ () => handleSetEnvironment('google') }
|
||||
isSelected={ environment.google }
|
||||
isStacked
|
||||
isDisplayLarge />
|
||||
<Tile
|
||||
className="tile pf-u-mr-sm"
|
||||
data-testid="upload-azure"
|
||||
title="Microsoft Azure"
|
||||
icon={ <img
|
||||
className='provider-icon'
|
||||
src={ '/apps/frontend-assets/partners-icons/microsoft-azure-short.svg' } /> }
|
||||
onClick={ () => handleSetEnvironment('azure') }
|
||||
isSelected={ environment.azure }
|
||||
isStacked
|
||||
isDisplayLarge />
|
||||
</div>
|
||||
</FormGroup>
|
||||
<FormGroup label={ <Text component={ TextVariants.small }>Private cloud</Text> } data-testid="target-private">
|
||||
<Checkbox
|
||||
label="VMWare"
|
||||
isChecked={ environment.vsphere }
|
||||
onChange={ () => handleSetEnvironment('vsphere') }
|
||||
aria-label="VMWare checkbox"
|
||||
id="checkbox-vmware"
|
||||
name="VMWare"
|
||||
data-testid="checkbox-vmware" />
|
||||
</FormGroup>
|
||||
<FormGroup label={ <Text component={ TextVariants.small }>Other</Text> } data-testid="target-other">
|
||||
<Checkbox
|
||||
label="Virtualization - Guest image"
|
||||
isChecked={ environment['guest-image'] }
|
||||
onChange={ () => handleSetEnvironment('guest-image') }
|
||||
aria-label="Virtualization guest image checkbox"
|
||||
id="checkbox-guest-image"
|
||||
name="Virtualization guest image"
|
||||
data-testid="checkbox-guest-image" />
|
||||
<Checkbox
|
||||
label="Bare metal - Installer"
|
||||
isChecked={ environment['image-installer'] }
|
||||
onChange={ () => handleSetEnvironment('image-installer') }
|
||||
aria-label="Bare metal installer checkbox"
|
||||
id="checkbox-image-installer"
|
||||
name="Bare metal installer"
|
||||
data-testid="checkbox-image-installer" />
|
||||
</FormGroup>
|
||||
</FormGroup>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
TargetEnvironment.propTypes = {
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@ export default {
|
|||
{
|
||||
component: 'output',
|
||||
name: 'target-environment',
|
||||
label: 'Select target environment',
|
||||
label: 'Select target environments',
|
||||
isRequired: true,
|
||||
validate: [
|
||||
{
|
||||
|
|
|
|||
|
|
@ -760,6 +760,9 @@ describe('Click through all steps', () => {
|
|||
screen.getByTestId('upload-aws').click();
|
||||
screen.getByTestId('upload-azure').click();
|
||||
screen.getByTestId('upload-google').click();
|
||||
screen.getByTestId('checkbox-vmware').click();
|
||||
screen.getByTestId('checkbox-guest-image').click();
|
||||
screen.getByTestId('checkbox-image-installer').click();
|
||||
|
||||
screen.getByRole('button', { name: /Next/ }).click();
|
||||
userEvent.type(screen.getByTestId('aws-account-id'), '012345678901');
|
||||
|
|
@ -797,6 +800,9 @@ describe('Click through all steps', () => {
|
|||
findByText('Review the information and click "Create image" to create the image using the following criteria.');
|
||||
await screen.findAllByText('Amazon Web Services');
|
||||
await screen.findAllByText('Google Cloud Platform');
|
||||
await screen.findByText('VMWare');
|
||||
await screen.findByText('Virtualization - Guest image');
|
||||
await screen.findByText('Bare metal - Installer');
|
||||
await screen.findByText('Register the system on first boot');
|
||||
|
||||
// mock the backend API
|
||||
|
|
@ -882,6 +888,75 @@ describe('Click through all steps', () => {
|
|||
},
|
||||
});
|
||||
id = 'edbae1c2-62bc-42c1-ae0c-3110ab718f58';
|
||||
} else if (body.image_requests[0].image_type === 'vsphere') {
|
||||
expect(body).toEqual({
|
||||
distribution: RHEL_8,
|
||||
image_requests: [{
|
||||
architecture: 'x86_64',
|
||||
image_type: 'vsphere',
|
||||
upload_request: {
|
||||
type: 'aws.s3',
|
||||
options: {}
|
||||
},
|
||||
}],
|
||||
customizations: {
|
||||
packages: [ 'testPkg' ],
|
||||
subscription: {
|
||||
'activation-key': '1234567890',
|
||||
insights: true,
|
||||
organization: 5,
|
||||
'server-url': 'subscription.rhsm.redhat.com',
|
||||
'base-url': 'https://cdn.redhat.com/'
|
||||
},
|
||||
},
|
||||
});
|
||||
id = 'edbae1c2-62bc-42c1-ae0c-3110ab718f59';
|
||||
} else if (body.image_requests[0].image_type === 'guest-image') {
|
||||
expect(body).toEqual({
|
||||
distribution: RHEL_8,
|
||||
image_requests: [{
|
||||
architecture: 'x86_64',
|
||||
image_type: 'guest-image',
|
||||
upload_request: {
|
||||
type: 'aws.s3',
|
||||
options: {}
|
||||
},
|
||||
}],
|
||||
customizations: {
|
||||
packages: [ 'testPkg' ],
|
||||
subscription: {
|
||||
'activation-key': '1234567890',
|
||||
insights: true,
|
||||
organization: 5,
|
||||
'server-url': 'subscription.rhsm.redhat.com',
|
||||
'base-url': 'https://cdn.redhat.com/'
|
||||
},
|
||||
},
|
||||
});
|
||||
id = 'edbae1c2-62bc-42c1-ae0c-3110ab718f5a';
|
||||
} else if (body.image_requests[0].image_type === 'image-installer') {
|
||||
expect(body).toEqual({
|
||||
distribution: RHEL_8,
|
||||
image_requests: [{
|
||||
architecture: 'x86_64',
|
||||
image_type: 'image-installer',
|
||||
upload_request: {
|
||||
type: 'aws.s3',
|
||||
options: {}
|
||||
},
|
||||
}],
|
||||
customizations: {
|
||||
packages: [ 'testPkg' ],
|
||||
subscription: {
|
||||
'activation-key': '1234567890',
|
||||
insights: true,
|
||||
organization: 5,
|
||||
'server-url': 'subscription.rhsm.redhat.com',
|
||||
'base-url': 'https://cdn.redhat.com/'
|
||||
},
|
||||
},
|
||||
});
|
||||
id = 'edbae1c2-62bc-42c1-ae0c-3110ab718f5b';
|
||||
}
|
||||
|
||||
ids.unshift(id);
|
||||
|
|
@ -892,7 +967,7 @@ describe('Click through all steps', () => {
|
|||
create.click();
|
||||
|
||||
// API request sent to backend
|
||||
await expect(composeImage).toHaveBeenCalledTimes(3);
|
||||
await expect(composeImage).toHaveBeenCalledTimes(6);
|
||||
|
||||
// returns back to the landing page
|
||||
await waitFor(() => expect(history.location.pathname).toBe('/'));
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue