Skip to content

Commit

Permalink
Show more information in plan status regarding the VMs status
Browse files Browse the repository at this point in the history
Reference: #1282
Reference: #1286

For Running/completed Plans, show more information in status
columns of plans list table for the VMs status.
When clicking on the status label, a popover with the VMs status is
displayed now instead of

In plans list page -> status column: no information about the status of the completed/canceled VMs is displayed for running/completed plans.

So instead of clicking on the status label for jumping to the VMs table,
we now display a popover with more VMs information regarding failed, succeded,
canceled VMs

Signed-off-by: Sharon Gratch <sgratch@redhat.com>
  • Loading branch information
sgratch committed Sep 24, 2024
1 parent 4fd036b commit 8be9054
Show file tree
Hide file tree
Showing 2 changed files with 53 additions and 15 deletions.
Original file line number Diff line number Diff line change
@@ -1,13 +1,16 @@
{
"{{Canceled}} canceled": "{{Canceled}} canceled",
"{{canceled}} VMs canceled": "{{canceled}} VMs canceled",
"{{completed}} / {{total}}": "{{completed}} / {{total}}",
"{{dateLabel}} Failed: {{value}}": "{{dateLabel}} Failed: {{value}}",
"{{dateLabel}} Running: {{value}}": "{{dateLabel}} Running: {{value}}",
"{{dateLabel}} Succeeded: {{value}}": "{{dateLabel}} Succeeded: {{value}}",
"{{error}} VMs failed": "{{error}} VMs failed",
"{{label}} field is missing from the secret data.": "{{label}} field is missing from the secret data.",
"{{name}} Details": "{{name}} Details",
"{{selectedLength}} hosts selected.": "{{selectedLength}} hosts selected.",
"{{success}} of {{total}} VMs migrated": "{{success}} of {{total}} VMs migrated",
"{{success}} VMs succeeded": "{{success}} VMs succeeded",
"{{total}} VMs": "{{total}} VMs",
"{{vmCount}} VMs selected ": "{{vmCount}} VMs selected ",
"{children}": "{children}",
Expand Down Expand Up @@ -441,6 +444,7 @@
"Start migration": "Start migration",
"Started at": "Started at",
"Status": "Status",
"Status details": "Status details",
"Storage": "Storage",
"Storage and network mappings": "Storage and network mappings",
"Storage classes": "Storage classes",
Expand Down Expand Up @@ -490,6 +494,7 @@
"Token": "Token",
"Total CPU count:": "Total CPU count:",
"Total memory:": "Total memory:",
"Total of {{total}} VMs are planned for migration:": "Total of {{total}} VMs are planned for migration:",
"Total virtual machines": "Total virtual machines",
"Total: {{length}}": "Total: {{length}}",
"Transfer Network": "Transfer Network",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,22 +5,46 @@ import {
getPhaseLabel,
getPlanPhase,
getPlanProgressVariant,
MigrationVmsCounts,
} from 'src/modules/Plans/utils';
import { getResourceUrl } from 'src/modules/Providers/utils';
import { useForkliftTranslation } from 'src/utils/i18n';

import { PlanModelRef } from '@kubev2v/types';
import {
Button,
Popover,
Progress,
ProgressMeasureLocation,
ProgressSize,
Split,
SplitItem,
} from '@patternfly/react-core';
import { VirtualMachineIcon } from '@patternfly/react-icons';
import { HelpIcon, VirtualMachineIcon } from '@patternfly/react-icons';

import { CellProps } from './CellProps';

type PlanStatusDetailsProps = {
counters: MigrationVmsCounts;
};

const PlanStatusDetails: React.FC<PlanStatusDetailsProps> = (props) => {
const { t } = useForkliftTranslation();

return (
<div>
{t('Total of {{total}} VMs are planned for migration:', props.counters)}
<br />
{t('{{success}} VMs succeeded', props.counters)}
<br />
{t('{{error}} VMs failed', props.counters)}
<br />
{t('{{canceled}} VMs canceled', props.counters)}
<br />
</div>
);
};

export const VMsProgressCell: React.FC<CellProps> = ({ data }) => {
const { t } = useForkliftTranslation();

Expand Down Expand Up @@ -53,19 +77,28 @@ export const VMsProgressCell: React.FC<CellProps> = ({ data }) => {
const progressVariant = getPlanProgressVariant(phase);

return (
<Link to={`${planURL}/vms`}>
<div className="forklift-table__status-cell-progress">
<Progress
width={100}
label={t('{{success}} of {{total}} VMs migrated', counters)}
valueText={t('{{success}} of {{total}} VMs migrated', counters)}
value={counters?.total > 0 ? (100 * counters?.success) / counters?.total : 0}
title={t(phaseLabel)}
size={ProgressSize.sm}
measureLocation={ProgressMeasureLocation.top}
variant={progressVariant}
/>
</div>
</Link>
<div className="forklift-table__status-cell-progress">
<Progress
width={100}
label={
<Link to={`${planURL}/vms`}>{t('{{success}} of {{total}} VMs migrated', counters)}</Link>
}
valueText={t('{{success}} of {{total}} VMs migrated', counters)}
value={counters?.total > 0 ? (100 * counters?.success) / counters?.total : 0}
title={
<Popover
headerContent={<div>{t('Status details')}</div>}
bodyContent={<PlanStatusDetails counters={counters} />}
>
<Button variant="link" isInline>
{t(phaseLabel)} <HelpIcon />
</Button>
</Popover>
}
size={ProgressSize.sm}
measureLocation={ProgressMeasureLocation.top}
variant={progressVariant}
/>
</div>
);
};

0 comments on commit 8be9054

Please sign in to comment.