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

CreateImageWizard: Add support for vsphere-ova imagetype

Browse source 
The OVA type is also the default when checking VMWare now.
This commit is contained in:
Sanne Raymaekers 2023-07-03 15:16:26 +02:00
parent fa90e24989
commit f20686df4d
7 changed files with 219 additions and 112 deletions
Download patch file Download diff file Expand all files Collapse all files

19
src/Components/CreateImageWizard/CreateImageWizard.js
View file

@ -204,6 +204,25 @@ const onSave = (values) => {
requests.push(request);
}
if (values['target-environment']?.['vsphere-ova']) {
const request = {
distribution: values.release,
image_name: values?.['image-name'],
image_requests: [
{
architecture: 'x86_64',
image_type: 'vsphere-ova',
upload_request: {
type: 'aws.s3',
options: {},
},
},
],
customizations,
};
requests.push(request);
}
if (values['target-environment']?.['guest-image']) {
const request = {
distribution: values.release,

8
src/Components/CreateImageWizard/formComponents/ReviewStep.js
View file

@ -86,7 +86,13 @@ const ReviewStep = () => {
)}
{getState()?.values?.['target-environment']?.vsphere && (
<TextContent>
<Text component={TextVariants.h3}>VMWare (.vmdk)</Text>
<Text component={TextVariants.h3}>VMWare vSphere (.vmdk)</Text>
<TargetEnvOtherList />
</TextContent>
)}
{getState()?.values?.['target-environment']?.['vsphere-ova'] && (
<TextContent>
<Text component={TextVariants.h3}>VMWare vSphere (.ova)</Text>
<TargetEnvOtherList />
</TextContent>
)}

288
src/Components/CreateImageWizard/formComponents/TargetEnvironment.js
View file

@ -5,10 +5,14 @@ import useFormApi from '@data-driven-forms/react-form-renderer/use-form-api';
import {
Checkbox,
FormGroup,
Popover,
Radio,
Text,
TextContent,
TextVariants,
Tile,
} from '@patternfly/react-core';
import { HelpIcon } from '@patternfly/react-icons';
import PropTypes from 'prop-types';
import { usePrefetch } from '../../../store/apiSlice';
@ -20,6 +24,7 @@ const TargetEnvironment = ({ label, isRequired, ...props }) => {
aws: false,
azure: false,
gcp: false,
'vsphere-ova': false,
vsphere: false,
'guest-image': false,
'image-installer': false,
@ -32,129 +37,204 @@ const TargetEnvironment = ({ label, isRequired, ...props }) => {
}
}, []);
const handleSetEnvironment = (env) =>
const handleSetEnvironment = (env, checked) =>
setEnvironment((prevEnv) => {
const newEnv = {
...prevEnv,
[env]: !prevEnv[env],
[env]: checked,
};
change(input.name, newEnv);
return newEnv;
});
const handleKeyDown = (e, env) => {
const handleKeyDown = (e, env, checked) => {
if (e.key === ' ') {
handleSetEnvironment(env);
handleSetEnvironment(env, checked);
}
};
return (
<>
<FormGroup
isRequired={isRequired}
label={label}
data-testid="target-select"
>
<FormGroup
isRequired={isRequired}
label={label}
data-testid="target-select"
label={<Text component={TextVariants.small}>Public cloud</Text>}
data-testid="target-public"
>
<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')}
onKeyDown={(e) => handleKeyDown(e, 'aws')}
onMouseEnter={() => prefetchSources('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('gcp')}
isSelected={environment.gcp}
onKeyDown={(e) => handleKeyDown(e, 'gcp')}
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')}
onKeyDown={(e) => handleKeyDown(e, 'azure')}
onMouseEnter={() => prefetchSources('azure')}
isSelected={environment.azure}
isStacked
isDisplayLarge
/>
</div>
</FormGroup>
<FormGroup
label={<Text component={TextVariants.small}>Private cloud</Text>}
data-testid="target-private"
>
<Checkbox
label="VMWare (.vmdk)"
isChecked={environment.vsphere}
onChange={() => handleSetEnvironment('vsphere')}
aria-label="VMWare checkbox"
id="checkbox-vmware"
name="VMWare"
data-testid="checkbox-vmware"
<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', !environment.aws)}
onKeyDown={(e) => handleKeyDown(e, 'aws', !environment.aws)}
onMouseEnter={() => prefetchSources('aws')}
isSelected={environment.aws}
isStacked
isDisplayLarge
/>
</FormGroup>
<FormGroup
label={<Text component={TextVariants.small}>Other</Text>}
data-testid="target-other"
>
<Checkbox
label="Virtualization - Guest image (.qcow2)"
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"
<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('gcp', !environment.gcp)}
isSelected={environment.gcp}
onKeyDown={(e) => handleKeyDown(e, 'gcp', !environment.gcp)}
isStacked
isDisplayLarge
/>
<Checkbox
label="Bare metal - Installer (.iso)"
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"
<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', !environment.azure)}
onKeyDown={(e) => handleKeyDown(e, 'azure', !environment.azure)}
onMouseEnter={() => prefetchSources('azure')}
isSelected={environment.azure}
isStacked
isDisplayLarge
/>
</FormGroup>
</div>
</FormGroup>
</>
<FormGroup
label={<Text component={TextVariants.small}>Private cloud</Text>}
className="pf-u-mt-sm"
data-testid="target-private"
>
<Checkbox
label="VMWare vSphere"
isChecked={environment.vsphere || environment['vsphere-ova']}
onChange={(checked) => {
handleSetEnvironment('vsphere-ova', checked);
handleSetEnvironment('vsphere', false);
}}
aria-label="VMWare checkbox"
id="checkbox-vmware"
name="VMWare"
data-testid="checkbox-vmware"
/>
</FormGroup>
<FormGroup
className="pf-u-mt-sm pf-u-mb-sm pf-u-ml-xl"
data-testid="target-private-vsphere-radio"
>
<Radio
name="vsphere-radio"
aria-label="VMWare vSphere radio button OVA"
id="vsphere-radio-ova"
label={
<>
Open virtualization format (.ova)
<Popover
maxWidth="30rem"
position="right"
bodyContent={
<TextContent>
<Text>
An OVA file is a virtual appliance used by virtualization
platforms such as VMWare vSphere. It is a package that
contains files used to describe a virtual machine, which
includes a VMDK image, OVF descriptor file and a manifest
file.
</Text>
</TextContent>
}
>
<HelpIcon className="pf-u-ml-sm" />
</Popover>
</>
}
onChange={(checked) => {
handleSetEnvironment('vsphere-ova', checked);
handleSetEnvironment('vsphere', !checked);
}}
isChecked={environment['vsphere-ova']}
isDisabled={!(environment.vsphere || environment['vsphere-ova'])}
/>
<Radio
className="pf-u-mt-sm"
name="vsphere-radio"
aria-label="VMWare vSphere radio button VMDK"
id="vsphere-radio-vmdk"
label={
<>
Virtual disk (.vmdk)
<Popover
maxWidth="30rem"
position="right"
bodyContent={
<TextContent>
<Text>
A VMDK file is a virtual disk that stores the contents of
a virtual machine. This disk has to be imported into
vSphere using govc import.vmdk, use the OVA version when
using the vSphere UI.
</Text>
</TextContent>
}
>
<HelpIcon className="pf-u-ml-sm" />
</Popover>
</>
}
onChange={(checked) => {
handleSetEnvironment('vsphere-ova', !checked);
handleSetEnvironment('vsphere', checked);
}}
isChecked={environment.vsphere}
isDisabled={!(environment.vsphere || environment['vsphere-ova'])}
/>
</FormGroup>
<FormGroup
label={<Text component={TextVariants.small}>Other</Text>}
data-testid="target-other"
>
<Checkbox
label="Virtualization - Guest image (.qcow2)"
isChecked={environment['guest-image']}
onChange={(checked) => handleSetEnvironment('guest-image', checked)}
aria-label="Virtualization guest image checkbox"
id="checkbox-guest-image"
name="Virtualization guest image"
data-testid="checkbox-guest-image"
/>
<Checkbox
label="Bare metal - Installer (.iso)"
isChecked={environment['image-installer']}
onChange={(checked) =>
handleSetEnvironment('image-installer', checked)
}
aria-label="Bare metal installer checkbox"
id="checkbox-image-installer"
name="Bare metal installer"
data-testid="checkbox-image-installer"
/>
</FormGroup>
</FormGroup>
);
};

1
src/Components/ImagesTable/ImageLinkDirect.js
View file

@ -36,6 +36,7 @@ const ImageLinkDirect = ({ imageId, isExpired, isInClonesTable }) => {
const fileExtensions = {
vsphere: '.vmdk',
'vsphere-ova': '.ova',
'guest-image': '.qcow2',
'image-installer': '.iso',
};

3
src/Components/ImagesTable/Target.js
View file

@ -12,7 +12,8 @@ const Target = ({ composeId }) => {
aws: 'Amazon Web Services',
azure: 'Microsoft Azure',
gcp: 'Google Cloud Platform',
vsphere: 'VMWare',
vsphere: 'VMWare vSphere',
'vsphere-ova': 'VMWare vSphere',
'guest-image': 'Virtualization - Guest image',
'image-installer': 'Bare metal - Installer',
};

6
src/test/Components/CreateImageWizard/CreateImageWizard.beta.test.js
View file

@ -750,7 +750,7 @@ describe('Click through all steps', () => {
targetEnvironmentsExpandable.click();
await screen.findAllByText('AWS');
await screen.findAllByText('GCP');
await screen.findByText('VMWare (.vmdk)');
await screen.findByText('VMWare vSphere (.ova)');
await screen.findByText('Virtualization - Guest image (.qcow2)');
await screen.findByText('Bare metal - Installer (.iso)');
@ -849,14 +849,14 @@ describe('Click through all steps', () => {
customizations: customizations,
});
id = 'edbae1c2-62bc-42c1-ae0c-3110ab718f58';
} else if (body.image_requests[0].image_type === 'vsphere') {
} else if (body.image_requests[0].image_type === 'vsphere-ova') {
expect(body).toEqual({
distribution: RHEL_8,
image_name: 'MyImageName',
image_requests: [
{
architecture: 'x86_64',
image_type: 'vsphere',
image_type: 'vsphere-ova',
upload_request: {
type: 'aws.s3',
options: {},

6
src/test/Components/CreateImageWizard/CreateImageWizard.test.js
View file

@ -1396,7 +1396,7 @@ describe('Click through all steps', () => {
targetEnvironmentsExpandable.click();
await screen.findAllByText('AWS');
await screen.findAllByText('GCP');
await screen.findByText('VMWare (.vmdk)');
await screen.findByText('VMWare vSphere (.ova)');
await screen.findByText('Virtualization - Guest image (.qcow2)');
await screen.findByText('Bare metal - Installer (.iso)');
@ -1566,14 +1566,14 @@ describe('Click through all steps', () => {
},
});
id = 'edbae1c2-62bc-42c1-ae0c-3110ab718f58';
} else if (body.image_requests[0].image_type === 'vsphere') {
} else if (body.image_requests[0].image_type === 'vsphere-ova') {
expect(body).toEqual({
distribution: RHEL_8,
image_name: 'MyImageName',
image_requests: [
{
architecture: 'x86_64',
image_type: 'vsphere',
image_type: 'vsphere-ova',
upload_request: {
type: 'aws.s3',
options: {},