kubevirt: Edit VM flavor

frontend/packages/kubevirt-plugin/src/components/edit-button.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react';
+
+export const EditButton: React.FC<EditButtonProps> = (props) => {
+  const { canEdit, onClick, children } = props;
+
+  if (canEdit) {
+    return (
+      <button
+        type="button"
+        className="btn btn-link co-modal-btn-link co-modal-btn-link--left"
+        onClick={onClick}
+      >
+        {children}
+      </button>
+    );
+  }
+
+  return null;
+};
+
+type EditButtonProps = {
+  children: any;
+  canEdit: boolean;
+  onClick: React.MouseEventHandler;
+};

frontend/packages/kubevirt-plugin/src/components/flavor-text.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import * as _ from 'lodash';
+import { convertToBaseValue, humanizeDecimalBytes } from '@console/internal/components/utils';
+import { getFlavor, vCPUCount, getCPU, getMemory, asVM } from '../selectors/vm';
+import { VMLikeEntityKind } from '../types';
+
+export const FlavorText: React.FC<FlavorTextProps> = (props) => {
+  const { vmLike } = props;
+  const vm = asVM(vmLike);
+
+  const flavor = _.capitalize(getFlavor(vmLike));
+
+  const vcpusCount = vCPUCount(getCPU(vm));
+  const vcpusText = `${vcpusCount} vCPU${vcpusCount > 1 ? 's' : ''}`;
+
+  const memoryBase = convertToBaseValue(getMemory(vm));
+  const memoryText = humanizeDecimalBytes(memoryBase).string;
+
+  return <>{`${flavor || ''}${flavor ? ': ' : ''}${vcpusText}, ${memoryText} Memory`}</>;
+};
+
+type FlavorTextProps = {
+  vmLike: VMLikeEntityKind;
+};

frontend/packages/kubevirt-plugin/src/components/modals/delete-device-modal/delete-device-modal.tsx

