Merge pull request #1533 from jpuzz0/MTV-1905-update-canceled-vms-icon

[MTV-1905] Update canceled VM status icon

Author: sgratch

packages/forklift-console-plugin/src/modules/Plans/views/list/components/PlanStatusCell.style.scss

@@ -0,0 +1,3 @@
+.plan-status-cell-label-section {
+  width: 100px;
+}

packages/forklift-console-plugin/src/modules/Plans/views/list/components/PlanStatusCell.tsx

@@ -28,6 +28,8 @@ import StartIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';
 import { CellProps } from './CellProps';
 import { PlanStatusVmCount } from './PlanStatusVmCount';
 
+import './PlanStatusCell.style.scss';
+
 type VmPipelineTask = {
   vmName: string;
   task: string;
@@ -74,7 +76,7 @@ export const PlanStatusCell: React.FC<CellProps> = ({ data }) => {
   if (phase === PlanPhase.Ready) {
     return (
       <Button
-        variant={ButtonVariant.primary}
+        variant={ButtonVariant.secondary}
         icon={<StartIcon />}
         isDisabled={!isButtonEnabled}
         onClick={() =>
@@ -103,45 +105,62 @@ export const PlanStatusCell: React.FC<CellProps> = ({ data }) => {
 
   return (
     <Flex alignItems={{ default: 'alignItemsCenter' }} spaceItems={{ default: 'spaceItemsSm' }}>
-      {isPlanLoading ? (
-        <Spinner size="md" />
-      ) : phase === PlanPhase.NotReady ? (
-        t('Validating...')
-      ) : (
-        <Label isCompact>{phase}</Label>
-      )}
-
-      {progressValue !== 0 && isPlanLoading && (
-        <FlexItem className="pf-v5-u-font-size-sm">{Math.trunc(progressValue)}%</FlexItem>
-      )}
-
-      <Split hasGutter>
-        {vmCount.success > 0 && (
-          <SplitItem>
-            <PlanStatusVmCount
-              count={vmCount.success}
-              status="success"
-              linkPath={vmCountLinkPath}
-            />
-          </SplitItem>
-        )}
-
-        {vmCount.canceled > 0 && (
-          <SplitItem>
-            <PlanStatusVmCount
-              count={vmCount.canceled}
-              status="warning"
-              linkPath={vmCountLinkPath}
-            />
-          </SplitItem>
-        )}
-
-        {vmCount.error > 0 && (
-          <SplitItem>
-            <PlanStatusVmCount count={vmCount.error} status="danger" linkPath={vmCountLinkPath} />
-          </SplitItem>
+      <Flex
+        alignItems={{ default: 'alignItemsCenter' }}
+        spaceItems={{ default: 'spaceItemsSm' }}
+        className="plan-status-cell-label-section"
+      >
+        <FlexItem>
+          {isPlanLoading ? (
+            <Spinner size="md" />
+          ) : phase === PlanPhase.NotReady ? (
+            t('Validating...')
+          ) : (
+            <Label isCompact>{phase}</Label>
+          )}
+        </FlexItem>
+
+        {progressValue !== 0 && isPlanLoading && (
+          <FlexItem className="pf-v5-u-font-size-sm">{Math.trunc(progressValue)}%</FlexItem>
         )}
-      </Split>
+      </Flex>
+
+      <FlexItem>
+        <Split hasGutter>
+          {vmCount.success > 0 && (
+            <SplitItem>
+              <PlanStatusVmCount
+                count={vmCount.success}
+                status="success"
+                linkPath={vmCountLinkPath}
+                tooltipLabel={t('Succeeded')}
+              />
+            </SplitItem>
+          )}
+
+          {vmCount.canceled > 0 && (
+            <SplitItem>
+              <PlanStatusVmCount
+                count={vmCount.canceled}
+                status="canceled"
+                linkPath={vmCountLinkPath}
+                tooltipLabel={t('Canceled')}
+              />
+            </SplitItem>
+          )}
+
+          {vmCount.error > 0 && (
+            <SplitItem>
+              <PlanStatusVmCount
+                count={vmCount.error}
+                status="danger"
+                linkPath={vmCountLinkPath}
+                tooltipLabel={t('Failed')}
+              />
+            </SplitItem>
+          )}
+        </Split>
+      </FlexItem>
     </Flex>
   );
 };

packages/forklift-console-plugin/src/modules/Plans/views/list/components/PlanStatusVmCount.tsx

@@ -2,21 +2,26 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 import { useForkliftTranslation } from 'src/utils';
 
-import { Flex, FlexItem, Icon, IconComponentProps } from '@patternfly/react-core';
-import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
-import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
-import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon';
+import { Flex, FlexItem, Icon, IconComponentProps, Tooltip } from '@patternfly/react-core';
+import {
+  CheckCircleIcon,
+  ExclamationCircleIcon,
+  ExclamationTriangleIcon,
+  MinusCircleIcon,
+} from '@patternfly/react-icons';
 
 interface PlanStatusVmCountProps {
   count: number;
-  status: IconComponentProps['status'];
   linkPath: string;
+  status: IconComponentProps['status'] | 'canceled';
+  tooltipLabel?: string;
 }
 
 export const PlanStatusVmCount: React.FC<PlanStatusVmCountProps> = ({
   count,
   status,
   linkPath,
+  tooltipLabel,
 }) => {
   const { t } = useForkliftTranslation();
 
@@ -28,12 +33,18 @@ export const PlanStatusVmCount: React.FC<PlanStatusVmCountProps> = ({
         return <ExclamationTriangleIcon />;
       case 'danger':
         return <ExclamationCircleIcon />;
+      case 'canceled':
+        return <MinusCircleIcon color="grey" />;
     }
   }, [status]);
 
   return (
     <Flex alignItems={{ default: 'alignItemsCenter' }} spaceItems={{ default: 'spaceItemsSm' }}>
-      <Icon status={status}>{statusIcon}</Icon>
+      <FlexItem>
+        <Tooltip content={tooltipLabel}>
+          <Icon {...(status !== 'canceled' && { status })}>{statusIcon}</Icon>
+        </Tooltip>
+      </FlexItem>
 
       <FlexItem>
         <Link to={linkPath}>{t('{{total}} VM', { count, total: count })}</Link>