fix: Progress Sync Unknown in UI (argoproj#24202)

Signed-off-by: Atif Ali <atali@redhat.com>

Author: aali309

ui/src/app/applications/components/application-status-panel/application-status-panel.tsx

@@ -58,44 +58,75 @@ const sectionHeader = (info: SectionInfo, onClick?: () => any) => {
     );
 };
 
-const hasRollingSyncEnabled = (application: models.Application): boolean => {
-    return application.metadata.ownerReferences?.some(ref => ref.kind === 'ApplicationSet') || false;
+const getApplicationSetOwnerRef = (application: models.Application) => {
+    return application.metadata.ownerReferences?.find(ref => ref.kind === 'ApplicationSet');
 };
 
 const ProgressiveSyncStatus = ({application}: {application: models.Application}) => {
-    if (!hasRollingSyncEnabled(application)) {
-        return null;
-    }
-
-    const appSetRef = application.metadata.ownerReferences.find(ref => ref.kind === 'ApplicationSet');
+    const appSetRef = getApplicationSetOwnerRef(application);
     if (!appSetRef) {
         return null;
     }
 
     return (
         <DataLoader
             input={application}
+            errorRenderer={() => {
+                // For any errors, show a minimal error state
+                return (
+                    <div className='application-status-panel__item'>
+                        {sectionHeader({
+                            title: 'PROGRESSIVE SYNC',
+                            helpContent: 'Shows the current status of progressive sync for applications managed by an ApplicationSet.'
+                        })}
+                        <div className='application-status-panel__item-value'>
+                            <i className='fa fa-exclamation-triangle' style={{color: COLORS.sync.unknown}} /> Error
+                        </div>
+                        <div className='application-status-panel__item-name'>Unable to load Progressive Sync status</div>
+                    </div>
+                );
+            }}
             load={async () => {
-                const appSet = await services.applications.getApplicationSet(appSetRef.name, application.metadata.namespace);
-                return appSet?.spec?.strategy?.type === 'RollingSync' ? appSet : null;
-            }}>
-            {(appSet: models.ApplicationSet) => {
+                // Check if user has permission to read ApplicationSets
+                const canReadApplicationSets = await services.accounts.canI('applicationsets', 'get', application.spec.project + '/' + application.metadata.name);
+
+                // Find ApplicationSet by searching all namespaces dynamically
+                const appSetList = await services.applications.listApplicationSets();
+                const appSet = appSetList.items?.find(item => item.metadata.name === appSetRef.name);
+
                 if (!appSet) {
+                    throw new Error(`ApplicationSet ${appSetRef.name} not found in any namespace`);
+                }
+
+                return {canReadApplicationSets, appSet};
+            }}>
+            {({canReadApplicationSets, appSet}: {canReadApplicationSets: boolean; appSet: models.ApplicationSet}) => {
+                // Hide panel if: Progressive Sync disabled, no permission, or not RollingSync strategy
+                if (!appSet.status?.applicationStatus || appSet?.spec?.strategy?.type !== 'RollingSync' || !canReadApplicationSets) {
+                    return null;
+                }
+
+                // Get the current application's status from the ApplicationSet applicationStatus
+                const appResource = appSet.status?.applicationStatus?.find(status => status.application === application.metadata.name);
+
+                // If no application status is found, show a default status
+                if (!appResource) {
                     return (
                         <div className='application-status-panel__item'>
                             {sectionHeader({
                                 title: 'PROGRESSIVE SYNC',
                                 helpContent: 'Shows the current status of progressive sync for applications managed by an ApplicationSet with RollingSync strategy.'
                             })}
                             <div className='application-status-panel__item-value'>
-                                <i className='fa fa-question-circle' style={{color: COLORS.sync.unknown}} /> Unknown
+                                <i className='fa fa-clock' style={{color: COLORS.sync.out_of_sync}} /> Waiting
                             </div>
+                            <div className='application-status-panel__item-name'>Application status not yet available from ApplicationSet</div>
                         </div>
                     );
                 }
 
-                // Get the current application's status from the ApplicationSet resources
-                const appResource = appSet.status?.applicationStatus?.find(status => status.application === application.metadata.name);
+                // Get last transition time from application status
+                const lastTransitionTime = appResource?.lastTransitionTime;
 
                 return (
                     <div className='application-status-panel__item'>
@@ -106,12 +137,14 @@ const ProgressiveSyncStatus = ({application}: {application: models.Application})
                         <div className='application-status-panel__item-value' style={{color: getProgressiveSyncStatusColor(appResource.status)}}>
                             {getProgressiveSyncStatusIcon({status: appResource.status})}&nbsp;{appResource.status}
                         </div>
-                        <div className='application-status-panel__item-value'>Wave: {appResource.step}</div>
-                        <div className='application-status-panel__item-name' style={{marginBottom: '0.5em'}}>
-                            Last Transition: <br />
-                            <Timestamp date={appResource.lastTransitionTime} />
-                        </div>
-                        {appResource.message && <div className='application-status-panel__item-name'>{appResource.message}</div>}
+                        {appResource?.step && <div className='application-status-panel__item-value'>Wave: {appResource.step}</div>}
+                        {lastTransitionTime && (
+                            <div className='application-status-panel__item-name' style={{marginBottom: '0.5em'}}>
+                                Last Transition: <br />
+                                <Timestamp date={lastTransitionTime} />
+                            </div>
+                        )}
+                        {appResource?.message && <div className='application-status-panel__item-name'>{appResource.message}</div>}
                     </div>
                 );
             }}
@@ -123,7 +156,9 @@ export const ApplicationStatusPanel = ({application, showDiff, showOperation, sh
     const [showProgressiveSync, setShowProgressiveSync] = React.useState(false);
 
     React.useEffect(() => {
-        setShowProgressiveSync(hasRollingSyncEnabled(application));
+        // Only show Progressive Sync if the application has an ApplicationSet parent
+        // The actual strategy validation will be done inside ProgressiveSyncStatus component
+        setShowProgressiveSync(!!getApplicationSetOwnerRef(application));
     }, [application]);
 
     const today = new Date();

ui/src/app/applications/components/utils.tsx

@@ -1716,6 +1716,10 @@ export const getProgressiveSyncStatusIcon = ({status, isButton}: {status: string
                 return {icon: 'fa-clock', color: COLORS.sync.out_of_sync};
             case 'Error':
                 return {icon: 'fa-times-circle', color: COLORS.health.degraded};
+            case 'Synced':
+                return {icon: 'fa-check-circle', color: COLORS.sync.synced};
+            case 'OutOfSync':
+                return {icon: 'fa-exclamation-triangle', color: COLORS.sync.out_of_sync};
             default:
                 return {icon: 'fa-question-circle', color: COLORS.sync.unknown};
         }
@@ -1738,6 +1742,10 @@ export const getProgressiveSyncStatusColor = (status: string): string => {
             return COLORS.health.healthy;
         case 'Error':
             return COLORS.health.degraded;
+        case 'Synced':
+            return COLORS.sync.synced;
+        case 'OutOfSync':
+            return COLORS.sync.out_of_sync;
         default:
             return COLORS.sync.unknown;
     }

ui/src/app/shared/models.ts

@@ -1134,3 +1134,8 @@ export interface ApplicationSet {
         resources?: ApplicationSetResource[];
     };
 }
+
+export interface ApplicationSetList {
+    metadata: models.ListMeta;
+    items: ApplicationSet[];
+}

ui/src/app/shared/services/applications-service.ts

@@ -550,4 +550,8 @@ export class ApplicationsService {
             .query({appsetNamespace: namespace})
             .then(res => res.body as models.ApplicationSet);
     }
+
+    public async listApplicationSets(): Promise<models.ApplicationSetList> {
+        return requests.get(`/applicationsets`).then(res => res.body as models.ApplicationSetList);
+    }
 }