🐾 Add a fast Create Plan page - step 1

packages/eslint-plugin/cspell.wordlist.txt

@@ -66,3 +66,4 @@ multiqueue
 filesystems
 bootloader
 typeahead
+immer

packages/forklift-console-plugin/locales/en/plugin__forklift-console-plugin.json

@@ -6,6 +6,7 @@
   "{{groupCount}} Groups": "{{groupCount}} Groups",
   "{{name}} Details": "{{name}} Details",
   "{{selectedLength}} hosts selected.": "{{selectedLength}} hosts selected.",
+  "{{vmCount}} VMs selected ": "{{vmCount}} VMs selected ",
   "{{vmDone}} of {{vmCount}} VMs migrated": "{{vmDone}} of {{vmCount}} VMs migrated",
   "24 hours": "24 hours",
   "404: Not Found": "404: Not Found",
@@ -57,10 +58,13 @@
   "Copied": "Copied",
   "Copy": "Copy",
   "Create a migration plan and select VMs from the source provider for migration.": "Create a migration plan and select VMs from the source provider for migration.",
+  "Create and edit": "Create and edit",
+  "Create and start": "Create and start",
   "Create by using the form or manually entering YAML or JSON definitions, Provider CR stores attributes that enable MTV to connect to and interact with the source and target providers.": "Create by using the form or manually entering YAML or JSON definitions, Provider CR stores attributes that enable MTV to connect to and interact with the source and target providers.",
   "Create NetworkMap": "Create NetworkMap",
   "Create new provider": "Create new provider",
   "Create plan": "Create plan",
+  "Create Plan": "Create Plan",
   "Create provider": "Create provider",
   "Create Provider": "Create Provider",
   "Create StorageMap": "Create StorageMap",
@@ -191,6 +195,7 @@
   "Maximum number of concurrent VM migrations. Default value is 20.": "Maximum number of concurrent VM migrations. Default value is 20.",
   "Message": "Message",
   "Message: {{message}}": "Message: {{message}}",
+  "Migrate": "Migrate",
   "Migrating virtualization workloads is a multi-step process. <2>Learn more</2>.": "Migrating virtualization workloads is a multi-step process. <2>Learn more</2>.",
   "Migration network maps are used to map network interfaces between source and target virtualization providers, at least one source and one target provider must be available in order to create a migration storage map, <2>Learn more</2>.": "Migration network maps are used to map network interfaces between source and target virtualization providers, at least one source and one target provider must be available in order to create a migration storage map, <2>Learn more</2>.",
   "Migration networks maps are used to map network interfaces between source and target workloads.": "Migration networks maps are used to map network interfaces between source and target workloads.",
@@ -281,6 +286,7 @@
   "Password": "Password",
   "Path": "Path",
   "Persistent TPM/EFI": "Persistent TPM/EFI",
+  "Plan name": "Plan name",
   "Plans": "Plans",
   "Plans for virtualization": "Plans for virtualization",
   "Please choose a NetworkAttachmentDefinition for default data transfer.": "Please choose a NetworkAttachmentDefinition for default data transfer.",

packages/forklift-console-plugin/package.json

@@ -52,18 +52,21 @@
     "@types/jsonpath": "^0.2.0",
     "copy-webpack-plugin": "^11.0.0",
     "css-loader": "^6.7.1",
+    "immer": "^10.0.3",
     "mini-svg-data-uri": "^1.4.4",
     "react-linkify": "^1.0.0-alpha",
     "style-loader": "^3.3.1",
     "terser-webpack-plugin": "^5.3.6",
     "ts-loader": "^9.3.1",
     "tsconfig-paths-webpack-plugin": "^4.0.0",
     "typescript": "^4.7.4",
+    "use-immer": "^0.9.0",
+    "uuid": "^9.0.1",
     "webpack": "^5.79.0",
     "webpack-cli": "^5.0.2",
     "webpack-dev-server": "^4.7.4"
   },
   "msw": {
     "workerDirectory": "dist"
   }
-}
+}

packages/forklift-console-plugin/src/modules/Providers/dynamic-plugin.ts

