Skip to content

kubevirt: add Storage Tab to CreateVMWizard #2896

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
openshift-merge-robot merged 5 commits into from
Oct 10, 2019
Merged

kubevirt: add Storage Tab to CreateVMWizard #2896

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
e021ffc
kubevirt: add Networking Tab to CreateVMWizard
suomiy Sep 18, 2019
64b1ccd
kubevirt: remove background color from ResultsRow
suomiy Oct 7, 2019
121c1b0
kubevirt: add storage types
suomiy Sep 19, 2019
0d69dff
kubevirt: refactor createDiskRow to DiskModal
suomiy Sep 27, 2019
7275a26
kubevirt: add Storage Tab to CreateVMWizard
suomiy Oct 3, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions ...tend/packages/kubevirt-plugin/src/components/create-vm-wizard/create-vm-wizard-footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,7 @@ const CreateVMWizardFooterComponent: React.FC<CreateVMWizardFooterComponentProps
const isLastStep = activeStepID === VMWizardTab.RESULT;

const isNextButtonDisabled = isLocked;
const isReviewButtonDisabled = isLocked;
const isBackButtonDisabled = isFirstStep || isLocked;

return (
Expand Down Expand Up @@ -85,6 +86,7 @@ const CreateVMWizardFooterComponent: React.FC<CreateVMWizardFooterComponentProps
{!isFinishingStep && (
<Button
variant={ButtonVariant.secondary}
isDisabled={isReviewButtonDisabled}
onClick={() => {
const jumpToStepID =
(isValid &&
Expand Down
200 changes: 151 additions & 49 deletions frontend/packages/kubevirt-plugin/src/components/create-vm-wizard/create-vm-wizard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,25 +3,23 @@ import * as _ from 'lodash';
import { connect } from 'react-redux';
import { createVm, createVmTemplate } from 'kubevirt-web-ui-components';
import { Wizard } from '@patternfly/react-core';
import {
PersistentVolumeClaimModel,
StorageClassModel,
TemplateModel,
} from '@console/internal/models';
import { TemplateModel } from '@console/internal/models';
import {
Firehose,
history,
makeQuery,
makeReduxID,
units,
} from '@console/internal/components/utils';
import { k8sGet, TemplateKind } from '@console/internal/module/k8s';
import { withReduxID } from '../../utils/redux/common';
import { VirtualMachineModel } from '../../models';
import {
DataVolumeModel,
NetworkAttachmentDefinitionModel,
VirtualMachineModel,
} from '../../models';
import { TEMPLATE_TYPE_BASE, TEMPLATE_TYPE_LABEL, TEMPLATE_TYPE_VM } from '../../constants/vm';
TEMPLATE_TYPE_BASE,
TEMPLATE_TYPE_LABEL,
TEMPLATE_TYPE_VM,
VolumeType,
} from '../../constants/vm';
import { getResource } from '../../utils';
import { EnhancedK8sMethods } from '../../k8s/enhancedK8sMethods/enhancedK8sMethods';
import { cleanupAndGetResults, getResults } from '../../k8s/enhancedK8sMethods/k8sMethodsUtils';
Expand All @@ -33,28 +31,132 @@ import {
} from '../../utils/immutable';
import { getTemplateOperatingSystems } from '../../selectors/vm-template/advanced';
import { ResultsWrapper } from '../../k8s/enhancedK8sMethods/types';
import { NetworkWrapper } from '../../k8s/wrapper/vm/network-wrapper';
import { NetworkInterfaceWrapper } from '../../k8s/wrapper/vm/network-interface-wrapper';
import { VolumeWrapper } from '../../k8s/wrapper/vm/volume-wrapper';
import { DiskWrapper } from '../../k8s/wrapper/vm/disk-wrapper';
import { DataVolumeWrapper } from '../../k8s/wrapper/vm/data-volume-wrapper';
import {
getDefaultSCAccessMode,
getDefaultSCVolumeMode,
} from '../../selectors/config-map/sc-defaults';
import { getStorageClassConfigMap } from '../../k8s/requests/config-map/storage-class';
import {
ChangedCommonData,
CommonData,
CreateVMWizardComponentProps,
DetectCommonDataChanges,
VMSettingsField,
VMWizardNetwork,
VMWizardProps,
VMWizardStorage,
VMWizardTab,
} from './types';
import { CREATE_VM, CREATE_VM_TEMPLATE, TabTitleResolver } from './strings/strings';
import { vmWizardActions } from './redux/actions';
import { ActionType } from './redux/types';
import { iGetCommonData, iGetCreateVMWizardTabs } from './selectors/immutable/selectors';
import { isStepLocked, isStepPending, isStepValid } from './selectors/immutable/wizard-selectors';
import { VMSettingsTab } from './tabs/vm-settings-tab/vm-settings-tab';
import { ResourceLoadErrors } from './resource-load-errors';
import { CreateVMWizardFooter } from './create-vm-wizard-footer';
import { VMSettingsTab } from './tabs/vm-settings-tab/vm-settings-tab';
import { NetworkingTab } from './tabs/networking-tab/networking-tab';
import { ReviewTab } from './tabs/review-tab/review-tab';
import { ResultTab } from './tabs/result-tab/result-tab';
import { StorageTab } from './tabs/storage-tab/storage-tab';

import './create-vm-wizard.scss';

// TODO remove after moving create functions from kubevirt-web-ui-components
/** *
* kubevirt-web-ui-components InterOP
*/
const kubevirtInterOP = async ({
activeNamespace,
vmSettings,
networks,
storages,
templates,
}: {
activeNamespace: string;
vmSettings: any;
networks: VMWizardNetwork[];
storages: VMWizardStorage[];
templates: TemplateKind[];
}) => {
const clonedVMsettings = _.cloneDeep(vmSettings);
const clonedNetworks = _.cloneDeep(networks);
const clonedStorages = _.cloneDeep(storages);

clonedVMsettings.namespace = { value: activeNamespace };
const operatingSystems = getTemplateOperatingSystems(templates);
const osField = clonedVMsettings[VMSettingsField.OPERATING_SYSTEM];
const osID = osField.value;
osField.value = operatingSystems.find(({ id }) => id === osID);

const interOPNetworks = clonedNetworks.map(({ networkInterface, network }) => {
const networkInterfaceWrapper = NetworkInterfaceWrapper.initialize(networkInterface);
const networkWrapper = NetworkWrapper.initialize(network);

return {
name: networkInterfaceWrapper.getName(),
mac: networkInterfaceWrapper.getMACAddress(),
binding: networkInterfaceWrapper.getTypeValue(),
isBootable: networkInterfaceWrapper.isFirstBootableDevice(),
network: networkWrapper.getReadableName(),
networkType: networkWrapper.getTypeValue(),
templateNetwork: {
network,
interface: networkInterface,
},
};
});

const storageClassConfigMap = await getStorageClassConfigMap({ k8sGet });

const interOPStorages = clonedStorages.map(({ disk, volume, dataVolume }) => {
const diskWrapper = DiskWrapper.initialize(disk);
const volumeWrapper = VolumeWrapper.initialize(volume);
const dataVolumeWrapper = dataVolume && DataVolumeWrapper.initialize(dataVolume);

return {
name: diskWrapper.getName(),
isBootable: diskWrapper.isFirstBootableDevice(),
storageType:
volumeWrapper.getType() === VolumeType.DATA_VOLUME && dataVolume ? 'datavolume' : undefined,
templateStorage: {
volume,
disk,
dataVolumeTemplate: dataVolumeWrapper
? DataVolumeWrapper.mergeWrappers(
dataVolumeWrapper,
DataVolumeWrapper.initializeFromSimpleData({
accessModes:
dataVolumeWrapper.getAccessModes() ||
getDefaultSCAccessMode(
storageClassConfigMap,
dataVolumeWrapper.getStorageClassName(),
),
volumeMode:
dataVolumeWrapper.getVolumeMode() ||
getDefaultSCVolumeMode(
storageClassConfigMap,
dataVolumeWrapper.getStorageClassName(),
),
}),
).asResource()
: undefined,
},
};
});

return {
interOPVMSettings: clonedVMsettings,
interOPNetworks,
interOPStorages,
};
};

export class CreateVMWizardComponent extends React.Component<CreateVMWizardComponentProps> {
private isClosed = false;

Expand Down Expand Up @@ -87,39 +189,40 @@ export class CreateVMWizardComponent extends React.Component<CreateVMWizardCompo
this.props.onClose();
};

finish() {
finish = async () => {
this.props.onResultsChanged({ errors: [], requestResults: [] }, null, true, true); // reset
const create = this.props.isCreateTemplate ? createVmTemplate : createVm;

const enhancedK8sMethods = new EnhancedK8sMethods();
const vmSettings = iGetIn(this.props.stepData, [VMWizardTab.VM_SETTINGS, 'value']).toJS();
const networks = immutableListToShallowJS<VMWizardNetwork>(
iGetIn(this.props.stepData, [VMWizardTab.NETWORKING, 'value']),
);
const storages = immutableListToShallowJS(
iGetIn(this.props.stepData, [VMWizardTab.STORAGE, 'value']),
);
const templates = immutableListToShallowJS(
concatImmutableLists(
iGetLoadedData(this.props[VMWizardProps.commonTemplates]),
iGetLoadedData(this.props[VMWizardProps.userTemplates]),
),
);

// TODO remove after moving create functions from kubevirt-web-ui-components
/** *
* BEGIN kubevirt-web-ui-components InterOP
*/
vmSettings.namespace = { value: this.props.activeNamespace };
const operatingSystems = getTemplateOperatingSystems(templates);
const osField = vmSettings[VMSettingsField.OPERATING_SYSTEM];
const osID = osField.value;
osField.value = operatingSystems.find(({ id }) => id === osID);
/**
* END kubevirt-web-ui-components InterOP
*/
const { interOPVMSettings, interOPNetworks, interOPStorages } = await kubevirtInterOP({
vmSettings,
networks,
storages,
templates,
activeNamespace: this.props.activeNamespace,
});

create(
enhancedK8sMethods,
templates,
vmSettings,
iGetIn(this.props.stepData, [VMWizardTab.NETWORKS, 'value']).toJS(),
iGetIn(this.props.stepData, [VMWizardTab.STORAGE, 'value']).toJS(),
immutableListToShallowJS(iGetLoadedData(this.props[VMWizardProps.persistentVolumeClaims])),
interOPVMSettings,
interOPNetworks,
interOPStorages,
[],
units,
)
.then(() => getResults(enhancedK8sMethods))
Expand All @@ -128,7 +231,7 @@ export class CreateVMWizardComponent extends React.Component<CreateVMWizardCompo
this.props.onResultsChanged({ mainError, requestResults, errors }, isValid, true, false),
)
.catch((e) => console.error(e)); // eslint-disable-line no-console
}
};

render() {
const { isCreateTemplate, reduxID, stepData } = this.props;
Expand All @@ -148,12 +251,24 @@ export class CreateVMWizardComponent extends React.Component<CreateVMWizardCompo
</>
),
},
// {
// id: VMWizardTab.NETWORKS,
// },
// {
// id: VMWizardTab.STORAGE,
// },
{
id: VMWizardTab.NETWORKING,
component: (
<>
<ResourceLoadErrors wizardReduxID={reduxID} />
<NetworkingTab wizardReduxID={reduxID} />
</>
),
},
{
id: VMWizardTab.STORAGE,
component: (
<>
<ResourceLoadErrors wizardReduxID={reduxID} />
<StorageTab wizardReduxID={reduxID} />
</>
),
},
{
id: VMWizardTab.REVIEW,
component: <ReviewTab wizardReduxID={reduxID} />,
Expand Down Expand Up @@ -240,10 +355,10 @@ const wizardDispatchToProps = (dispatch, props) => ({
);
},
onClose: () => {
dispatch(vmWizardActions[ActionType.Dispose](props.reduxID, props));
if (props.onClose) {
props.onClose();
}
dispatch(vmWizardActions[ActionType.Dispose](props.reduxID, props));
},
});

Expand Down Expand Up @@ -274,19 +389,6 @@ export const CreateVMWizardPageComponent: React.FC<CreateVMWizardPageComponentPr
prop: VMWizardProps.commonTemplates,
matchLabels: { [TEMPLATE_TYPE_LABEL]: TEMPLATE_TYPE_BASE },
}),
getResource(NetworkAttachmentDefinitionModel, {
namespace: activeNamespace,
prop: VMWizardProps.networkConfigs,
}),
getResource(StorageClassModel, { prop: VMWizardProps.storageClasses }),
getResource(PersistentVolumeClaimModel, {
namespace: activeNamespace,
prop: VMWizardProps.persistentVolumeClaims,
}),
getResource(DataVolumeModel, {
namespace: activeNamespace,
prop: VMWizardProps.dataVolumes,
}),
];

