Integration status not available for sources with status = null

locales/data.json

@@ -12941,6 +12941,12 @@
         "value": "Status/Actions"
       }
     ],
+    "statusMissing": [
+      {
+        "type": 0,
+        "value": "Missing status"
+      }
+    ],
     "statusMsg": [
       {
         "options": {

locales/translations.json

@@ -612,6 +612,7 @@
   "start": "Start",
   "status": "Status",
   "statusActions": "Status/Actions",
+  "statusMissing": "Missing status",
   "statusMsg": "{value, select, complete {Complete} failed {Failed} in_progress {in-Progress} paused {Paused} pending {Pending} other {}}",
   "statusStates": "{value, select, pending {Pending} running {Running} failed {Failed} other {}}",
   "storage": "Storage",

src/locales/messages.ts

@@ -3720,6 +3720,11 @@ export default defineMessages({
     description: 'Status/Actions',
     id: 'statusActions',
   },
+  statusMissing: {
+    defaultMessage: 'Missing status',
+    description: 'Missing status',
+    id: 'statusMissing',
+  },
   statusMsg: {
     defaultMessage:
       '{value, select, ' +

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 } from 'routes/details/components/providerStatus/utils/icon';
+import { getOverallStatusIcon, getWarningStatusIcon } from 'routes/details/components/providerStatus/utils/icon';
 import {
   getProviderAvailability,
   getProviderStatus,
@@ -27,6 +27,7 @@ interface OverallStatusOwnProps {
   isStatusMsg?: boolean;
   providerId?: string;
   providerType: ProviderType;
+  showWarningIcon?: boolean; // Show warning icon for no status
   uuId?: string;
 }
 
@@ -45,6 +46,7 @@ const OverallStatus: React.FC<OverallStatusProps> = ({
   isStatusMsg,
   providerId,
   providerType,
+  showWarningIcon,
   uuId,
 }: OverallStatusProps) => {
   const { providers, providersError } = useMapToProps();
@@ -210,7 +212,12 @@ const OverallStatus: React.FC<OverallStatusProps> = ({
         </>
       );
     }
-    return null;
+    return showWarningIcon ? (
+      <>
+        <span style={styles.statusIcon}>{getWarningStatusIcon()}</span>
+        <span style={styles.description}>{intl.formatMessage(messages.statusMissing)}</span>
+      </>
+    ) : null;
   };
 
   if (!providers || providersError) {

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

@@ -50,7 +50,7 @@ const ProviderStatus: React.FC<ProviderStatusProps> = ({
   }
 
   // Filter providers to skip an extra API request
-  const filteredProviders = filterProviders(providers, providerType)?.data?.filter(data => data.status !== null);
+  const filteredProviders = filterProviders(providers, providerType)?.data;
   if (filteredProviders.length === 0) {
     return;
   }

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

@@ -48,19 +48,22 @@ 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} /> },
+          { value: <OverallStatus isStatusMsg providerId={item.id} providerType={providerType} showWarningIcon /> },
           {
-            value: onClick ? (
-              <Button onClick={() => onClick(item.id)} style={styles.dataDetailsButton} variant={ButtonVariant.link}>
-                {intl.formatMessage(messages.dataDetails)}
-              </Button>
-            ) : (
-              <ProviderBreakdownModal providerId={item.id} providerType={providerType} />
-            ),
+            value: item.status !== null ? getDetailsLink() : null,
           },
         ],
         item,

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

@@ -4,6 +4,7 @@ import { ExclamationCircleIcon } from '@patternfly/react-icons/dist/esm/icons/ex
 import { InProgressIcon } from '@patternfly/react-icons/dist/esm/icons/in-progress-icon';
 import { PauseIcon } from '@patternfly/react-icons/dist/esm/icons/pause-icon';
 import { PendingIcon } from '@patternfly/react-icons/dist/esm/icons/pending-icon';
+import { WarningTriangleIcon } from '@patternfly/react-icons/dist/esm/icons/warning-triangle-icon';
 import React from 'react';
 
 import { lookupKey, StatusType } from './status';
@@ -48,3 +49,11 @@ export const getOverallStatusIcon = (status: StatusType) => {
   }
   return icon ? <Icon status={variant}>{icon}</Icon> : null;
 };
+
+export const getWarningStatusIcon = () => {
+  return (
+    <Icon status="warning">
+      <WarningTriangleIcon />
+    </Icon>
+  );
+};