Show more information in plan status regarding the VMs status

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>
kubev2v · Sep 24, 2024 · 8be9054 · 8be9054
1 parent 4fd036b
commit 8be9054
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 15 deletions.
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
@@ -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}",
@@ -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",
@@ -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",

diff --git a/packages/forklift-console-plugin/src/modules/Plans/views/list/components/VMsProgressCell.tsx b/packages/forklift-console-plugin/src/modules/Plans/views/list/components/VMsProgressCell.tsx
@@ -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();
 
@@ -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>
   );
 };