From 857804a21157b6e0915145c1270ababa0eb7d786 Mon Sep 17 00:00:00 2001
From: Sharon Gratch <sgratch@redhat.com>
Date: Mon, 23 Sep 2024 16:48:27 +0300
Subject: [PATCH] Show more information in plan status regarding the VMs status

Reference: https://github.com/kubev2v/forklift-console-plugin/issues/1282
Reference: https://github.com/kubev2v/forklift-console-plugin/issues/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>
---
 .../en/plugin__forklift-console-plugin.json   |  5 ++
 .../views/list/components/VMsProgressCell.tsx | 63 ++++++++++++++-----
 2 files changed, 53 insertions(+), 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
index b11440a28..66a35ece7 100644
--- 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
index 7f6d614a0..a566d8978 100644
--- 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>
   );
 };