From 60b5a76b9b9e67b0e3fddbd2e46ae3512a37ebf4 Mon Sep 17 00:00:00 2001
From: Sharon Gratch <sgratch@redhat.com>
Date: Thu, 12 Dec 2024 18:43:20 +0200
Subject: [PATCH] Refactoring: replace plan phases strigs with const enums

Reference: https://github.com/kubev2v/forklift-console-plugin/pull/1395#discussion_r1861292874

Signed-off-by: Sharon Gratch <sgratch@redhat.com>
---
 .../en/plugin__forklift-console-plugin.json   |   6 +
 .../actions/PlanActionsDropdownItems.tsx      |   5 +-
 .../src/modules/Plans/modals/ArchiveModal.tsx |   6 +-
 .../modules/Plans/modals/PlanDeleteModal.tsx  |   6 +-
 .../Plans/utils/constants/planPhases.ts       |  24 ++--
 .../Plans/utils/helpers/getPhaseLabel.ts      |  30 -----
 .../Plans/utils/helpers/getPlanPhase.ts       |  42 +++----
 .../utils/helpers/getPlanProgressVariant.ts   |  14 +--
 .../src/modules/Plans/utils/helpers/index.ts  |   1 -
 .../modules/Plans/utils/types/PlanPhase.ts    |  39 ++++---
 .../components/MigrationsTable.tsx            |  11 +-
 .../details/components/PlanPageHeadings.tsx   |   4 +-
 .../views/list/components/ErrorStatusCell.tsx |   4 +-
 .../views/list/components/PlanStatusCell.tsx  |  12 +-
 .../views/list/components/StatusCell.tsx      |  29 +++++
 .../views/list/components/VMsProgressCell.tsx | 103 ++++++++++++++++++
 16 files changed, 229 insertions(+), 107 deletions(-)
 delete mode 100644 packages/forklift-console-plugin/src/modules/Plans/utils/helpers/getPhaseLabel.ts
 create mode 100644 packages/forklift-console-plugin/src/modules/Plans/views/list/components/StatusCell.tsx
 create mode 100644 packages/forklift-console-plugin/src/modules/Plans/views/list/components/VMsProgressCell.tsx

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 5826254a1..7dbce1ba3 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,15 +1,19 @@
 {
   "{{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}} VM": "{{total}} VM",
   "{{total}} VM_plural": "{{total}} VMs",
+  "{{total}} VMs": "{{total}} VMs",
   "{{vmCount}} VMs selected ": "{{vmCount}} VMs selected ",
   "{children}": "{children}",
   "24 hours": "24 hours",
@@ -454,6 +458,7 @@
   "Start migration": "Start migration",
   "Started at": "Started at",
   "Status": "Status",
+  "Status details": "Status details",
   "Storage": "Storage",
   "Storage classes": "Storage classes",
   "Storage domains": "Storage domains",
@@ -508,6 +513,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/actions/PlanActionsDropdownItems.tsx b/packages/forklift-console-plugin/src/modules/Plans/actions/PlanActionsDropdownItems.tsx
index 3d22954f5..541d95c15 100644
--- a/packages/forklift-console-plugin/src/modules/Plans/actions/PlanActionsDropdownItems.tsx
+++ b/packages/forklift-console-plugin/src/modules/Plans/actions/PlanActionsDropdownItems.tsx
@@ -21,6 +21,7 @@ import {
   isPlanArchived,
   isPlanExecuting,
   PlanData,
+  PlanPhase,
 } from '../utils';
 
 export const PlanActionsDropdownItems = ({ data }: PlanActionsDropdownItemsProps) => {
@@ -93,7 +94,9 @@ export const PlanActionsDropdownItems = ({ data }: PlanActionsDropdownItemsProps
 
     <DropdownItem
       key="archive"
-      isDisabled={!data?.permissions?.canDelete || ['Archived', 'Archiving'].includes(phase)}
+      isDisabled={
+        !data?.permissions?.canDelete || [PlanPhase.Archived, PlanPhase.Archiving].includes(phase)
+      }
       onClick={onClickArchive}
     >
       {t('Archive Plan')}
diff --git a/packages/forklift-console-plugin/src/modules/Plans/modals/ArchiveModal.tsx b/packages/forklift-console-plugin/src/modules/Plans/modals/ArchiveModal.tsx
index e99fbf42c..805573071 100644
--- a/packages/forklift-console-plugin/src/modules/Plans/modals/ArchiveModal.tsx
+++ b/packages/forklift-console-plugin/src/modules/Plans/modals/ArchiveModal.tsx
@@ -8,7 +8,7 @@ import { PlanModel, V1beta1Plan } from '@kubev2v/types';
 import { K8sModel, k8sPatch } from '@openshift-console/dynamic-plugin-sdk';
 import { Alert, Button, Modal, ModalVariant } from '@patternfly/react-core';
 
-import { getPlanPhase } from '../utils';
+import { getPlanPhase, PlanPhase } from '../utils';
 
 /**
  * Props for the DeleteModal component
@@ -70,7 +70,7 @@ export const ArchiveModal: React.FC<ArchiveModalProps> = ({ title, resource, red
   const actions = [
     <Button
       key="confirm"
-      variant={phase === 'Running' ? 'danger' : 'primary'}
+      variant={phase === PlanPhase.Running ? 'danger' : 'primary'}
       onClick={onArchive}
       isLoading={isLoading}
     >
@@ -112,7 +112,7 @@ export const ArchiveModal: React.FC<ArchiveModalProps> = ({ title, resource, red
           </p>
         </ForkliftTrans>
       }
-      {phase === 'Running' && <IsExecutingAlert />}
+      {phase === PlanPhase.Running && <IsExecutingAlert />}
       {alertMessage}
     </Modal>
   );
diff --git a/packages/forklift-console-plugin/src/modules/Plans/modals/PlanDeleteModal.tsx b/packages/forklift-console-plugin/src/modules/Plans/modals/PlanDeleteModal.tsx
index d87c48284..6336879a5 100644
--- a/packages/forklift-console-plugin/src/modules/Plans/modals/PlanDeleteModal.tsx
+++ b/packages/forklift-console-plugin/src/modules/Plans/modals/PlanDeleteModal.tsx
@@ -9,7 +9,7 @@ import { V1beta1Plan } from '@kubev2v/types';
 import { k8sDelete, K8sGroupVersionKind, K8sModel } from '@openshift-console/dynamic-plugin-sdk';
 import { Alert, Button, Modal, ModalVariant } from '@patternfly/react-core';
 
-import { getPlanPhase } from '../utils';
+import { getPlanPhase, PlanPhase } from '../utils';
 
 /**
  * Props for the DeleteModal component
@@ -131,8 +131,8 @@ export const PlanDeleteModal: React.FC<PlanDeleteModalProps> = ({
           Are you sure you want to delete <strong className="co-break-word">{name}</strong>?
         </ForkliftTrans>
       )}
-      {phase === 'Running' && <IsExecutingAlert />}
-      {phase !== 'Archived' && <IsNotArchivedAlert />}
+      {phase === PlanPhase.Running && <IsExecutingAlert />}
+      {phase !== PlanPhase.Archived && <IsNotArchivedAlert />}
       {typeof owner === 'object' && <ItemIsOwnedAlert owner={owner} namespace={namespace} />}
       {alertMessage}
     </Modal>
diff --git a/packages/forklift-console-plugin/src/modules/Plans/utils/constants/planPhases.ts b/packages/forklift-console-plugin/src/modules/Plans/utils/constants/planPhases.ts
index cb6a2b058..0ca05c486 100644
--- a/packages/forklift-console-plugin/src/modules/Plans/utils/constants/planPhases.ts
+++ b/packages/forklift-console-plugin/src/modules/Plans/utils/constants/planPhases.ts
@@ -9,16 +9,16 @@ import { PlanPhase } from '../types';
  * This array is intended to be used for creating filter dropdowns, where users can select a plan phase to filter the results shown.
  */
 export const planPhases: { id: PlanPhase; label: string }[] = [
-  { id: 'Error', label: 'Error' },
-  { id: 'vmError', label: 'VM Error' },
-  { id: 'Unknown', label: 'Unknown' },
-  { id: 'Archiving', label: 'Archiving' },
-  { id: 'Archived', label: 'Archived' },
-  { id: 'Failed', label: 'Failed' },
-  { id: 'Canceled', label: 'Canceled' },
-  { id: 'Succeeded', label: 'Succeeded' },
-  { id: 'Running', label: 'Running' },
-  { id: 'Ready', label: 'Ready' },
-  { id: 'Warning', label: 'Warning' },
-  { id: 'NotReady', label: 'Not Ready' },
+  { id: PlanPhase.Error, label: PlanPhase.Error },
+  { id: PlanPhase.vmError, label: PlanPhase.vmError },
+  { id: PlanPhase.Unknown, label: PlanPhase.Unknown },
+  { id: PlanPhase.Archiving, label: PlanPhase.Archiving },
+  { id: PlanPhase.Archived, label: PlanPhase.Archived },
+  { id: PlanPhase.Failed, label: PlanPhase.Failed },
+  { id: PlanPhase.Canceled, label: PlanPhase.Canceled },
+  { id: PlanPhase.Succeeded, label: PlanPhase.Succeeded },
+  { id: PlanPhase.Running, label: PlanPhase.Running },
+  { id: PlanPhase.Ready, label: PlanPhase.Ready },
+  { id: PlanPhase.Warning, label: PlanPhase.Warning },
+  { id: PlanPhase.NotReady, label: PlanPhase.NotReady },
 ];
diff --git a/packages/forklift-console-plugin/src/modules/Plans/utils/helpers/getPhaseLabel.ts b/packages/forklift-console-plugin/src/modules/Plans/utils/helpers/getPhaseLabel.ts
deleted file mode 100644
index 1c5daa414..000000000
--- a/packages/forklift-console-plugin/src/modules/Plans/utils/helpers/getPhaseLabel.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import { PlanPhase } from '../types';
-
-export const getPhaseLabel = (phase: PlanPhase) => phaseLabels?.[phase] ?? 'Unknown';
-
-const phaseLabels: Record<PlanPhase, string> = {
-  // t('Ready')
-  Ready: 'Ready',
-  // t('Not Ready')
-  NotReady: 'Not Ready',
-  // t('Running')
-  Running: 'Running',
-  // t('Succeeded')
-  Succeeded: 'Succeeded',
-  // t('Canceled')
-  Canceled: 'Canceled',
-  // t('Failed')
-  Failed: 'Failed',
-  // t('Archived')
-  Archived: 'Archived',
-  // t('Archiving')
-  Archiving: 'Archiving',
-  // t('Error')
-  Error: 'Error',
-  // t('Warning')
-  Warning: 'Warning',
-  // t('Some VMs Failed')
-  vmError: 'Some VMs Failed',
-  // t('Unknown')
-  Unknown: 'Unknown',
-};
diff --git a/packages/forklift-console-plugin/src/modules/Plans/utils/helpers/getPlanPhase.ts b/packages/forklift-console-plugin/src/modules/Plans/utils/helpers/getPlanPhase.ts
index c5712f3c8..ce480752c 100644
--- a/packages/forklift-console-plugin/src/modules/Plans/utils/helpers/getPlanPhase.ts
+++ b/packages/forklift-console-plugin/src/modules/Plans/utils/helpers/getPlanPhase.ts
@@ -5,37 +5,37 @@ import { PlanData, PlanPhase } from '../types';
 export const getPlanPhase = (data: PlanData): PlanPhase => {
   const plan = data?.obj;
 
-  if (!plan) return 'Unknown';
+  if (!plan) return PlanPhase.Unknown;
 
   // Check condition type
   const conditions = getConditions(plan);
 
   if (!conditions || conditions?.length < 1) {
-    return 'Unknown';
+    return PlanPhase.Unknown;
   }
 
   // Check for Archived
   if (plan?.spec?.archived && !conditions.includes('Archived')) {
-    return 'Archiving';
+    return PlanPhase.Archiving;
   }
 
   if (conditions.includes('Archived')) {
-    return 'Archived';
+    return PlanPhase.Archived;
   }
 
   // Check for Succeeded
   if (conditions.includes('Succeeded')) {
-    return 'Succeeded';
+    return PlanPhase.Succeeded;
   }
 
   // Check for Canceled
   if (conditions.includes('Canceled')) {
-    return 'Canceled';
+    return PlanPhase.Canceled;
   }
 
   // CHeck for Running
   if (conditions.includes('Executing')) {
-    return 'Running';
+    return PlanPhase.Running;
   }
 
   // Check condition category
@@ -44,18 +44,18 @@ export const getPlanPhase = (data: PlanData): PlanPhase => {
   );
 
   if (isCritical) {
-    return 'Error';
+    return PlanPhase.Error;
   }
 
   // Check for vm errors
   const vmError = plan?.status?.migration?.vms?.find((vm) => vm?.error);
 
   if (conditions.includes('Failed')) {
-    return 'Failed';
+    return PlanPhase.Failed;
   }
 
   if (vmError) {
-    return 'vmError';
+    return PlanPhase.vmError;
   }
 
   // Check condition category
@@ -64,14 +64,14 @@ export const getPlanPhase = (data: PlanData): PlanPhase => {
   );
 
   if (isWarn) {
-    return 'Warning';
+    return PlanPhase.Warning;
   }
 
   if (conditions.includes('Ready')) {
-    return 'Ready';
+    return PlanPhase.Ready;
   }
 
-  return 'NotReady';
+  return PlanPhase.NotReady;
 };
 
 export const canPlanStart = (plan: V1beta1Plan) => {
@@ -107,20 +107,20 @@ export const isPlanEditable = (plan: V1beta1Plan) => {
   const planStatus = getPlanPhase({ obj: plan });
 
   return (
-    planStatus === 'Unknown' ||
-    planStatus === 'Canceled' ||
-    planStatus === 'Error' ||
-    planStatus === 'Failed' ||
-    planStatus === 'vmError' ||
-    planStatus === 'Warning' ||
-    planStatus === 'Ready'
+    planStatus === PlanPhase.Unknown ||
+    planStatus === PlanPhase.Canceled ||
+    planStatus === PlanPhase.Error ||
+    planStatus === PlanPhase.Failed ||
+    planStatus === PlanPhase.vmError ||
+    planStatus === PlanPhase.Warning ||
+    planStatus === PlanPhase.Ready
   );
 };
 
 export const isPlanArchived = (plan: V1beta1Plan) => {
   const planStatus = getPlanPhase({ obj: plan });
 
-  return planStatus === 'Archiving' || planStatus === 'Archived';
+  return planStatus === PlanPhase.Archiving || planStatus === PlanPhase.Archived;
 };
 
 const getConditions = (obj: V1beta1Plan) =>
diff --git a/packages/forklift-console-plugin/src/modules/Plans/utils/helpers/getPlanProgressVariant.ts b/packages/forklift-console-plugin/src/modules/Plans/utils/helpers/getPlanProgressVariant.ts
index 249fa34ad..c8ff964dd 100644
--- a/packages/forklift-console-plugin/src/modules/Plans/utils/helpers/getPlanProgressVariant.ts
+++ b/packages/forklift-console-plugin/src/modules/Plans/utils/helpers/getPlanProgressVariant.ts
@@ -6,17 +6,17 @@ export const getPlanProgressVariant = (phase: PlanPhase): ProgressVariant => {
   let progressVariant;
 
   switch (phase) {
-    case 'Error':
-    case 'Failed':
+    case PlanPhase.Error:
+    case PlanPhase.Failed:
       progressVariant = ProgressVariant.danger;
       break;
-    case 'Unknown':
-    case 'Archived':
-    case 'Canceled':
-    case 'vmError':
+    case PlanPhase.Unknown:
+    case PlanPhase.Archived:
+    case PlanPhase.Canceled:
+    case PlanPhase.vmError:
       progressVariant = ProgressVariant.warning;
       break;
-    case 'Succeeded':
+    case PlanPhase.Succeeded:
       progressVariant = ProgressVariant.success;
       break;
   }
diff --git a/packages/forklift-console-plugin/src/modules/Plans/utils/helpers/index.ts b/packages/forklift-console-plugin/src/modules/Plans/utils/helpers/index.ts
index d2865d95b..f499b37f3 100644
--- a/packages/forklift-console-plugin/src/modules/Plans/utils/helpers/index.ts
+++ b/packages/forklift-console-plugin/src/modules/Plans/utils/helpers/index.ts
@@ -1,7 +1,6 @@
 // @index(['./*', /style/g], f => `export * from '${f.path}';`)
 export * from './getMigrationPhase';
 export * from './getMigrationVmsCounts';
-export * from './getPhaseLabel';
 export * from './getPlanPhase';
 export * from './getPlanProgressVariant';
 // @endindex
diff --git a/packages/forklift-console-plugin/src/modules/Plans/utils/types/PlanPhase.ts b/packages/forklift-console-plugin/src/modules/Plans/utils/types/PlanPhase.ts
index 249f56b65..67d31e063 100644
--- a/packages/forklift-console-plugin/src/modules/Plans/utils/types/PlanPhase.ts
+++ b/packages/forklift-console-plugin/src/modules/Plans/utils/types/PlanPhase.ts
@@ -1,13 +1,26 @@
-export type PlanPhase =
-  | 'Error'
-  | 'vmError'
-  | 'Unknown'
-  | 'Archiving'
-  | 'Archived'
-  | 'Failed'
-  | 'Canceled'
-  | 'Succeeded'
-  | 'Running'
-  | 'Ready'
-  | 'Warning'
-  | 'NotReady';
+export enum PlanPhase {
+  // t('Error')
+  Error = 'Error',
+  // t('Some VMs Failed')
+  vmError = 'Some VMs Failed',
+  // t('Unknown')
+  Unknown = 'Unknown',
+  // t('Archiving')
+  Archiving = 'Archiving',
+  // t('Archived')
+  Archived = 'Archived',
+  // t('Failed')
+  Failed = 'Failed',
+  // t('Canceled')
+  Canceled = 'Canceled',
+  // t('Succeeded')
+  Succeeded = 'Succeeded',
+  // t('Running')
+  Running = 'Running',
+  // t('Ready')
+  Ready = 'Ready',
+  // t('Warning')
+  Warning = 'Warning',
+  // t('Not Ready')
+  NotReady = 'Not Ready',
+}
diff --git a/packages/forklift-console-plugin/src/modules/Plans/views/details/components/MigrationsSection/components/MigrationsTable.tsx b/packages/forklift-console-plugin/src/modules/Plans/views/details/components/MigrationsSection/components/MigrationsTable.tsx
index 39042db1d..d05377bb6 100644
--- a/packages/forklift-console-plugin/src/modules/Plans/views/details/components/MigrationsSection/components/MigrationsTable.tsx
+++ b/packages/forklift-console-plugin/src/modules/Plans/views/details/components/MigrationsSection/components/MigrationsTable.tsx
@@ -1,10 +1,6 @@
 import React from 'react';
 import { ConsoleTimestamp } from 'src/components/ConsoleTimestamp';
-import {
-  getMigrationVmsCounts,
-  getPhaseLabel,
-  getPlanProgressVariant,
-} from 'src/modules/Plans/utils';
+import { getMigrationVmsCounts, getPlanProgressVariant, PlanPhase } from 'src/modules/Plans/utils';
 import { getMigrationPhase } from 'src/modules/Plans/utils/helpers/getMigrationPhase';
 import { useForkliftTranslation } from 'src/utils/i18n';
 
@@ -90,8 +86,9 @@ const VMsLabel: React.FC<{ migration: V1beta1Migration }> = ({ migration }) => {
   const { t } = useForkliftTranslation();
 
   const phase = getMigrationPhase(migration);
-  const phaseLabel = t(getPhaseLabel(phase));
-  const progressVariant = getPlanProgressVariant(phase);
+  const phaseLabel = PlanPhase[phase] ? t(PlanPhase[phase]) : PlanPhase.Unknown;
+
+  const progressVariant = getPlanProgressVariant(PlanPhase[phase]);
   const counters = getMigrationVmsCounts(migration?.status?.vms);
 
   if (!counters?.total || counters.total === 0) {
diff --git a/packages/forklift-console-plugin/src/modules/Plans/views/details/components/PlanPageHeadings.tsx b/packages/forklift-console-plugin/src/modules/Plans/views/details/components/PlanPageHeadings.tsx
index b69cdda74..2e528937b 100644
--- a/packages/forklift-console-plugin/src/modules/Plans/views/details/components/PlanPageHeadings.tsx
+++ b/packages/forklift-console-plugin/src/modules/Plans/views/details/components/PlanPageHeadings.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { PlanActionsDropdown } from 'src/modules/Plans/actions';
 import { PlanStartMigrationModal } from 'src/modules/Plans/modals';
-import { canPlanReStart, canPlanStart, getPlanPhase } from 'src/modules/Plans/utils';
+import { canPlanReStart, canPlanStart, getPlanPhase, PlanPhase } from 'src/modules/Plans/utils';
 import { useGetDeleteAndEditAccessReview } from 'src/modules/Providers/hooks';
 import { useModal } from 'src/modules/Providers/modals';
 import { PageHeadings } from 'src/modules/Providers/utils';
@@ -81,7 +81,7 @@ export const PlanPageHeadings: React.FC<{ name: string; namespace: string }> = (
 
   const handleAlerts = () => {
     // alerts are not relevant to display if plan was completed successfully
-    if (planStatus === 'Succeeded') return;
+    if (planStatus === PlanPhase.Succeeded) return;
 
     if (criticalCondition) {
       alerts.push(
diff --git a/packages/forklift-console-plugin/src/modules/Plans/views/list/components/ErrorStatusCell.tsx b/packages/forklift-console-plugin/src/modules/Plans/views/list/components/ErrorStatusCell.tsx
index 910718e1b..f5ccc91c0 100644
--- a/packages/forklift-console-plugin/src/modules/Plans/views/list/components/ErrorStatusCell.tsx
+++ b/packages/forklift-console-plugin/src/modules/Plans/views/list/components/ErrorStatusCell.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import Linkify from 'react-linkify';
 import { Link } from 'react-router-dom';
-import { getPhaseLabel, getPlanPhase } from 'src/modules/Plans/utils';
+import { getPlanPhase } from 'src/modules/Plans/utils';
 import { getResourceUrl, TableIconCell } from 'src/modules/Providers/utils';
 import { useForkliftTranslation } from 'src/utils/i18n';
 
@@ -16,7 +16,7 @@ export const ErrorStatusCell: React.FC<CellProps> = ({ data }) => {
 
   const { obj: plan } = data;
   const phase = getPlanPhase(data);
-  const phaseLabel = getPhaseLabel(phase);
+  const phaseLabel: string = phase;
 
   const planURL = getResourceUrl({
     reference: PlanModelRef,
diff --git a/packages/forklift-console-plugin/src/modules/Plans/views/list/components/PlanStatusCell.tsx b/packages/forklift-console-plugin/src/modules/Plans/views/list/components/PlanStatusCell.tsx
index b023cd402..0aba151a9 100644
--- a/packages/forklift-console-plugin/src/modules/Plans/views/list/components/PlanStatusCell.tsx
+++ b/packages/forklift-console-plugin/src/modules/Plans/views/list/components/PlanStatusCell.tsx
@@ -6,6 +6,7 @@ import {
   getPlanPhase,
   isPlanArchived,
   isPlanExecuting,
+  PlanPhase,
 } from 'src/modules/Plans/utils';
 import { useModal } from 'src/modules/Providers/modals';
 import { getResourceUrl } from 'src/modules/Providers/utils';
@@ -48,7 +49,8 @@ export const PlanStatusCell: React.FC<CellProps> = ({ data }) => {
   );
 
   const phase = getPlanPhase(data);
-  const isPlanLoading = !isWaitingForCutover && (phase === 'Running' || phase === 'Archiving');
+  const isPlanLoading =
+    !isWaitingForCutover && (phase === PlanPhase.Running || phase === PlanPhase.Archiving);
   const planURL = getResourceUrl({
     reference: PlanModelRef,
     name: plan?.metadata?.name,
@@ -60,7 +62,7 @@ export const PlanStatusCell: React.FC<CellProps> = ({ data }) => {
   // Could possibly use a querystring to dictate a table filter for the list of VMs.
   const vmCountLinkPath = `${planURL}/vms`;
 
-  if (phase === 'Ready') {
+  if (phase === PlanPhase.Ready) {
     return (
       <Button
         variant="secondary"
@@ -88,7 +90,7 @@ export const PlanStatusCell: React.FC<CellProps> = ({ data }) => {
     <Flex alignItems={{ default: 'alignItemsCenter' }} spaceItems={{ default: 'spaceItemsSm' }}>
       {isPlanLoading ? (
         <Spinner size="md" />
-      ) : phase === 'NotReady' ? (
+      ) : phase === PlanPhase.NotReady ? (
         t('Validating...')
       ) : (
         <Label isCompact>{phase}</Label>
@@ -109,8 +111,8 @@ export const PlanStatusCell: React.FC<CellProps> = ({ data }) => {
           </SplitItem>
         )}
 
-        {phase !== 'Running' &&
-          phase !== 'NotReady' &&
+        {phase !== PlanPhase.Running &&
+          phase !== PlanPhase.NotReady &&
           vms?.length &&
           !vmCount?.error &&
           !vmCount.success && (
diff --git a/packages/forklift-console-plugin/src/modules/Plans/views/list/components/StatusCell.tsx b/packages/forklift-console-plugin/src/modules/Plans/views/list/components/StatusCell.tsx
new file mode 100644
index 000000000..ce68a01da
--- /dev/null
+++ b/packages/forklift-console-plugin/src/modules/Plans/views/list/components/StatusCell.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import { getPlanPhase, PlanPhase } from 'src/modules/Plans/utils';
+import { TableIconCell } from 'src/modules/Providers/utils';
+
+import { CellProps } from './CellProps';
+import { ErrorStatusCell } from './ErrorStatusCell';
+import { PlanStatusIcon } from './PlanStatusIcon';
+import { VMsProgressCell } from './VMsProgressCell';
+
+export const StatusCell: React.FC<CellProps> = (props) => {
+  const { data } = props;
+
+  const phase = getPlanPhase(data);
+  const phaseLabel: string = phase;
+
+  switch (phase) {
+    case PlanPhase.Error:
+    case PlanPhase.Warning:
+      return ErrorStatusCell(props);
+    case PlanPhase.Failed:
+    case PlanPhase.Canceled:
+    case PlanPhase.Running:
+    case PlanPhase.Succeeded:
+    case PlanPhase.vmError:
+      return VMsProgressCell(props);
+  }
+
+  return <TableIconCell icon={<PlanStatusIcon phase={phase} />}>{phaseLabel}</TableIconCell>;
+};
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
new file mode 100644
index 000000000..b7c48cdbf
--- /dev/null
+++ b/packages/forklift-console-plugin/src/modules/Plans/views/list/components/VMsProgressCell.tsx
@@ -0,0 +1,103 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import {
+  getMigrationVmsCounts,
+  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 { 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();
+
+  const specVms = data?.obj?.spec?.vms;
+  const vms = data?.obj?.status?.migration?.vms;
+
+  const phase = getPlanPhase(data);
+  const phaseLabel: string = phase;
+
+  const planURL = getResourceUrl({
+    reference: PlanModelRef,
+    name: data?.obj?.metadata?.name,
+    namespace: data?.obj?.metadata?.namespace,
+  });
+
+  if (!vms) {
+    return (
+      <Link to={`${planURL}/vms`}>
+        <Split>
+          <SplitItem className="forklift-overview__controller-card__status-icon">
+            <VirtualMachineIcon />
+          </SplitItem>
+          <SplitItem>{t('{{total}} VMs', { total: specVms?.length || 0 })}</SplitItem>
+        </Split>
+      </Link>
+    );
+  }
+
+  const counters = getMigrationVmsCounts(vms);
+  const progressVariant = getPlanProgressVariant(phase);
+
+  return (
+    <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>
+  );
+};