Skip to content
Permalink
Browse files

Add popup for warm migrations

  • Loading branch information
mzazrivec committed Dec 3, 2019
1 parent e7eaa28 commit aab6fa0bc190c2adf3f4a21136c697580a2d067f
@@ -4,7 +4,12 @@ import { Field, reduxForm } from 'redux-form';
import { Form, Icon } from 'patternfly-react';
import { FormField } from '../../../../../common/forms/FormField';

export const PlanWizardScheduleStep = ({ targetProvider, migration_plan_type_radio, migration_plan_choice_radio }) => (
export const PlanWizardScheduleStep = ({
targetProvider,
migration_plan_type_radio,
migration_plan_choice_radio,
enableWarmMigration
}) => (
<Form className="form-vertical">
<Field
name="migration_plan_type_radio"
@@ -13,14 +18,21 @@ export const PlanWizardScheduleStep = ({ targetProvider, migration_plan_type_rad
label={__('Migration Type')}
inline_label={false}
controlWidth={12}
info={
enableWarmMigration
? null
: __("Warm migration is not possible because one or more selected VMs has disks that can't be pre-copied.")
}
infoIconName="warning-triangle-o"
options={[
{
id: 'migration_type_cold',
name: __('Cold Migration - Source VMs are shut down while all of the VM data is migrated.')
},
{
id: 'migration_type_warm',
name: __('Warm Migration - VM data is iteratively pre-copied. A final, cutover migration is scheduled and run later.') // prettier-ignore
name: __('Warm Migration - VM data is iteratively pre-copied. A final, cutover migration is scheduled and run later.'), // prettier-ignore
disabled: !enableWarmMigration
}
]}
/>
@@ -67,7 +79,8 @@ export const PlanWizardScheduleStep = ({ targetProvider, migration_plan_type_rad
PlanWizardScheduleStep.propTypes = {
targetProvider: PropTypes.string,
migration_plan_type_radio: PropTypes.string,
migration_plan_choice_radio: PropTypes.string
migration_plan_choice_radio: PropTypes.string,
enableWarmMigration: PropTypes.bool
};

export default reduxForm({
@@ -9,6 +9,7 @@ describe('Plan wizard schedule step', () => {
targetProvider="openstack"
migration_plan_type_radio="migration_type_cold"
migration_plan_choice_radio="migration_plan_now"
enableWarmMigration
/>
);
expect(component).toMatchSnapshot();
@@ -20,14 +21,30 @@ describe('Plan wizard schedule step', () => {
targetProvider="openstack"
migration_plan_type_radio="migration_type_cold"
migration_plan_choice_radio="migration_plan_later"
enableWarmMigration
/>
);
expect(component).toMatchSnapshot();
});

it('renders with a info text when warm migration selected', () => {
const component = shallow(
<PlanWizardScheduleStep targetProvider="openstack" migration_plan_type_radio="migration_type_warm" />
<PlanWizardScheduleStep
targetProvider="openstack"
migration_plan_type_radio="migration_type_warm"
enableWarmMigration
/>
);
expect(component).toMatchSnapshot();
});

it('renders with a info text when warm migration is not available', () => {
const component = shallow(
<PlanWizardScheduleStep
targetProvider="openstack"
migration_plan_type_radio="migration_type_cold"
enableWarmMigration={false}
/>
);
expect(component).toMatchSnapshot();
});
@@ -1,5 +1,64 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Plan wizard schedule step renders with a info text when warm migration is not available 1`] = `
<Form
bsClass="form"
className="form-vertical"
componentClass="form"
horizontal={false}
inline={false}
>
<Field
component={[Function]}
controlWidth={12}
info="Warm migration is not possible because one or more selected VMs has disks that can't be pre-copied."
infoIconName="warning-triangle-o"
inline_label={false}
label="Migration Type"
name="migration_plan_type_radio"
options={
Array [
Object {
"id": "migration_type_cold",
"name": "Cold Migration - Source VMs are shut down while all of the VM data is migrated.",
},
Object {
"disabled": true,
"id": "migration_type_warm",
"name": "Warm Migration - VM data is iteratively pre-copied. A final, cutover migration is scheduled and run later.",
},
]
}
type="radio"
/>
<Field
component={[Function]}
help={null}
inline_label={false}
label="Schedule"
name="migration_plan_choice_radio"
options={
Array [
Object {
"id": "migration_plan_later",
"name": "Save migration plan to run later",
},
Object {
"id": "migration_plan_now",
"name": "Start migration immediately",
},
]
}
style={
Object {
"paddingTop": "100px",
}
}
type="radio"
/>
</Form>
`;

exports[`Plan wizard schedule step renders with a info text when warm migration selected 1`] = `
<Form
bsClass="form"
@@ -11,6 +70,8 @@ exports[`Plan wizard schedule step renders with a info text when warm migration
<Field
component={[Function]}
controlWidth={12}
info={null}
infoIconName="warning-triangle-o"
inline_label={false}
label="Migration Type"
name="migration_plan_type_radio"
@@ -21,6 +82,7 @@ exports[`Plan wizard schedule step renders with a info text when warm migration
"name": "Cold Migration - Source VMs are shut down while all of the VM data is migrated.",
},
Object {
"disabled": false,
"id": "migration_type_warm",
"name": "Warm Migration - VM data is iteratively pre-copied. A final, cutover migration is scheduled and run later.",
},
@@ -53,6 +115,8 @@ exports[`Plan wizard schedule step renders with a warning if migrating an OSP pl
<Field
component={[Function]}
controlWidth={12}
info={null}
infoIconName="warning-triangle-o"
inline_label={false}
label="Migration Type"
name="migration_plan_type_radio"
@@ -63,6 +127,7 @@ exports[`Plan wizard schedule step renders with a warning if migrating an OSP pl
"name": "Cold Migration - Source VMs are shut down while all of the VM data is migrated.",
},
Object {
"disabled": false,
"id": "migration_type_warm",
"name": "Warm Migration - VM data is iteratively pre-copied. A final, cutover migration is scheduled and run later.",
},
@@ -123,6 +188,8 @@ exports[`Plan wizard schedule step renders with no warning if migrating an OSP p
<Field
component={[Function]}
controlWidth={12}
info={null}
infoIconName="warning-triangle-o"
inline_label={false}
label="Migration Type"
name="migration_plan_type_radio"
@@ -133,6 +200,7 @@ exports[`Plan wizard schedule step renders with no warning if migrating an OSP p
"name": "Cold Migration - Source VMs are shut down while all of the VM data is migrated.",
},
Object {
"disabled": false,
"id": "migration_type_warm",
"name": "Warm Migration - VM data is iteratively pre-copied. A final, cutover migration is scheduled and run later.",
},
@@ -2,7 +2,10 @@ import { connect } from 'react-redux';
import PlanWizardScheduleStep from './PlanWizardScheduleStep';
import { getCurrentTargetProvider } from '../../PlanWizardSelectors';

const mapStateToProps = ({ overview: { transformationMappings }, form }) => ({
const enableWarmMigration = (allVms, selectedVms) =>
allVms.filter(vm => selectedVms.includes(vm.id)).every(vm => vm.warm_migration_compatible);

const mapStateToProps = ({ planWizardVMStep, overview: { transformationMappings }, form }) => ({
targetProvider: getCurrentTargetProvider(form, transformationMappings),
migration_plan_choice_radio:
form.planWizardScheduleStep &&
@@ -15,7 +18,11 @@ const mapStateToProps = ({ overview: { transformationMappings }, form }) => ({
initialValues: {
migration_plan_choice_radio: 'migration_plan_later',
migration_plan_type_radio: 'migration_type_cold'
}
},
enableWarmMigration: enableWarmMigration(
[...planWizardVMStep.valid_vms, ...planWizardVMStep.invalid_vms, ...planWizardVMStep.conflict_vms],
form.planWizardVMStep.values.selectedVms
)
});

export default connect(mapStateToProps)(PlanWizardScheduleStep);
@@ -19,6 +19,7 @@ export const FormField = ({
maxLength,
maxLengthWarning,
info,
infoIconName,
children,
inline_label,
...props
@@ -61,9 +62,9 @@ export const FormField = ({
break;
case 'radio':
field = options.map(val => (
<div key={val.id}>
<div key={val.id} className={val.disabled ? 'text-muted' : ''}>
<label>
<Field name={input.name} component="input" type="radio" value={val.id} />
<Field name={input.name} component="input" type="radio" value={val.id} disabled={val.disabled} />
{` ${val.name}`}
</label>
<br />
@@ -89,7 +90,7 @@ export const FormField = ({
}
>
<Button bsStyle="link">
<Icon type="pf" name="info" />
<Icon type="pf" name={infoIconName} />
</Button>
</OverlayTrigger>
);
@@ -105,7 +106,8 @@ export const FormField = ({
</Grid.Col>
)}
<Grid.Col sm={Number.parseInt(controlWidth, 10) || 9} id={input.name}>
{!inline_label && <h4>{label}</h4>}
{!inline_label && <div style={{ fontSize: '15px', display: 'inline' }}>{label}</div>}
{renderInfoPopover()}
{renderField()}
{(help || (touched && error) || warning) && (
<Form.HelpBlock>
@@ -134,10 +136,12 @@ FormField.propTypes = {
maxLength: PropTypes.number,
maxLengthWarning: PropTypes.string,
info: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
infoIconName: PropTypes.string,
children: PropTypes.func,
inline_label: PropTypes.bool
};

FormField.defaultProps = {
inline_label: true
inline_label: true,
infoIconName: 'info'
};

0 comments on commit aab6fa0

Please sign in to comment.
You can’t perform that action at this time.