Show "incomplete" warning when status is unavailable

https://issues.redhat.com/browse/COST-5749

Author: dlabrecq

locales/data.json

@@ -12968,6 +12968,14 @@
               }
             ]
           },
+          "none": {
+            "value": [
+              {
+                "type": 0,
+                "value": "Incomplete"
+              }
+            ]
+          },
           "other": {
             "value": []
           },
@@ -13027,12 +13035,6 @@
         "value": "value"
       }
     ],
-    "statusUnavailable": [
-      {
-        "type": 0,
-        "value": "Unavailable"
-      }
-    ],
     "storage": [
       {
         "type": 0,

locales/translations.json

@@ -612,9 +612,8 @@
   "start": "Start",
   "status": "Status",
   "statusActions": "Status/Actions",
-  "statusMsg": "{value, select, complete {Complete} failed {Failed} in_progress {in-Progress} paused {Paused} pending {Pending} other {}}",
+  "statusMsg": "{value, select, complete {Complete} failed {Failed} in_progress {in-Progress} none {Incomplete} paused {Paused} pending {Pending} other {}}",
   "statusStates": "{value, select, pending {Pending} running {Running} failed {Failed} other {}}",
-  "statusUnavailable": "Unavailable",
   "storage": "Storage",
   "storageClass": "StorageClass",
   "storageUnattributedDistributed": "Storage unattributed",

src/locales/messages.ts

@@ -3726,6 +3726,7 @@ export default defineMessages({
       'complete {Complete} ' +
       'failed {Failed} ' +
       'in_progress {in-Progress} ' +
+      'none {Incomplete} ' +
       'paused {Paused} ' +
       'pending {Pending} ' +
       'other {}}',
@@ -3737,11 +3738,6 @@ export default defineMessages({
     description: 'Status states',
     id: 'statusStates',
   },
-  statusUnavailable: {
-    defaultMessage: 'Unavailable',
-    description: 'Unavailable',
-    id: 'statusUnavailable',
-  },
   storage: {
     defaultMessage: 'Storage',
     description: 'Storage',

src/routes/details/components/providerStatus/components/overallStatus.tsx

@@ -8,7 +8,7 @@ import type { MessageDescriptor } from 'react-intl';
 import { useIntl } from 'react-intl';
 import { useSelector } from 'react-redux';
 import { formatDate } from 'routes/details/components/providerStatus/utils/format';
-import { getOverallStatusIcon, getWarningStatusIcon } from 'routes/details/components/providerStatus/utils/icon';
+import { getOverallStatusIcon } from 'routes/details/components/providerStatus/utils/icon';
 import {
   getProviderAvailability,
   getProviderStatus,
@@ -27,7 +27,6 @@ interface OverallStatusOwnProps {
   isStatusMsg?: boolean;
   providerId?: string;
   providerType: ProviderType;
-  showUnavailableStatus?: boolean; // Show warning icon for no status
   uuId?: string;
 }
 
@@ -46,15 +45,14 @@ const OverallStatus: React.FC<OverallStatusProps> = ({
   isStatusMsg,
   providerId,
   providerType,
-  showUnavailableStatus,
   uuId,
 }: OverallStatusProps) => {
   const { providers, providersError } = useMapToProps();
   const intl = useIntl();
 
   // Filter providers to skip an extra API request
   const getFilteredProviders = () => {
-    return filterProviders(providers, providerType)?.data?.filter(data => data.status !== null);
+    return filterProviders(providers, providerType)?.data;
   };
 
   const getOverallStatus = (
@@ -74,18 +72,17 @@ const OverallStatus: React.FC<OverallStatusProps> = ({
       if (msg && status) {
         return;
       }
-      if (statusType === StatusType.complete) {
-        // A cluster may not have an integration, so cloudProvider could be undefined
-        if (
-          (state1 === undefined || state1?.status === statusType) &&
-          (state2 === undefined || state2?.status === statusType) &&
-          (state3 === undefined || state3?.status === statusType) &&
-          (state4 === undefined || state4?.status === statusType)
-        ) {
-          lastUpdated = state1?.lastUpdated;
-          msg = state1?.msg;
-          status = statusType;
-        }
+      // A cluster may not have an integration, so cloudProvider could be undefined
+      if (
+        statusType === StatusType.complete &&
+        (state1 === undefined || state1?.status === statusType) &&
+        (state2 === undefined || state2?.status === statusType) &&
+        (state3 === undefined || state3?.status === statusType) &&
+        (state4 === undefined || state4?.status === statusType)
+      ) {
+        lastUpdated = state1?.lastUpdated;
+        msg = state1?.msg;
+        status = statusType;
       } else {
         if (state1?.status === statusType) {
           lastUpdated = state1?.lastUpdated;
@@ -113,6 +110,7 @@ const OverallStatus: React.FC<OverallStatusProps> = ({
     initializeState(StatusType.paused, cloudAvailability, providerAvailability, cloudStatus, providerStatus);
     initializeState(StatusType.inProgress, cloudAvailability, providerAvailability, cloudStatus, providerStatus); // Availability won't likely have in-progress and pending states
     initializeState(StatusType.pending, cloudAvailability, providerAvailability, cloudStatus, providerStatus);
+    initializeState(StatusType.none, providerStatus, cloudStatus, providerAvailability, cloudAvailability); // Cannot show complete with an undefined status
     initializeState(StatusType.complete, providerStatus, cloudStatus, providerAvailability, cloudAvailability); // Must display the cluster status msg here
 
     return { lastUpdated, msg, status };
@@ -122,6 +120,7 @@ const OverallStatus: React.FC<OverallStatusProps> = ({
     let completeCount = 0;
     let failedCount = 0;
     let inProgressCount = 0;
+    let noneCount = 0;
     let pausedCount = 0;
     let pendingCount = 0;
 
@@ -149,6 +148,9 @@ const OverallStatus: React.FC<OverallStatusProps> = ({
       if (overallStatus.status === StatusType.complete) {
         completeCount++;
       }
+      if (overallStatus.status === StatusType.none) {
+        noneCount++;
+      }
     });
     return (
       <>
@@ -182,6 +184,12 @@ const OverallStatus: React.FC<OverallStatusProps> = ({
             <span style={styles.statusIcon}>{getOverallStatusIcon(StatusType.pending)}</span>
           </>
         )}
+        {noneCount > 0 && (
+          <>
+            <span style={styles.count}>{noneCount}</span>
+            <span style={styles.statusIcon}>{getOverallStatusIcon(StatusType.none)}</span>
+          </>
+        )}
       </>
     );
   };
@@ -212,12 +220,7 @@ const OverallStatus: React.FC<OverallStatusProps> = ({
         </>
       );
     }
-    return showUnavailableStatus ? (
-      <>
-        <span style={styles.statusIcon}>{getWarningStatusIcon()}</span>
-        <span style={styles.description}>{intl.formatMessage(messages.statusUnavailable)}</span>
-      </>
-    ) : null;
+    return null;
   };
 
   if (!providers || providersError) {

src/routes/details/components/providerStatus/providerBreakdownContent.tsx

@@ -53,7 +53,7 @@ const ProviderBreakdownContent: React.FC<ProviderDetailsContentProps> = ({
   }
 
   // Filter OCP providers to skip an extra API request
-  const filteredProviders = filterProviders(providers, providerType)?.data?.filter(data => data.status !== null);
+  const filteredProviders = filterProviders(providers, providerType)?.data;
   const provider = filteredProviders?.find(
     val =>
       providerId === val.id ||

src/routes/details/components/providerStatus/providerTable.tsx

@@ -48,24 +48,21 @@ const ProviderTable: React.FC<ProviderTableProps> = ({ onClick, providers, provi
     providers?.map(item => {
       // const clusterId = item?.authentication?.credentials?.cluster_id;
 
-      const getDetailsLink = () => {
-        return onClick ? (
-          <Button onClick={() => onClick(item.id)} style={styles.dataDetailsButton} variant={ButtonVariant.link}>
-            {intl.formatMessage(messages.dataDetails)}
-          </Button>
-        ) : (
-          <ProviderBreakdownModal providerId={item.id} providerType={providerType} />
-        );
-      };
       newRows.push({
         cells: [
           { value: <SourceLink provider={item} showLabel={false} /> },
           { value: <OverallStatus isLastUpdated providerId={item.id} providerType={providerType} /> },
           {
-            value: <OverallStatus isStatusMsg providerId={item.id} providerType={providerType} showUnavailableStatus />,
+            value: <OverallStatus isStatusMsg providerId={item.id} providerType={providerType} />,
           },
           {
-            value: item.status !== null ? getDetailsLink() : null,
+            value: onClick ? (
+              <Button onClick={() => onClick(item.id)} style={styles.dataDetailsButton} variant={ButtonVariant.link}>
+                {intl.formatMessage(messages.dataDetails)}
+              </Button>
+            ) : (
+              <ProviderBreakdownModal providerId={item.id} providerType={providerType} />
+            ),
           },
         ],
         item,

src/routes/details/components/providerStatus/utils/icon.tsx

@@ -29,15 +29,19 @@ export const getOverallStatusIcon = (status: StatusType) => {
   switch (status) {
     case StatusType.complete:
       icon = <CheckCircleIcon />;
-      variant = 'success'; // Use green color
+      variant = 'success'; // Green
       break;
     case StatusType.failed:
       icon = <ExclamationCircleIcon />;
-      variant = 'danger'; // Use red color
+      variant = 'danger'; // Red
       break;
     case StatusType.inProgress:
       icon = <InProgressIcon />;
       break;
+    case StatusType.none:
+      icon = <WarningTriangleIcon />;
+      variant = 'warning'; // Yellow
+      break;
     case StatusType.paused:
       icon = <PauseIcon />;
       break;
@@ -49,11 +53,3 @@ export const getOverallStatusIcon = (status: StatusType) => {
   }
   return icon ? <Icon status={variant}>{icon}</Icon> : null;
 };
-
-export const getWarningStatusIcon = () => {
-  return (
-    <Icon status="warning">
-      <WarningTriangleIcon />
-    </Icon>
-  );
-};

src/routes/details/components/providerStatus/utils/status.ts

@@ -8,6 +8,7 @@ export const enum StatusType {
   complete = 'complete',
   failed = 'failed',
   inProgress = 'in_progress',
+  none = 'none',
   paused = 'paused',
   pending = 'pending',
 }
@@ -25,7 +26,7 @@ export const lookupKey = (value: string) => {
     case 'pending':
       return StatusType.pending;
     default:
-      return undefined;
+      return StatusType.none;
   }
 };
 
@@ -119,6 +120,13 @@ export const getProviderStatus = (
   ) {
     status = StatusType.pending;
     msg = getProviderStatusMsg({ downloadState, processingState, summaryState }, StatusType.pending);
+  } else if (
+    downloadState === StatusType.none &&
+    processingState === StatusType.none &&
+    summaryState === StatusType.none
+  ) {
+    status = StatusType.none;
+    msg = getProviderStatusMsg({ downloadState, processingState, summaryState }, StatusType.none);
   } else if (
     downloadState === StatusType.complete &&
     processingState === StatusType.complete &&