Skip to content

Commit

Permalink
Add individual disk transfer modal
Browse files Browse the repository at this point in the history
Signed-off-by: yaacov <[email protected]>
  • Loading branch information
yaacov committed Jun 6, 2024
1 parent 7a85e54 commit d76d70f
Show file tree
Hide file tree
Showing 5 changed files with 98 additions and 1 deletion.
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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",
Expand Down Expand Up @@ -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",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
Original file line number Diff line number Diff line change
@@ -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;
Expand Down Expand Up @@ -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>
Expand All @@ -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>
Expand Down
Original file line number Diff line number Diff line change
@@ -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 || '-'}`;
};
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
// @index(['./*', /style/g], f => `export * from '${f.path}';`)
export * from './MigrationVMsCancelModal';
export * from './PipelineTasksModal';
export * from './PlanVMsDeleteModal';
// @endindex

0 comments on commit d76d70f

Please sign in to comment.