@@ -1,6 +1,12 @@
-import { ProviderModel, ProviderModelGroupVersionKind } from '@kubev2v/types';
+import {
+  PlanModel,
+  PlanModelGroupVersionKind,
+  ProviderModel,
+  ProviderModelGroupVersionKind,
+} from '@kubev2v/types';
 import { EncodedExtension } from '@openshift/dynamic-plugin-sdk';
 import {
+  ContextProvider,
   CreateResource,
   ModelMetadata,
   ResourceDetailsPage,
@@ -13,6 +19,10 @@ export const exposedModules: ConsolePluginMetadata['exposedModules'] = {
   ProvidersListPage: './modules/Providers/views/list/ProvidersListPage',
   ProviderDetailsPage: './modules/Providers/views/details/ProviderDetailsPage',
   ProvidersCreatePage: './modules/Providers/views/create/ProvidersCreatePage',
+  ProvidersCreateVmMigrationContext:
+    './modules/Providers/views/migrate/ProvidersCreateVmMigrationContext',
+  ProvidersCreateVmMigrationPage:
+    './modules/Providers/views/migrate/ProvidersCreateVmMigrationPage',
 };
 
 export const extensions: EncodedExtension[] = [
@@ -71,4 +81,23 @@ export const extensions: EncodedExtension[] = [
       ...ProviderModel,
     },
   } as EncodedExtension<CreateResource>,
+  {
+    type: 'console.context-provider',
+    properties: {
+      provider: { $codeRef: 'ProvidersCreateVmMigrationContext.CreateVmMigrationProvider' },
+      useValueHook: {
+        $codeRef: 'ProvidersCreateVmMigrationContext.useCreateVmMigrationContextValue',
+      },
+    },
+  } as EncodedExtension<ContextProvider>,
+  {
+    type: 'console.resource/create',
+    properties: {
+      component: {
+        $codeRef: 'ProvidersCreateVmMigrationPage',
+      },
+      model: PlanModelGroupVersionKind,
+      ...PlanModel,
+    },
+  } as EncodedExtension<CreateResource>,
 ];

packages/forklift-console-plugin/src/modules/Providers/views/create/templates/index.ts

@@ -1,4 +1,5 @@
 // @index(['./*', /style/g], f => `export * from '${f.path}';`)
+export * from './planTemplate';
 export * from './providerTemplate';
 export * from './secretTemplate';
 // @endindex

packages/forklift-console-plugin/src/modules/Providers/views/create/templates/planTemplate.ts

@@ -0,0 +1,14 @@
+import { V1beta1Plan } from '@kubev2v/types';
+
+export const planTemplate: V1beta1Plan = {
+  apiVersion: 'forklift.konveyor.io/v1beta1',
+  kind: 'Plan',
+  metadata: {
+    name: undefined,
+    namespace: undefined,
+  },
+  spec: {
+    map: {},
+    targetNamespace: '',
+  },
+};

packages/forklift-console-plugin/src/modules/Providers/views/details/tabs/VirtualMachines/components/MigrationAction.tsx

@@ -0,0 +1,39 @@
+import React, { FC } from 'react';
+import { useHistory } from 'react-router';
+import { getResourceUrl } from 'src/modules/Providers/utils';
+import { useCreateVmMigrationData } from 'src/modules/Providers/views/migrate';
+import { useForkliftTranslation } from 'src/utils/i18n';
+
+import { PlanModelRef, V1beta1Provider } from '@kubev2v/types';
+import { Button, ToolbarItem } from '@patternfly/react-core';
+
+import { VmData } from './VMCellProps';
+
+export const MigrationAction: FC<{
+  selectedVms: VmData[];
+  provider: V1beta1Provider;
+}> = ({ selectedVms, provider }) => {
+  const { t } = useForkliftTranslation();
+  const history = useHistory();
+  const namespace = provider?.metadata?.namespace;
+  const planListURL = getResourceUrl({
+    reference: PlanModelRef,
+    namespace,
+    namespaced: namespace !== undefined,
+  });
+  const { setData } = useCreateVmMigrationData();
+  return (
+    <ToolbarItem>
+      <Button
+        variant="secondary"
+        onClick={() => {
+          setData({ selectedVms, provider });
+          history.push(`${planListURL}/~new`);
+        }}
+        isDisabled={!selectedVms?.length}
+      >
+        {t('Migrate')}
+      </Button>
+    </ToolbarItem>
+  );
+};

packages/forklift-console-plugin/src/modules/Providers/views/details/tabs/VirtualMachines/components/ProviderVirtualMachinesList.tsx

@@ -1,6 +1,6 @@
 import React, { FC, useState } from 'react';
 import { RouteComponentProps } from 'react-router-dom';
