Merge pull request #1484 from TimothyAsirJeyasing/bz-2294374-last-sync-status-on-app-vols

Update Sync Status Message for Application Volumes (PVCs)

Author: openshift-merge-bot[bot]

locales/en/plugin__odf-console.json

@@ -382,8 +382,8 @@
   "<0>You do not have any <1>discovered applications</1> that are protected yet. For details about your <4>protected managed applications</4>, navigate to the <7>Applications</7> page, as this information is not maintained here.</0><1></1><2>Click <1>Enroll applications</1> to add disaster recovery protection to your applications.</2>": "<0>You do not have any <1>discovered applications</1> that are protected yet. For details about your <4>protected managed applications</4>, navigate to the <7>Applications</7> page, as this information is not maintained here.</0><1></1><2>Click <1>Enroll applications</1> to add disaster recovery protection to your applications.</2>",
   "Activity description": "Activity description",
   "Application volumes (PVCs)": "Application volumes (PVCs)",
-  "Kubernetes objects": "Kubernetes objects",
   "No data available": "No data available",
+  "Kubernetes objects": "Kubernetes objects",
   "Sync resource type": "Sync resource type",
   "Sync status": "Sync status",
   "Last synced on": "Last synced on",

packages/mco/components/protected-applications/components.tsx

@@ -29,7 +29,11 @@ import {
   Text,
 } from '@patternfly/react-core';
 import { OutlinedQuestionCircleIcon } from '@patternfly/react-icons';
-import { ENROLLED_APP_QUERY_PARAMS_KEY, DR_BASE_ROUTE } from '../../constants';
+import {
+  ENROLLED_APP_QUERY_PARAMS_KEY,
+  DR_BASE_ROUTE,
+  REPLICATION_TYPE,
+} from '../../constants';
 import { DRPlacementControlModel } from '../../models';
 import { DRPlacementControlKind } from '../../types';
 import EmptyPage from '../empty-state-page/empty-page';
@@ -365,33 +369,44 @@ export const StatusDetails: React.FC<ExpandableComponentProps> = ({
   syncStatusInfo,
 }) => {
   const { t } = useCustomTranslation();
+  const syncType = [];
+  const syncStatus = [];
+  const lastSyncOn = [];
 
-  const syncType = [t('Application volumes (PVCs)'), t('Kubernetes objects')];
-  const { icon: volIcon, title: volTitle } = replicationHealthMap(
-    syncStatusInfo.volumeReplicationStatus,
-    t
-  );
+  if (syncStatusInfo.replicationType === REPLICATION_TYPE.ASYNC) {
+    syncType.push(t('Application volumes (PVCs)'));
+    const { icon: volIcon, title: volTitle } = replicationHealthMap(
+      syncStatusInfo.volumeReplicationStatus,
+      t
+    );
+    syncStatus.push(
+      <>
+        {volIcon} {volTitle}
+      </>
+    );
+    lastSyncOn.push(
+      syncStatusInfo.volumeLastGroupSyncTime || (
+        <Text className="text-muted">{t('No data available')}</Text>
+      )
+    );
+  }
+
+  syncType.push(t('Kubernetes objects'));
   const { icon: kubeIcon, title: kubeTitle } = replicationHealthMap(
     syncStatusInfo.kubeObjectReplicationStatus,
     t
   );
-  const syncStatus = [
-    <>
-      {volIcon} {volTitle}
-    </>,
+  syncStatus.push(
     <>
       {kubeIcon} {kubeTitle}
-    </>,
-  ];
-
-  const lastSyncOn = [
-    syncStatusInfo.volumeLastGroupSyncTime || (
-      <Text className="text-muted"> {t('No data available')}</Text>
-    ),
+    </>
+  );
+  lastSyncOn.push(
     syncStatusInfo.kubeObjectLastProtectionTime || (
       <Text className="text-muted"> {t('No data available')}</Text>
-    ),
-  ];
+    )
+  );
+
   return (
     <DescriptionList_ columnModifier={'3Col'}>
       <Description term={t('Sync resource type')} descriptions={syncType} />

packages/mco/components/protected-applications/list-page.tsx

@@ -282,6 +282,7 @@ export const ProtectedApplicationsListPage: React.FC = () => {
           kubeObjectLastProtectionTime: formatTime(
             kubeObjectLastProtectionTime
           ),
+          replicationType,
         };
 
         return acc;

packages/mco/components/protected-applications/utils.tsx

@@ -145,6 +145,7 @@ export type SyncStatusInfo = {
   volumeLastGroupSyncTime: string;
   kubeObjectReplicationStatus: VOLUME_REPLICATION_HEALTH;
   kubeObjectLastProtectionTime: string;
+  replicationType: REPLICATION_TYPE;
 };
 
 export const getAppWorstSyncStatus = (