const dataIDReferences = resources.reduce((acc, resource) => {
Expand Down
10 changes: 8 additions & 2 deletions frontend/packages/kubevirt-plugin/src/components/create-vm-wizard/form/form-field-row.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { getFieldHelp, getFieldId, getFieldTitle } from '../utils/vm-settings-ta
import { iGetFieldValue, isFieldHidden, isFieldRequired } from '../selectors/immutable/vm-settings';
import { iGet, iGetIn, iGetIsLoaded } from '../../../utils/immutable';
import { FormRow } from '../../form/form-row';
import { ValidationObject } from '../../../utils/validations/types';
import { FormFieldContext } from './form-field-context';
import { FormFieldType } from './form-field';
import { FormFieldReviewContext } from './form-field-review-context';
Expand All @@ -18,6 +19,7 @@ export const FormFieldRow: React.FC<FieldFormRowProps> = ({
fieldType,
children,
loadingResources,
validation,
}) => {
const fieldKey = iGet(field, 'key');

Expand All @@ -41,9 +43,10 @@ export const FormFieldRow: React.FC<FieldFormRowProps> = ({
}
help={getFieldHelp(fieldKey, iGetFieldValue(field))}
isRequired={isFieldRequired(field)}
validationMessage={iGetIn(field, ['validation', 'message'])}
validationType={iGetIn(field, ['validation', 'type'])}
validationMessage={validation ? undefined : iGetIn(field, ['validation', 'message'])}
validationType={validation ? undefined : iGetIn(field, ['validation', 'type'])}
isLoading={loading}
validation={validation}
>
<FormFieldContext.Provider value={{ field, fieldType, isLoading: loading }}>
{children}
Expand All @@ -60,12 +63,15 @@ type FieldFormRowProps = {
fieldType: FormFieldType;
children?: React.ReactNode;
loadingResources?: { [k: string]: any };
validation?: ValidationObject;
};

export const FormFieldMemoRow = React.memo(
FormFieldRow,
(prevProps, nextProps) =>
prevProps.field === nextProps.field &&
prevProps.fieldType === nextProps.fieldType &&
_.get(prevProps.validation, ['type']) === _.get(nextProps.validation, ['type']) &&
_.get(prevProps.validation, ['message']) === _.get(nextProps.validation, ['message']) &&
isLoading(prevProps.loadingResources) === isLoading(nextProps.loadingResources),
);
9 changes: 5 additions & 4 deletions frontend/packages/kubevirt-plugin/src/components/create-vm-wizard/form/form-field.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ const setSupported = (fieldType: FormFieldType, supportedTypes: Set<FormFieldTyp
supportedTypes.has(fieldType) ? value : undefined;

// renders only when props change (shallow compare)
export const FormField: React.FC<FormFieldProps> = ({ children, isDisabled }) => {
export const FormField: React.FC<FormFieldProps> = ({ children, isDisabled, value }) => {
return (
<FormFieldContext.Consumer>
{({
Expand All @@ -49,16 +49,16 @@ export const FormField: React.FC<FormFieldProps> = ({ children, isDisabled }) =>
isLoading: boolean;
}) => {
const set = setSupported.bind(undefined, fieldType);
const value = iGetFieldValue(field);
const val = value || iGetFieldValue(field);
const key = iGetFieldKey(field);
const disabled = isDisabled || isFieldDisabled(field) || isLoading;

return inject(
children,
_.omitBy(
{
value: hasValue.has(fieldType) ? value || getPlaceholder(key) || '' : undefined,
isChecked: set(hasIsChecked, value),
value: hasValue.has(fieldType) ? val || getPlaceholder(key) || '' : undefined,
isChecked: set(hasIsChecked, val),
isDisabled: set(hasIsDisabled, disabled),
disabled: set(hasDisabled, disabled),
isRequired: set(hasIsRequired, isFieldRequired(field)),
Expand All @@ -77,4 +77,5 @@ export const FormField: React.FC<FormFieldProps> = ({ children, isDisabled }) =>
type FormFieldProps = {
children: React.ReactNode;
isDisabled?: boolean;
value?: any;
};
Loading