-import { withIdBasedSelection } from 'src/components/page/withSelection';
+import { GlobalActionWithSelection, withIdBasedSelection } from 'src/components/page/withSelection';
 import { ProviderData } from 'src/modules/Providers/utils';
 import { useForkliftTranslation } from 'src/utils/i18n';
 
@@ -16,6 +16,7 @@ import { Concern } from '@kubev2v/types';
 
 import { useInventoryVms } from '../utils/useInventoryVms';
 
+import { MigrationAction } from './MigrationAction';
 import { VmData } from './VMCellProps';
 
 export interface ProviderVirtualMachinesListProps extends RouteComponentProps {
@@ -29,8 +30,10 @@ export interface ProviderVirtualMachinesListProps extends RouteComponentProps {
   pageId: string;
 }
 
+export const toId = (item: VmData) =>
+  item.vm.providerType === 'openshift' ? item.vm.uid : item.vm.id;
 const PageWithSelection = withIdBasedSelection<VmData>({
-  toId: (item: VmData) => (item.vm.providerType === 'openshift' ? item.vm.uid : item.vm.id),
+  toId,
   canSelect: (item: VmData) => !!item,
 });
 
@@ -47,6 +50,16 @@ export const ProviderVirtualMachinesList: FC<ProviderVirtualMachinesListProps> =
   const [userSettings] = useState(() => loadUserSettings({ pageId }));
 
   const [vmData, loading] = useInventoryVms(obj, loaded, loadError);
+  const actions: FC<GlobalActionWithSelection<VmData>>[] = [
+    ({ selectedIds }) => (
+      <MigrationAction
+        {...{
+          provider: obj?.provider,
+          selectedVms: vmData.filter((data) => selectedIds.includes(toId(data))),
+        }}
+      />
+    ),
+  ];
 
   return (
     <PageWithSelection
@@ -62,6 +75,7 @@ export const ProviderVirtualMachinesList: FC<ProviderVirtualMachinesListProps> =
         features: EnumFilter,
       }}
       extraSupportedMatchers={[concernsMatcher, featuresMatcher]}
+      GlobalActionToolbarItems={actions}
     />
   );
 };

packages/forklift-console-plugin/src/modules/Providers/views/migrate/PlansCreateForm.tsx

@@ -0,0 +1,70 @@
+import React, { useState } from 'react';
+import { useForkliftTranslation } from 'src/utils/i18n';
+
+import { ProviderModelGroupVersionKind } from '@kubev2v/types';
+import { ResourceLink } from '@openshift-console/dynamic-plugin-sdk';
+import { DescriptionList, Form, FormGroup, TextInput } from '@patternfly/react-core';
+
+import { DetailsItem } from '../../utils';
+
+import { PageAction, setPlanName } from './actions';
+import { CreateVmMigrationPageState } from './reducer';
+
+export const PlansCreateForm = ({
+  state: { newPlan: plan, validation },
+  dispatch,
+}: {
+  state: CreateVmMigrationPageState;
+  dispatch: (action: PageAction<unknown, unknown>) => void;
+}) => {
+  const { t } = useForkliftTranslation();
+  const [isNameEdited, setIsNameEdited] = useState(false);
+  return (
+    <DescriptionList
+      className="forklift-create-provider-edit-section"
+      columnModifier={{
+        default: '1Col',
+      }}
+    >
+      {isNameEdited ? (
+        <Form>
+          <FormGroup
+            label={t('Plan name')}
+            isRequired
+            fieldId="planName"
+            validated={validation.name}
+          >
+            <TextInput
+              isRequired
+              type="text"
+              id="planName"
+              value={plan.metadata.name}
+              validated={validation.name}
+              onChange={(value) => dispatch(setPlanName(value?.trim() ?? '', []))}
+            />
+          </FormGroup>
+        </Form>
+      ) : (
+        <DetailsItem
+          title={t('Plan name')}
+          content={plan.metadata.name}
+          onEdit={() => setIsNameEdited(true)}
+        />
+      )}
+      <DetailsItem
+        title={t('Source provider')}
+        content={
+          <ResourceLink
+            name={plan?.spec?.provider?.source?.name}
+            namespace={plan?.spec?.provider?.source?.namespace}
+            groupVersionKind={ProviderModelGroupVersionKind}
+          />
+        }
+      />
+      <DetailsItem
+        title={t('{{vmCount}} VMs selected ', { vmCount: plan.spec.vms.length })}
+        content={''}
+      />
+    </DescriptionList>
+  );
+};