Add individual disk transfer modal

Signed-off-by: yaacov <kobi.zamir@gmail.com>
kubev2v · Jun 6, 2024 · d76d70f · d76d70f
1 parent 7a85e54
commit d76d70f
Show file tree

Hide file tree

Showing 5 changed files with 98 additions and 1 deletion.
diff --git a/packages/forklift-console-plugin/locales/en/plugin__forklift-console-plugin.json b/packages/forklift-console-plugin/locales/en/plugin__forklift-console-plugin.json
@@ -319,6 +319,7 @@
   "Password": "Password",
   "Path": "Path",
   "Persistent TPM/EFI": "Persistent TPM/EFI",
+  "Phase": "Phase",
   "Pipeline status": "Pipeline status",
   "Plan details": "Plan details",
   "Plan name": "Plan name",
@@ -436,6 +437,7 @@
   "Target namespace": "Target namespace",
   "Target namespace.": "Target namespace.",
   "Target provider": "Target provider",
+  "Tasks": "Tasks",
   "Template": "Template",
   "Tenant": "Tenant",
   "The certificate is not a valid PEM-encoded X.509 certificate": "The certificate is not a valid PEM-encoded X.509 certificate",
@@ -468,6 +470,7 @@
   "Total memory:": "Total memory:",
   "Total virtual machines": "Total virtual machines",
   "Total: {{length}}": "Total: {{length}}",
+  "Transfer": "Transfer",
   "Transfer Network": "Transfer Network",
   "True": "True",
   "Type": "Type",

diff --git a/packages/forklift-console-plugin/src/modules/Plans/views/details/PlanDetailsPage.style.css b/packages/forklift-console-plugin/src/modules/Plans/views/details/PlanDetailsPage.style.css
@@ -124,6 +124,11 @@
   cursor: pointer;
 }
 
