feat: Use CR status condition information

Ref #42

Author: gansheer

src/components/camel-app-details/CamelAppDetails.tsx

@@ -11,7 +11,13 @@ import {
   TextListItem,
 } from '@patternfly/react-core';
 import { useTranslation } from 'react-i18next';
-import { K8sGroupVersionKind, ResourceLink } from '@openshift-console/dynamic-plugin-sdk';
+import {
+  GreenCheckCircleIcon,
+  K8sGroupVersionKind,
+  K8sResourceConditionStatus,
+  ResourceLink,
+  YellowExclamationTriangleIcon,
+} from '@openshift-console/dynamic-plugin-sdk';
 import { camelAppGVK } from '../../const';
 import CamelAppStatusPod from './CamelAppStatusPod';
 import CamelAppHealth from '../camel-list-page/CamelAppHealth';
@@ -35,9 +41,31 @@ type CamelAppDetails = {
   metricsEndpoint: string;
 };
 
+const monitoredCondition = (camelInt: CamelAppKind) => {
+  const monitoredConditions = camelInt.status?.conditions?.filter(
+    (contidition) => contidition.type == 'Monitored',
+  );
+  if (monitoredConditions.length > 0) {
+    return monitoredConditions[0];
+  }
+  return;
+};
+const healthyCondition = (camelInt: CamelAppKind) => {
+  const healthConditions = camelInt.status?.conditions?.filter(
+    (contidition) => contidition.type == 'Healthy',
+  );
+  if (healthConditions.length > 0) {
+    return healthConditions[0];
+  }
+  return;
+};
+
 const CamelAppDetails: React.FC<CamelAppDetailsProps> = ({ obj: camelInt }) => {
   const { t } = useTranslation('plugin__camel-openshift-console-plugin');
 
+  const monitored = monitoredCondition(camelInt);
+  const healthy = healthyCondition(camelInt);
+
   return (
     <div className="co-m-pane__body">
       <h2>{t('Camel App Details')}</h2>
@@ -63,9 +91,25 @@ const CamelAppDetails: React.FC<CamelAppDetailsProps> = ({ obj: camelInt }) => {
                 {camelInt.status?.image ? camelInt.status.image : 'unknown'}
               </DescriptionListDescription>
             </DescriptionListGroup>
+            <DescriptionListGroup>
+              <DescriptionListTerm>{t('Monitored')}:</DescriptionListTerm>
+              <DescriptionListDescription>
+                {monitored && monitored?.status == K8sResourceConditionStatus.True ? (
+                  <>
+                    <GreenCheckCircleIcon />
+                    &nbsp;&nbsp;True
+                  </>
+                ) : (
+                  <>
+                    <YellowExclamationTriangleIcon />
+                    &nbsp;&nbsp;False&nbsp;&nbsp;({monitored.message})
+                  </>
+                )}
+              </DescriptionListDescription>
+            </DescriptionListGroup>
             <DescriptionListGroup>
               <DescriptionListTerm>
-                <PopoverCamelHealth popoverBody={t('Health') + ' :'} />
+                <PopoverCamelHealth popoverBody={t('Health') + ' :'} condition={healthy} />
               </DescriptionListTerm>
               <DescriptionListDescription>
                 <CamelAppHealth

src/components/camel-app-details/CamelAppHealthPopover.tsx

@@ -2,6 +2,10 @@ import * as React from 'react';
 import { Button, Popover, PopoverPosition, PopoverProps } from '@patternfly/react-core';
 import { Trans, useTranslation } from 'react-i18next';
 import CamelAppHealth from '../camel-list-page/CamelAppHealth';
+import {
+  K8sResourceCondition,
+  K8sResourceConditionStatus,
+} from '@openshift-console/dynamic-plugin-sdk';
 
 type PopoverCamelHealthProps = {
   popoverBody: React.ReactNode;
@@ -12,6 +16,7 @@ type PopoverCamelHealthProps = {
   isVisible?: boolean;
   shouldClose?: (hideFunction: any) => void;
   shouldOpen?: PopoverProps['shouldOpen'];
+  condition?: K8sResourceCondition;
 };
 
 export const PopoverCamelHealth: React.FC<PopoverCamelHealthProps> = ({
@@ -23,6 +28,7 @@ export const PopoverCamelHealth: React.FC<PopoverCamelHealthProps> = ({
   title,
   onHide,
   onShow,
+  condition,
 }) => {
   const { t } = useTranslation('plugin__camel-openshift-console-plugin');
   return (
@@ -32,17 +38,26 @@ export const PopoverCamelHealth: React.FC<PopoverCamelHealthProps> = ({
       bodyContent={() => (
         <div>
           <div>
-            <Trans t={t}>
-              <h4>Service Level Indicator</h4>
-              <CamelAppHealth health="Error" />: &gt; 10 % failed exchanges
-              <br />
-              <CamelAppHealth health="Warning" />: &gt; 5 % failed exchanges
-              <br />
-              <CamelAppHealth health="OK" />: healthy
-              <br />
-              <CamelAppHealth health="Unknown" />: no informations
-              <br />
-            </Trans>
+            {condition &&
+            condition?.status &&
+            condition?.status == K8sResourceConditionStatus.False ? (
+              <>
+                <h4>Reason</h4>
+                {condition.reason}
+              </>
+            ) : (
+              <Trans t={t}>
+                <h4>Service Level Indicator</h4>
+                <CamelAppHealth health="Error" />: &gt; 10 % failed exchanges
+                <br />
+                <CamelAppHealth health="Warning" />: &gt; 5 % failed exchanges
+                <br />
+                <CamelAppHealth health="OK" />: healthy
+                <br />
+                <CamelAppHealth health="Unknown" />: no informations
+                <br />
+              </Trans>
+            )}
           </div>
         </div>
       )}

src/components/camel-app-details/CamelAppStatusPod.tsx

@@ -11,7 +11,11 @@ import {
   DescriptionListDescription,
 } from '@patternfly/react-core';
 import { podGVK } from '../../const';
-import { ResourceLink, ResourceStatus } from '@openshift-console/dynamic-plugin-sdk';
+import {
+  ResourceLink,
+  ResourceStatus,
+  YellowExclamationTriangleIcon,
+} from '@openshift-console/dynamic-plugin-sdk';
 import { useTranslation } from 'react-i18next';
 import Status from '@openshift-console/dynamic-plugin-sdk/lib/app/components/status/Status';
 import { formatDuration } from '../../date-utils';
@@ -30,6 +34,7 @@ const hasRuntimeExchanges = (camelPod: CamelAppStatusPod) =>
   camelPod.runtime?.exchange ? true : false;
 const hasObserve = (camelPod: CamelAppStatusPod) =>
   camelPod.observe && Object.keys(camelPod.observe).length > 0;
+const hasStatusMessage = (camelPod: CamelAppStatusPod) => (camelPod.reason ? true : false);
 
 const CamelAppStatusPod: React.FC<CamelAppStatusPodProps> = ({ obj: camelInt, pod: camelPod }) => {
   const { t } = useTranslation('plugin__camel-openshift-console-plugin');
@@ -68,6 +73,19 @@ const CamelAppStatusPod: React.FC<CamelAppStatusPodProps> = ({ obj: camelInt, po
               <DescriptionListTerm>{t('Uptime')}:</DescriptionListTerm>
               <DescriptionListDescription>{durationFull}</DescriptionListDescription>
             </DescriptionListGroup>
+
+            {hasStatusMessage(camelPod) ? (
+              <DescriptionListGroup>
+                <DescriptionListTerm>{t('Status message')}:</DescriptionListTerm>
+                <DescriptionListDescription>
+                  <YellowExclamationTriangleIcon />
+                  &nbsp;&nbsp;{camelPod.reason}
+                </DescriptionListDescription>
+              </DescriptionListGroup>
+            ) : (
+              <></>
+            )}
+
             {hasRuntime(camelPod) ? (
               <DescriptionListGroup>
                 <DescriptionListTerm>{t('Runtime')}:</DescriptionListTerm>

src/types.ts

@@ -1,11 +1,12 @@
-import { K8sResourceKind } from '@openshift-console/dynamic-plugin-sdk';
+import { K8sResourceCondition, K8sResourceKind } from '@openshift-console/dynamic-plugin-sdk';
 
 // See how to enrich camelSpec
 export type CamelAppKind = K8sResourceKind & {
   status: {
     pods: CamelAppStatusPod[];
     phase: string;
     sliExchangeSuccessRate: CamelAppSli;
+    conditions: K8sResourceCondition[];
   };
 };
 
@@ -24,7 +25,7 @@ export type CamelAppStatusPod = {
   name: string;
   observe: CamelAppObservability;
   ready: boolean;
-  reason: boolean;
+  reason: string;
   runtime: CamelAppRuntime;
   status: string;
   /** Format: date-time - in nanoseconds */