@@ -9,7 +9,7 @@ import {
 import { k8sPatch } from '@console/internal/module/k8s';
 import { getName } from '@console/shared';
 import { VMLikeEntityKind } from '../../../types';
-import { getVMLikeModel } from '../../../selectors/selectors';
+import { getVMLikeModel } from '../../../selectors/vm';
 import { getRemoveDiskPatches } from '../../../k8s/patches/vm/vm-disk-patches';
 import { getRemoveNicPatches } from '../../../k8s/patches/vm/vm-nic-patches';
 

frontend/packages/kubevirt-plugin/src/components/modals/index.ts

@@ -1,3 +1,5 @@
 export * from './create-vm-wizard';
 export * from './delete-device-modal';
 export * from './modal-resource-launcher';
+export * from './vm-description-modal';
+export * from './vm-flavor-modal';

frontend/packages/kubevirt-plugin/src/components/modals/vm-description-modal/vm-description-modal.tsx

@@ -9,10 +9,12 @@ import {
   ModalComponentProps,
 } from '@console/internal/components/factory';
 import { k8sPatch } from '@console/internal/module/k8s';
+import { getDescription } from '../../../selectors/selectors';
 import { VMLikeEntityKind } from '../../../types';
-import { getDescription, getVMLikeModel } from '../../../selectors/selectors';
+import { getVMLikeModel } from '../../../selectors/vm';
 import { getUpdateDescriptionPatches } from '../../../k8s/patches/vm/vm-patches';
 
+// TODO: should be moved under kubevirt-plugin/src/style.scss
 import './_vm-description-modal.scss';
 
 export const VMDescriptionModal = withHandlePromise((props: VMDescriptionModalProps) => {

frontend/packages/kubevirt-plugin/src/components/modals/vm-flavor-modal/_vm-flavor-modal.scss

@@ -0,0 +1,24 @@
+.kubevirt-vm-flavor-modal__content-custom {
+    height: 20em;
+}
+
+.kubevirt-vm-flavor-modal__content-generic {
+    min-height: 13em;
+    .modal-body {
+        overflow-y: unset; /* Hotfix for PF3 */
+    }
+}
+
+.kubevirt-vm-flavor-modal__form {
+    resize: vertical;  
+}
+
+.kubevirt-vm-flavor-modal__dropdown {
+    .dropdown {
+        width: 100%;
+    }
+}
+
+.kubevirt-vm-flavor-modal__dropdown-button {
+    width: 100%;
+}

frontend/packages/kubevirt-plugin/src/components/modals/vm-flavor-modal/index.ts

@@ -0,0 +1 @@
+export * from './vm-flavor-modal';

frontend/packages/kubevirt-plugin/src/components/modals/vm-flavor-modal/vm-flavor-modal.tsx

@@ -0,0 +1,179 @@
+import * as React from 'react';
+import * as _ from 'lodash';
+import * as classNames from 'classnames';
+import { getResource } from 'kubevirt-web-ui-components';
+import {
+  HandlePromiseProps,
+  withHandlePromise,
+  Dropdown,
+  convertToBaseValue,
+  Firehose,
+} from '@console/internal/components/utils';
+import { TemplateModel } from '@console/internal/models';
+import {
+  createModalLauncher,
+  ModalTitle,
+  ModalBody,
+  ModalComponentProps,
+  ModalFooter,
+} from '@console/internal/components/factory';
+import { k8sPatch, TemplateKind } from '@console/internal/module/k8s';
+import { Form, FormGroup, TextInput } from '@patternfly/react-core';
+import { VMKind, VMLikeEntityKind } from '../../../types';
+import { getFlavor, getMemory, getCPU, isVM, vCPUCount } from '../../../selectors/vm';
+import { selectVM, getFlavors } from '../../../selectors/vm-template/selectors';
+import { getUpdateFlavorPatches } from '../../../k8s/patches/vm/vm-patches';
+import { VirtualMachineModel } from '../../../models';
+import {
+  CUSTOM_FLAVOR,
+  NAMESPACE_OPENSHIFT,
+  TEMPLATE_TYPE_LABEL,
+  TEMPLATE_TYPE_BASE,
+} from '../../../constants';
+import './_vm-flavor-modal.scss';
+
+const MB = 1000 ** 2;
+
+const getId = (field: string) => `vm-flavor-modal-${field}`;
+const dehumanizeMemory = (memory?: string) => {
+  if (!memory) {
+    return null;
+  }
+
+  return convertToBaseValue(memory) / MB;
+};
+
+const VMFlavorModal = withHandlePromise((props: VMFlavornModalProps) => {
+  const {
+    vmLike,
+    templates,
+    inProgress,
+    errorMessage,
+    handlePromise,
+    close,
+    cancel,
+    loadError,
+    loaded,
+  } = props;
+
+  const flattenTemplates = _.get(templates, 'data', []) as TemplateKind[];
+
+  const vmFlavor = getFlavor(vmLike);
+  const flavors = getFlavors(vmLike, flattenTemplates);
+
+  const sourceMemory = isVM(vmLike)
+    ? getMemory(vmLike as VMKind)
+    : getMemory(selectVM(vmLike as TemplateKind));
+
+  const sourceCPURaw = isVM(vmLike)
+    ? getCPU(vmLike as VMKind)
+    : getCPU(selectVM(vmLike as TemplateKind));
+  const sourceCPU = vCPUCount(sourceCPURaw);
+
+  const [flavor, setFlavor] = React.useState(vmFlavor);
+  const [mem, setMem] = React.useState(
+    vmFlavor === CUSTOM_FLAVOR ? dehumanizeMemory(sourceMemory) : 1,
+  );
+  const [cpu, setCpu] = React.useState(vmFlavor === CUSTOM_FLAVOR ? sourceCPU : 1);
+
+  const submit = (e) => {
+    e.preventDefault();
+
+    const patches = getUpdateFlavorPatches(vmLike, flattenTemplates, flavor, cpu, `${mem}M`);
+    if (patches.length === 0) {
+      close();
+    } else {
+      const model = isVM(vmLike) ? VirtualMachineModel : TemplateModel;
+      const promise = k8sPatch(model, vmLike, patches);
+      handlePromise(promise).then(close); // eslint-disable-line promise/catch-or-return
+    }
+  };
+
+  const topClass = classNames('modal-content', {
+    'kubevirt-vm-flavor-modal__content-custom': flavor === CUSTOM_FLAVOR,
+    'kubevirt-vm-flavor-modal__content-generic': flavor !== CUSTOM_FLAVOR,
+  });
+
+  return (
+    <div className={topClass}>
+      <ModalTitle>Edit Flavor</ModalTitle>
+      <ModalBody>
+        <Form onSubmit={submit} className="kubevirt-vm-flavor-modal__form" isHorizontal>
+          <FormGroup label="Flavor" fieldId={getId('flavor')}>
+            <Dropdown
+              items={flavors}
+              id={getId('flavor-dropdown')}
+              onChange={(f) => setFlavor(f)}
+              selectedKey={_.capitalize(flavor) || CUSTOM_FLAVOR}
+              title={_.capitalize(flavor)}
+              className="kubevirt-vm-flavor-modal__dropdown"
+              buttonClassName="kubevirt-vm-flavor-modal__dropdown-button"
+            />
+          </FormGroup>
+
+          {flavor === CUSTOM_FLAVOR && (
+            <React.Fragment>
+              <FormGroup label="CPUs" isRequired fieldId={getId('cpu')}>
+                <TextInput
+                  isRequired
+                  type="number"
+                  id={getId('cpu')}
+                  value={cpu}
+                  onChange={(v) => setCpu(parseInt(v, 10) || 1)}
+                  aria-label="CPU count"
+                />
+              </FormGroup>
+              <FormGroup label="Memory (MB)" isRequired fieldId={getId('memory')}>
+                <TextInput
+                  isRequired
+                  type="number"
+                  id={getId('memory')}
+                  value={mem}
+                  onChange={(v) => setMem(parseInt(v, 10) || 1)}
+                  aria-label="Memory"
+                />
+              </FormGroup>
+            </React.Fragment>
+          )}
+        </Form>
+      </ModalBody>
+      <ModalFooter
+        inProgress={inProgress || !loaded}
+        errorMessage={errorMessage || _.get(loadError, 'message')}
+      >
+        <button type="button" onClick={cancel} className="btn btn-default">
+          Cancel
+        </button>
+        <button type="button" onClick={submit} className="btn btn-primary" id="confirm-action">
+          Save
+        </button>
+      </ModalFooter>
+    </div>
+  );
+});
+
+const VMFlavorModalFirehose = (props) => {
+  const resources = [
+    getResource(TemplateModel, {
+      namespace: NAMESPACE_OPENSHIFT,
+      prop: 'templates',
+      matchLabels: { [TEMPLATE_TYPE_LABEL]: TEMPLATE_TYPE_BASE },
+    }),
+  ];
+
+  return (
+    <Firehose resources={resources}>
+      <VMFlavorModal {...props} />
+    </Firehose>
+  );
+};
+
+export type VMFlavornModalProps = HandlePromiseProps &
+  ModalComponentProps & {
+    vmLike: VMLikeEntityKind;
+    templates?: any;
+    loadError?: any;
+    loaded: boolean;
+  };
+
+export const vmFlavorModal = createModalLauncher(VMFlavorModalFirehose);

frontend/packages/kubevirt-plugin/src/components/vm-disks/create-disk-row.tsx

@@ -13,8 +13,7 @@ import { StorageClassModel } from '@console/internal/models';
 import { getName } from '@console/shared';
 import { useSafetyFirst } from '@console/internal/components/safety-first';
 import { k8sPatch, K8sResourceKind } from '@console/internal/module/k8s';
-import { getVmPreferableDiskBus } from '../../selectors/vm';
-import { getVMLikeModel } from '../../selectors/selectors';
+import { getVmPreferableDiskBus, getVMLikeModel } from '../../selectors/vm';
 import { getAddDiskPatches } from '../../k8s/patches/vm/vm-disk-patches';
 import { VMLikeEntityKind } from '../../types';
 import { ValidationErrorType } from '../../utils/validations/common';

frontend/packages/kubevirt-plugin/src/components/vm-disks/disk-row.tsx

@@ -11,9 +11,8 @@ import { TemplateModel } from '@console/internal/models';
 import { BUS_VIRTIO } from '../../constants/vm';
 import { deleteDeviceModal, DeviceType } from '../modals/delete-device-modal';
 import { VMLikeEntityKind } from '../../types';
-import { getDiskBus } from '../../selectors/vm';
+import { getDiskBus, isVM } from '../../selectors/vm';
 import { VirtualMachineModel } from '../../models';
-import { isVM } from '../../selectors/selectors';
 import { VMDiskRowProps } from './types';
 
 const menuActionDelete = (vmLikeEntity: VMLikeEntityKind, disk): KebabOption => ({

frontend/packages/kubevirt-plugin/src/components/vm-disks/vm-disks.tsx

@@ -12,8 +12,8 @@ import { K8sResourceKind } from '@console/internal/module/k8s';
 import { sortable } from '@patternfly/react-table';
 import { DataVolumeModel } from '../../models';
 import { VMLikeEntityKind } from '../../types';
-import { asVM } from '../../selectors/selectors';
 import {
+  asVM,
   getDataVolumeTemplates,
   getDisks,
   getVolumeDataVolumeName,

frontend/packages/kubevirt-plugin/src/components/vm-nics/create-nic-row.tsx

@@ -8,11 +8,10 @@ import { FormGroup, HelpBlock } from 'patternfly-react';
 import { useSafetyFirst } from '@console/internal/components/safety-first';
 import { k8sPatch, K8sResourceKind } from '@console/internal/module/k8s';
 import { getNamespace } from '@console/shared';
-import { getVMLikeModel } from '../../selectors/selectors';
 import { NetworkAttachmentDefinitionModel } from '../../models';
 import { getAddNicPatches } from '../../k8s/patches/vm/vm-nic-patches';
 import { VMKind, VMLikeEntityKind } from '../../types';
-import { getNetworkChoices } from '../../selectors/vm';
+import { getNetworkChoices, getVMLikeModel } from '../../selectors/vm';
 import { dimensifyRow } from '../../utils/table';
 import { NetworkType } from '../../constants/vm';
 import { getValidationErrorMessage, getValidationErrorType } from '../../utils/validations/common';

frontend/packages/kubevirt-plugin/src/components/vm-nics/nic-row.tsx

@@ -7,7 +7,7 @@ import { BUS_VIRTIO } from '../../constants/vm';
 import { deleteDeviceModal, DeviceType } from '../modals/delete-device-modal';
 import { VMLikeEntityKind } from '../../types';
 import { VirtualMachineModel } from '../../models';
-import { isVM } from '../../selectors/selectors';
+import { isVM } from '../../selectors/vm';
 import { dimensifyRow } from '../../utils/table';
 import { nicTableColumnClasses } from './utils';
 import { VMNicRowProps } from './types';

frontend/packages/kubevirt-plugin/src/components/vm-nics/vm-nics.tsx

@@ -7,8 +7,7 @@ import { useSafetyFirst } from '@console/internal/components/safety-first';
 import { sortable } from '@patternfly/react-table';
 import { createBasicLookup } from '@console/shared';
 import { VMLikeEntityKind } from '../../types';
-import { asVM } from '../../selectors/selectors';
-import { getInterfaces, getNetworks, getVmPreferableNicBus } from '../../selectors/vm';
+import { getInterfaces, getNetworks, getVmPreferableNicBus, asVM } from '../../selectors/vm';
 import { dimensifyHeader } from '../../utils/table';
 import { VMLikeEntityTabProps } from '../vms/types';
 import { NicRow } from './nic-row';

frontend/packages/kubevirt-plugin/src/components/vm-templates/vm-template-details.tsx

@@ -24,14 +24,16 @@ const VMTemplateDetailsFirehose: React.FC<VMTemplateDetailsFirehoseProps> = (pro
     getResource(DataVolumeModel, { namespace, optional: true, prop: 'datavolumes' }),
   ];
 
+  const otherProps = { template };
+
   return (
     <div className="co-m-pane__body">
       {hasDataVolumes ? (
         <Firehose resources={resources}>
-          <VMTemplateDetails template={template} />
+          <VMTemplateDetails {...otherProps} />
         </Firehose>
       ) : (
-        <VMTemplateDetails template={template} hasDataVolumes={hasDataVolumes} />
+        <VMTemplateDetails {...otherProps} hasDataVolumes={hasDataVolumes} />
       )}
     </div>
   );
@@ -65,7 +67,7 @@ const VMTemplateDetails: React.FC<VMTemplateDetailsProps> = (props) => {
             <VMTemplateResourceSummary {...flatResources} canUpdateTemplate={canUpdate} />
           </div>
           <div className="col-sm-6">
-            <VMTemplateDetailsList {...flatResources} />
+            <VMTemplateDetailsList {...flatResources} canUpdateTemplate={canUpdate} />
           </div>
         </div>
       </div>