Merge pull request #4811 from yaacov/vm-wizard-move-name-and-descript…

…ion-to-top Optional initial template for create vm wizard
openshift · Mar 26, 2020 · 71a4851 · 71a4851
2 parents 212878d + 24af3bd
commit 71a4851
Show file tree

Hide file tree

Showing 14 changed files with 251 additions and 119 deletions.
diff --git a/frontend/packages/kubevirt-plugin/src/components/create-vm-wizard/create-vm-wizard.tsx b/frontend/packages/kubevirt-plugin/src/components/create-vm-wizard/create-vm-wizard.tsx
@@ -15,7 +15,12 @@ import { Location } from 'history';
 import { match as RouterMatch } from 'react-router';
 import { withReduxID } from '../../utils/redux/common';
 import { DataVolumeModel, VirtualMachineModel } from '../../models';
-import { TEMPLATE_TYPE_BASE, TEMPLATE_TYPE_LABEL, TEMPLATE_TYPE_VM } from '../../constants/vm';
+import {
+  TEMPLATE_TYPE_BASE,
+  TEMPLATE_TYPE_LABEL,
+  TEMPLATE_TYPE_VM,
+  VMWizardMode,
+} from '../../constants/vm';
 import { getResource } from '../../utils';
 import { EnhancedK8sMethods } from '../../k8s/enhancedK8sMethods/enhancedK8sMethods';
 import { cleanupAndGetResults, getResults } from '../../k8s/enhancedK8sMethods/k8sMethodsUtils';
@@ -322,6 +327,7 @@ const wizardDispatchToProps = (dispatch, props) => ({
         data: {
           isCreateTemplate: props.isCreateTemplate,
           isProviderImport: props.isProviderImport,
+          userTemplateName: props.userTemplateName,
         },
         dataIDReferences: props.dataIDReferences,
       }),
@@ -357,7 +363,6 @@ export const CreateVMWizardPageComponent: React.FC<CreateVMWizardPageComponentPr
   flags,
 }) => {
   const activeNamespace = match && match.params && match.params.ns;
-  const path = (match && match.path) || '';
   const search = location && location.search;
 
   const resources = [
@@ -386,6 +391,10 @@ export const CreateVMWizardPageComponent: React.FC<CreateVMWizardPageComponentPr
     );
   }
 
+  const searchParams = new URLSearchParams(search);
+  const userMode = searchParams.get('mode') || VMWizardMode.VM;
+  const userTemplateName = (userMode === VMWizardMode.VM && searchParams.get('template')) || '';
+
   const dataIDReferences = makeIDReferences(resources);
 
   dataIDReferences[VMWizardProps.activeNamespace] = ['UI', 'activeNamespace'];
