feat(ui): integrate Progressive Sync feature (#22781)

Signed-off-by: Atif Ali <[email protected]>

Author: aali309

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

@@ -12,11 +12,14 @@ import {
     getAppDefaultSyncRevisionExtra,
     getAppOperationState,
     HydrateOperationPhaseIcon,
-    hydrationStatusMessage
+    hydrationStatusMessage,
+    getProgressiveSyncStatusColor,
+    getProgressiveSyncStatusIcon
 } from '../utils';
 import {getConditionCategory, HealthStatusIcon, OperationState, syncStatusMessage, getAppDefaultSyncRevision, getAppDefaultOperationSyncRevision} from '../utils';
 import {RevisionMetadataPanel} from './revision-metadata-panel';
 import * as utils from '../utils';
+import {COLORS} from '../../../shared/components/colors';
 
 import './application-status-panel.scss';
 
@@ -55,7 +58,74 @@ const sectionHeader = (info: SectionInfo, onClick?: () => any) => {
     );
 };
 
+const hasRollingSyncEnabled = (application: models.Application): boolean => {
+    return application.metadata.ownerReferences?.some(ref => ref.kind === 'ApplicationSet') || false;
+};
+
+const ProgressiveSyncStatus = ({application}: {application: models.Application}) => {
+    if (!hasRollingSyncEnabled(application)) {
+        return null;
+    }
+
+    const appSetRef = application.metadata.ownerReferences.find(ref => ref.kind === 'ApplicationSet');
+    if (!appSetRef) {
+        return null;
+    }
+
+    return (
+        <DataLoader
+            input={application}
+            load={async () => {
+                const appSet = await services.applications.getApplicationSet(appSetRef.name, application.metadata.namespace);
+                return appSet?.spec?.strategy?.type === 'RollingSync' ? appSet : null;
+            }}>
+            {(appSet: models.ApplicationSet) => {
+                if (!appSet) {
+                    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
+                            </div>
+                        </div>
+                    );
+                }
+
+                // Get the current application's status from the ApplicationSet resources
+                const appResource = appSet.status?.applicationStatus?.find(status => status.application === application.metadata.name);
+
+                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' 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>}
+                    </div>
+                );
+            }}
+        </DataLoader>
+    );
+};
+
 export const ApplicationStatusPanel = ({application, showDiff, showOperation, showHydrateOperation, showConditions, showExtension, showMetadataInfo}: Props) => {
+    const [showProgressiveSync, setShowProgressiveSync] = React.useState(false);
+
+    React.useEffect(() => {
+        setShowProgressiveSync(hasRollingSyncEnabled(application));
+    }, [application]);
+
     const today = new Date();
 
     let daysSinceLastSynchronized = 0;
@@ -82,6 +152,7 @@ export const ApplicationStatusPanel = ({application, showDiff, showOperation, sh
     const errors = cntByCategory.get('error');
     const source = getAppDefaultSource(application);
     const hasMultipleSources = application.spec.sources?.length > 0;
+
     return (
         <div className='application-status-panel row'>
             <div className='application-status-panel__item'>
@@ -261,6 +332,7 @@ export const ApplicationStatusPanel = ({application, showDiff, showOperation, sh
                     </React.Fragment>
                 )}
             </DataLoader>
+            {showProgressiveSync && <ProgressiveSyncStatus application={application} />}
             {statusExtensions && statusExtensions.map(ext => <ext.component key={ext.title} application={application} openFlyout={() => showExtension && showExtension(ext.id)} />)}
         </div>
     );

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

@@ -1685,3 +1685,43 @@ export function getAppUrl(app: appModels.Application): string {
     }
     return `applications/${app.metadata.namespace}/${app.metadata.name}`;
 }
+
+export const getProgressiveSyncStatusIcon = ({status, isButton}: {status: string; isButton?: boolean}) => {
+    const getIconProps = () => {
+        switch (status) {
+            case 'Healthy':
+                return {icon: 'fa-check-circle', color: COLORS.health.healthy};
+            case 'Progressing':
+                return {icon: 'fa-circle-notch fa-spin', color: COLORS.health.progressing};
+            case 'Pending':
+                return {icon: 'fa-clock', color: COLORS.health.degraded};
+            case 'Waiting':
+                return {icon: 'fa-clock', color: COLORS.sync.out_of_sync};
+            case 'Error':
+                return {icon: 'fa-times-circle', color: COLORS.health.degraded};
+            default:
+                return {icon: 'fa-question-circle', color: COLORS.sync.unknown};
+        }
+    };
+
+    const {icon, color} = getIconProps();
+    const className = `fa ${icon}${isButton ? ' application-status-panel__item-value__status-button' : ''}`;
+    return <i className={className} style={{color}} />;
+};
+
+export const getProgressiveSyncStatusColor = (status: string): string => {
+    switch (status) {
+        case 'Waiting':
+            return COLORS.sync.out_of_sync;
+        case 'Pending':
+            return COLORS.health.degraded;
+        case 'Progressing':
+            return COLORS.health.progressing;
+        case 'Healthy':
+            return COLORS.health.healthy;
+        case 'Error':
+            return COLORS.health.degraded;
+        default:
+            return COLORS.sync.unknown;
+    }
+};

ui/src/app/shared/models.ts

@@ -62,14 +62,17 @@ export interface Operation {
     initiatedBy: OperationInitiator;
 }
 
-export type OperationPhase = 'Running' | 'Error' | 'Failed' | 'Succeeded' | 'Terminating';
+export type OperationPhase = 'Running' | 'Error' | 'Failed' | 'Succeeded' | 'Terminating' | 'Progressing' | 'Pending' | 'Waiting';
 
 export const OperationPhases = {
     Running: 'Running' as OperationPhase,
     Failed: 'Failed' as OperationPhase,
     Error: 'Error' as OperationPhase,
     Succeeded: 'Succeeded' as OperationPhase,
-    Terminating: 'Terminating' as OperationPhase
+    Terminating: 'Terminating' as OperationPhase,
+    Progressing: 'Progressing' as OperationPhase,
+    Pending: 'Pending' as OperationPhase,
+    Waiting: 'Waiting' as OperationPhase
 };
 
 /**
@@ -1050,3 +1053,60 @@ export interface UserMessages {
 }
 
 export const AppDeletionConfirmedAnnotation = 'argocd.argoproj.io/deletion-approved';
+
+export interface ApplicationSetSpec {
+    strategy?: {
+        type: 'AllAtOnce' | 'RollingSync';
+        rollingSync?: {
+            steps: Array<{
+                matchExpressions: Array<{
+                    key: string;
+                    operator: string;
+                    values: string[];
+                }>;
+                maxUpdate: number;
+            }>;
+        };
+    };
+}
+
+export interface ApplicationSetCondition {
+    type: string;
+    status: string;
+    message: string;
+    lastTransitionTime: string;
+    reason: string;
+}
+
+export interface ApplicationSetResource {
+    group: string;
+    version: string;
+    kind: string;
+    name: string;
+    namespace: string;
+    status: string;
+    health?: {
+        status: string;
+        lastTransitionTime: models.Time;
+    };
+    labels?: {[key: string]: string};
+}
+
+export interface ApplicationSet {
+    apiVersion?: string;
+    kind?: string;
+    metadata: models.ObjectMeta;
+    spec: ApplicationSetSpec;
+    status?: {
+        conditions?: ApplicationSetCondition[];
+        applicationStatus?: Array<{
+            application: string;
+            status: 'Waiting' | 'Pending' | 'Progressing' | 'Healthy';
+            message?: string;
+            lastTransitionTime?: string;
+            step?: string;
+            targetRevisions?: string[];
+        }>;
+        resources?: ApplicationSetResource[];
+    };
+}

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

@@ -21,6 +21,8 @@ function optionsToSearch(options?: QueryOptions) {
 }
 
 export class ApplicationsService {
+    constructor() {}
+
     public list(projects: string[], options?: QueryOptions): Promise<models.ApplicationList> {
         return requests
             .get('/applications')
@@ -530,4 +532,11 @@ export class ApplicationsService {
 
         return data as models.Application;
     }
+
+    public async getApplicationSet(name: string, namespace: string): Promise<models.ApplicationSet> {
+        return requests
+            .get(`/applicationsets/${name}`)
+            .query({namespace})
+            .then(res => res.body as models.ApplicationSet);
+    }
 }