+
+.forklift-page-plan-details-vm-tasks {
+  padding: 0;
+}
+
 .forklift-page-plan-details-vm-status__section-header {
   margin-bottom: var(--pf-global--spacer--xs);
   margin-top: var(--pf-global--spacer--md);

diff --git a/...lans/views/details/tabs/VirtualMachines/Migration/MigrationVirtualMachinesRowExtended.tsx b/...lans/views/details/tabs/VirtualMachines/Migration/MigrationVirtualMachinesRowExtended.tsx
@@ -1,19 +1,29 @@
 import React from 'react';
 import SectionHeading from 'src/components/headers/SectionHeading';
+import { useModal } from 'src/modules/Providers/modals';
 import { useForkliftTranslation } from 'src/utils/i18n';
 
 import { RowProps, TableComposable, Tbody, Td, Th, Thead, Tr } from '@kubev2v/common';
 import { IoK8sApiBatchV1Job } from '@kubev2v/types';
 import { ResourceLink, Timestamp } from '@openshift-console/dynamic-plugin-sdk';
 import Status from '@openshift-console/dynamic-plugin-sdk/lib/app/components/status/Status';
-import { Flex, FlexItem, PageSection, ProgressStep, ProgressStepper } from '@patternfly/react-core';
+import {
+  Button,
+  Flex,
+  FlexItem,
+  PageSection,
+  ProgressStep,
+  ProgressStepper,
+} from '@patternfly/react-core';
 
+import { PipelineTasksModal } from '../modals';
 import { VMData } from '../types';
 
 import { getIcon, getVariant } from './MigrationVirtualMachinesRow';
 
 export const MigrationVirtualMachinesRowExtended: React.FC<RowProps<VMData>> = (props) => {
   const { t } = useForkliftTranslation();
+  const { showModal } = useModal();
 
   const pipeline = props.resourceData.statusVM?.pipeline;
   const conditions = props.resourceData.statusVM?.conditions;
@@ -198,6 +208,7 @@ export const MigrationVirtualMachinesRowExtended: React.FC<RowProps<VMData>> = (
           <Tr>
             <Th>{t('Name')}</Th>
             <Th>{t('Description')}</Th>
+            <Th>{t('Tasks')}</Th>
             <Th>{t('Started at')}</Th>
             <Th>{t('Error')}</Th>
           </Tr>
@@ -218,6 +229,17 @@ export const MigrationVirtualMachinesRowExtended: React.FC<RowProps<VMData>> = (
                 {p?.name}
               </Td>
               <Td>{p?.description}</Td>
+              <Td>
+                {p?.tasks?.length > 0 && (
+                  <Button
+                    className="forklift-page-plan-details-vm-tasks"
+                    variant="link"
+                    onClick={() => showModal(<PipelineTasksModal name={p?.name} tasks={p.tasks} />)}
+                  >
+                    {p.tasks.length} Tasks
+                  </Button>
+                )}
+              </Td>
               <Td>
                 <Timestamp timestamp={p?.started} />
               </Td>

diff --git a/...plugin/src/modules/Plans/views/details/tabs/VirtualMachines/modals/PipelineTasksModal.tsx b/...plugin/src/modules/Plans/views/details/tabs/VirtualMachines/modals/PipelineTasksModal.tsx
@@ -0,0 +1,66 @@
+import React from 'react';
+import { useModal } from 'src/modules/Providers/modals';
+import { useForkliftTranslation } from 'src/utils/i18n';
+
+import { TableComposable, Tbody, Td, Th, Thead, Tr } from '@kubev2v/common';
+import { V1beta1PlanStatusMigrationVmsPipeline } from '@kubev2v/types';
+import { Timestamp } from '@openshift-console/dynamic-plugin-sdk';
+import { Modal, ModalVariant } from '@patternfly/react-core';
+
+export interface PipelineTasksModalProps {
+  name: string;
+  tasks: V1beta1PlanStatusMigrationVmsPipeline[];
+}
+
+export const PipelineTasksModal: React.FC<PipelineTasksModalProps> = ({ name, tasks }) => {
+  const { t } = useForkliftTranslation();
+  const { toggleModal } = useModal();
+
+  return (
+    <Modal
+      title={name}
+      position="top"
+      variant={ModalVariant.large}
+      isOpen={true}
+      onClose={toggleModal}
+    >
+      <TableComposable variant="compact">
+        <Thead>
+          <Tr>
+            <Th>{t('Name')}</Th>
+            <Th>{t('Phase')}</Th>
+            <Th>{t('Transfer')}</Th>
+            <Th>{t('Started at')}</Th>
+            <Th>{t('Error')}</Th>
+          </Tr>
+        </Thead>
+        <Tbody>
+          {(tasks || []).map((p) => (
+            <Tr key={p?.name}>
+              <Td>{p?.name}</Td>
+              <Td>{p?.phase}</Td>
+              <Td>{getTransferProgress(p)}</Td>
+              <Td>
+                <Timestamp timestamp={p?.started} />
+              </Td>
+              <Td>{p?.error?.reasons}</Td>
+            </Tr>
+          ))}
+        </Tbody>
+      </TableComposable>
+    </Modal>
+  );
+};
+
+const getTransferProgress = (diskTransfer) => {
+  if (!diskTransfer || !diskTransfer?.progress) {
+    return { completed: '-', total: '-' };
+  }
+
+  const { completed, total } = diskTransfer.progress;
+
+  const completeString = completed !== undefined ? completed : '-';
+  const totalString = total !== undefined ? total : '-';
+
+  return `${completeString} / ${totalString} ${diskTransfer.annotations?.unit || '-'}`;
+};
diff --git a/...klift-console-plugin/src/modules/Plans/views/details/tabs/VirtualMachines/modals/index.ts b/...klift-console-plugin/src/modules/Plans/views/details/tabs/VirtualMachines/modals/index.ts
@@ -1,4 +1,5 @@
 // @index(['./*', /style/g], f => `export * from '${f.path}';`)
 export * from './MigrationVMsCancelModal';
+export * from './PipelineTasksModal';
 export * from './PlanVMsDeleteModal';
 // @endindex