@@ -394,8 +403,9 @@ export const CreateVMWizardPageComponent: React.FC<CreateVMWizardPageComponentPr
   return (
     <Firehose resources={resources} doNotConnectToState>
       <CreateVMWizard
-        isCreateTemplate={!path.includes('/virtualmachines/')}
-        isProviderImport={new URLSearchParams(search).get('mode') === 'import'}
+        isCreateTemplate={userMode === VMWizardMode.TEMPLATE}
+        isProviderImport={userMode === VMWizardMode.IMPORT}
+        userTemplateName={userTemplateName}
         dataIDReferences={dataIDReferences}
         reduxID={reduxID}
         onClose={() => history.goBack()}

diff --git a/...ugin/src/components/create-vm-wizard/redux/initial-state/vm-settings-tab-initial-state.ts b/...ugin/src/components/create-vm-wizard/redux/initial-state/vm-settings-tab-initial-state.ts
@@ -1,29 +1,29 @@
 import { OrderedSet } from 'immutable';
 import { CommonData, VMSettingsField, VMWizardProps } from '../../types';
-import { asHidden, asRequired } from '../../utils/utils';
+import { asDisabled, asHidden, asRequired } from '../../utils/utils';
 import { ProvisionSource } from '../../../../constants/vm/provision-source';
 import { getProviders } from '../../provider-definitions';
 import { InitialStepStateGetter, VMSettings } from './types';
 
 export const vmSettingsOrder = {
-  [VMSettingsField.PROVIDER]: 0,
-  [VMSettingsField.USER_TEMPLATE]: 1,
-  [VMSettingsField.PROVISION_SOURCE_TYPE]: 2,
-  [VMSettingsField.CONTAINER_IMAGE]: 3,
-  [VMSettingsField.IMAGE_URL]: 4,
-  [VMSettingsField.OPERATING_SYSTEM]: 5,
-  [VMSettingsField.FLAVOR]: 6,
-  [VMSettingsField.MEMORY]: 7,
-  [VMSettingsField.CPU]: 8,
-  [VMSettingsField.WORKLOAD_PROFILE]: 9,
-  [VMSettingsField.NAME]: 10,
-  [VMSettingsField.DESCRIPTION]: 11,
+  [VMSettingsField.NAME]: 0,
+  [VMSettingsField.DESCRIPTION]: 1,
+  [VMSettingsField.USER_TEMPLATE]: 2,
+  [VMSettingsField.PROVIDER]: 3,
+  [VMSettingsField.PROVISION_SOURCE_TYPE]: 4,
+  [VMSettingsField.CONTAINER_IMAGE]: 5,
+  [VMSettingsField.IMAGE_URL]: 6,
+  [VMSettingsField.OPERATING_SYSTEM]: 7,
+  [VMSettingsField.FLAVOR]: 8,
+  [VMSettingsField.MEMORY]: 9,
+  [VMSettingsField.CPU]: 10,
+  [VMSettingsField.WORKLOAD_PROFILE]: 11,
   [VMSettingsField.START_VM]: 12,
 };
 
 export const getInitialVmSettings = (data: CommonData): VMSettings => {
   const {
-    data: { isCreateTemplate, isProviderImport },
+    data: { isCreateTemplate, isProviderImport, userTemplateName },
   } = data;
 
   const hiddenByProvider = asHidden(isProviderImport, VMWizardProps.isProviderImport);
@@ -36,6 +36,8 @@ export const getInitialVmSettings = (data: CommonData): VMSettings => {
     : [ProvisionSource.PXE, ProvisionSource.URL, ProvisionSource.CONTAINER, ProvisionSource.DISK]
   ).map((source) => source.getValue());
 
+  const isVM = !isCreateTemplate && !isProviderImport;
+
   const fields = {
     [VMSettingsField.NAME]: {
       isRequired: asRequired(true),
@@ -44,6 +46,9 @@ export const getInitialVmSettings = (data: CommonData): VMSettings => {
     [VMSettingsField.DESCRIPTION]: {},
     [VMSettingsField.USER_TEMPLATE]: {
       isHidden: hiddenByProviderOrTemplate,
+      isDisabled: asDisabled(!!userTemplateName, VMWizardProps.userTemplateName),
+      initialized: !(isVM && userTemplateName),
+      value: userTemplateName || undefined,
     },
     [VMSettingsField.PROVIDER]: {
       isRequired: asRequired(isProviderImport),

diff --git a/.../components/create-vm-wizard/redux/stateUpdate/vmSettings/vm-settings-tab-state-update.ts b/.../components/create-vm-wizard/redux/stateUpdate/vmSettings/vm-settings-tab-state-update.ts
@@ -5,6 +5,7 @@ import {
   hasVMSettingsValueChanged,
   iGetProvisionSource,
   iGetVmSettingValue,
+  iGetVmSettingAttribute,
 } from '../../../selectors/immutable/vm-settings';
 import { VMSettingsField, VMWizardProps } from '../../../types';
 import { InternalActionType, UpdateOptions } from '../../types';
@@ -22,6 +23,42 @@ import { windowsToolsStorage } from '../../initial-state/storage-tab-initial-sta
 import { getStorages } from '../../../selectors/selectors';
 import { prefillVmTemplateUpdater } from './prefill-vm-template-state-update';
 
+export const selectUserTemplateOnLoadedUpdater = (options: UpdateOptions) => {
+  const { id, dispatch, getState } = options;
+  const state = getState();
+
+  if (iGetVmSettingAttribute(state, id, VMSettingsField.USER_TEMPLATE, 'initialized')) {
+    return;
+  }
+
+  if (!options.changedCommonData.has(VMWizardProps.userTemplates)) {
+    return;
+  }
+
+  const userTemplateName = iGetCommonData(state, id, VMWizardProps.userTemplateName);
+  if (!userTemplateName) {
+    return;
+  }
+
+  const userTemplates = iGetLoadedCommonData(state, id, VMWizardProps.userTemplates);
+  const isUserTemplateValid = userTemplates?.find(
+    (template) => iGetName(template) === userTemplateName,
+  );
+
+  if (!isUserTemplateValid) {
+    return;
+  }
+
+  dispatch(
+    vmWizardInternalActions[InternalActionType.UpdateVmSettings](id, {
+      [VMSettingsField.USER_TEMPLATE]: {
+        initialized: true,
+        value: userTemplateName,
+      },
+    }),
+  );
+};
+
 export const selectedUserTemplateUpdater = (options: UpdateOptions) => {
   const { id, prevState, dispatch, getState } = options;
   const state = getState();
@@ -149,6 +186,7 @@ export const updateVmSettingsState = (options: UpdateOptions) =>
     ...(iGetCommonData(options.getState(), options.id, VMWizardProps.isProviderImport)
       ? getProviders().map((provider) => provider.getStateUpdater)
       : []),
+    selectUserTemplateOnLoadedUpdater,
     selectedUserTemplateUpdater,
     provisioningSourceUpdater,
     flavorUpdater,

diff --git a/...rt-plugin/src/components/create-vm-wizard/redux/validations/vm-settings-tab-validation.ts b/...rt-plugin/src/components/create-vm-wizard/redux/validations/vm-settings-tab-validation.ts
@@ -44,6 +44,7 @@ import { vmSettingsOrder } from '../initial-state/vm-settings-tab-initial-state'
 import { TemplateValidations } from '../../../../utils/validations/template/template-validations';
 import { combineIntegerValidationResults } from '../../../../utils/validations/template/utils';
 import { getValidationUpdate } from './utils';
+
 import { getTemplateValidations } from '../../selectors/template';
 
 const validateVm: VmSettingsValidator = (field, options) => {
@@ -80,10 +81,18 @@ const validateUserTemplate: VmSettingsValidator = (field, options) => {
   if (!userTemplateName) {
     return null;
   }
+
   const userTemplate = iGetLoadedCommonData(state, id, VMWizardProps.userTemplates, List()).find(
     (template) => iGetName(template) === userTemplateName,
   );
 
+  if (!userTemplate) {
+    return asValidationObject(
+      "Can't verify template, template is missing",
+      ValidationErrorType.Error,
+    );
+  }
+
   return validateUserTemplateProvisionSource(userTemplate && userTemplate.toJSON());
 };
 

diff --git a/...s/kubevirt-plugin/src/components/create-vm-wizard/tabs/vm-settings-tab/user-templates.tsx b/...s/kubevirt-plugin/src/components/create-vm-wizard/tabs/vm-settings-tab/user-templates.tsx
@@ -16,7 +16,14 @@ import { iGetName } from '../../selectors/immutable/selectors';
 import { iGetFieldValue } from '../../selectors/immutable/vm-settings';
 
 export const UserTemplates: React.FC<UserTemplatesProps> = React.memo(
-  ({ userTemplateField, userTemplates, commonTemplates, onChange, openshiftFlag }) => {
+  ({
+    userTemplateField,
+    forceSingleUserTemplateName,
+    userTemplates,
+    commonTemplates,
+    onChange,
+    openshiftFlag,
+  }) => {
     const data = iGetLoadedData(userTemplates);
     const names: string[] =
       data &&
@@ -28,6 +35,39 @@ export const UserTemplates: React.FC<UserTemplatesProps> = React.memo(
     const hasUserTemplates = sortedNames.length > 0;
     const hasFieldValue = typeof iGetFieldValue(userTemplateField) === 'undefined';
 
+    const optionUserTemplate = forceSingleUserTemplateName && (
+      <>
+        <FormSelectOption
+          key={forceSingleUserTemplateName}
+          value={forceSingleUserTemplateName}
+          label={forceSingleUserTemplateName}
+        />
+      </>
+    );
+
+    const optionNoTemplatesAvailable = !forceSingleUserTemplateName && !hasUserTemplates && (
+      <FormSelectOption
+        key={NO_TEMPLATE_AVAILABLE}
+        value=""
+        label={openshiftFlag ? NO_TEMPLATE_AVAILABLE : NO_OPENSHIFT_TEMPLATES}
+      />
+    );
+
+    const optionsList = !forceSingleUserTemplateName && hasUserTemplates && (
+      <>
+        <FormSelectOption
+          key={SELECT_TEMPLATE}
+          value=""
+          label={SELECT_TEMPLATE}
+          isDisabled={!hasFieldValue}
+        />
+        <FormSelectOption key={NO_TEMPLATE} value="" label={NO_TEMPLATE} />
+        {sortedNames.map((name) => (
+          <FormSelectOption key={name} value={name} label={name} />
+        ))}
+      </>
+    );
+
     return (
       <FormFieldRow
         field={userTemplateField}
@@ -43,27 +83,9 @@ export const UserTemplates: React.FC<UserTemplatesProps> = React.memo(
       >
         <FormField isDisabled={!hasUserTemplates}>
           <FormSelect onChange={nullOnEmptyChange(onChange, VMSettingsField.USER_TEMPLATE)}>
-            {hasUserTemplates && (
-              <>
-                <FormSelectOption
-                  key={SELECT_TEMPLATE}
-                  value=""
-                  label={SELECT_TEMPLATE}
-                  isDisabled={!hasFieldValue}
-                />
-                <FormSelectOption key={NO_TEMPLATE} value="" label={NO_TEMPLATE} />
-              </>
-            )}
-            {!hasUserTemplates && (
-              <FormSelectOption
-                key={NO_TEMPLATE_AVAILABLE}
-                value=""
-                label={openshiftFlag ? NO_TEMPLATE_AVAILABLE : NO_OPENSHIFT_TEMPLATES}
-              />
-            )}
-            {sortedNames.map((name) => (
-              <FormSelectOption key={name} value={name} label={name} />
-            ))}
+            {optionUserTemplate}
+            {optionNoTemplatesAvailable}
+            {optionsList}
           </FormSelect>
         </FormField>
       </FormFieldRow>
@@ -77,6 +99,7 @@ export const UserTemplates: React.FC<UserTemplatesProps> = React.memo(
 );
 
 type UserTemplatesProps = {
+  forceSingleUserTemplateName: string;
   userTemplateField: any;
   userTemplates: any;
   commonTemplates: any;

diff --git a/.../kubevirt-plugin/src/components/create-vm-wizard/tabs/vm-settings-tab/vm-settings-tab.tsx b/.../kubevirt-plugin/src/components/create-vm-wizard/tabs/vm-settings-tab/vm-settings-tab.tsx
@@ -48,6 +48,7 @@ export class VMSettingsTabComponent extends React.Component<VMSettingsTabCompone
 
   render() {
     const {
+      userTemplateName,
       userTemplates,
       commonTemplates,
       provisionSourceStorage,
@@ -59,6 +60,26 @@ export class VMSettingsTabComponent extends React.Component<VMSettingsTabCompone
 
     return (
       <FormFieldForm isReview={isReview}>
+        <FormFieldMemoRow
+          field={this.getField(VMSettingsField.NAME)}
+          fieldType={FormFieldType.TEXT}
+        >
+          <FormField>
+            <TextInput onChange={this.onChange(VMSettingsField.NAME)} />
+          </FormField>
+        </FormFieldMemoRow>
+        <FormFieldMemoRow
+          field={this.getField(VMSettingsField.DESCRIPTION)}
+          fieldType={FormFieldType.TEXT_AREA}
+        >
+          <FormField>
+            <TextArea
+              onChange={this.onChange(VMSettingsField.DESCRIPTION)}
+              className="kubevirt-create-vm-modal__description"
+            />
+          </FormField>
+        </FormFieldMemoRow>
+
         <FormFieldMemoRow
           key={VMSettingsField.PROVIDER}
           field={this.getField(VMSettingsField.PROVIDER)}
@@ -88,6 +109,7 @@ export class VMSettingsTabComponent extends React.Component<VMSettingsTabCompone
           <UserTemplates
             key={VMSettingsField.USER_TEMPLATE}
             userTemplateField={this.getField(VMSettingsField.USER_TEMPLATE)}
+            forceSingleUserTemplateName={userTemplateName}
             userTemplates={userTemplates}
             commonTemplates={commonTemplates}
             openshiftFlag={openshiftFlag}
@@ -149,25 +171,6 @@ export class VMSettingsTabComponent extends React.Component<VMSettingsTabCompone
           onChange={this.props.onFieldChange}
         />
 
-        <FormFieldMemoRow
-          field={this.getField(VMSettingsField.NAME)}
-          fieldType={FormFieldType.TEXT}
-        >
-          <FormField>
-            <TextInput onChange={this.onChange(VMSettingsField.NAME)} />
-          </FormField>
-        </FormFieldMemoRow>
-        <FormFieldMemoRow
-          field={this.getField(VMSettingsField.DESCRIPTION)}
-          fieldType={FormFieldType.TEXT_AREA}
-        >
-          <FormField>
-            <TextArea
-              onChange={this.onChange(VMSettingsField.DESCRIPTION)}
-              className="kubevirt-create-vm-modal__description"
-            />
-          </FormField>
-        </FormFieldMemoRow>
         <FormFieldMemoRow
           field={this.getField(VMSettingsField.START_VM)}
           fieldType={FormFieldType.INLINE_CHECKBOX}
@@ -188,6 +191,7 @@ export class VMSettingsTabComponent extends React.Component<VMSettingsTabCompone
 const stateToProps = (state, { wizardReduxID }) => ({
   vmSettings: iGetVmSettings(state, wizardReduxID),
   commonTemplates: iGetCommonData(state, wizardReduxID, VMWizardProps.commonTemplates),
+  userTemplateName: iGetCommonData(state, wizardReduxID, VMWizardProps.userTemplateName),
   userTemplates: iGetCommonData(state, wizardReduxID, VMWizardProps.userTemplates),
   openshiftFlag: iGetCommonData(state, wizardReduxID, VMWizardProps.openshiftFlag),
   provisionSourceStorage: iGetProvisionSourceStorage(state, wizardReduxID),
@@ -199,6 +203,7 @@ type VMSettingsTabComponentProps = {
   vmSettings: any;
   provisionSourceStorage: VMWizardStorage;
   commonTemplates: any;
+  userTemplateName: string;
   userTemplates: any;
   isReview: boolean;
   openshiftFlag: boolean;