feat(ui): add hydration as a Application filter option

ui/src/app/applications/components/applications-list/applications-filter.tsx

@@ -15,6 +15,7 @@ export interface FilterResult {
     sync: boolean;
     autosync: boolean;
     health: boolean;
+    hydration: boolean;
     namespaces: boolean;
     clusters: boolean;
     favourite: boolean;
@@ -32,14 +33,25 @@ export function getAutoSyncStatus(syncPolicy?: SyncPolicy) {
     return 'Enabled';
 }
 
-export function getFilterResults(applications: Application[], pref: AppsListPreferences): FilteredApp[] {
+export function getHydrationStatus(app: Application) {
+    if (!app.spec.sourceHydrator) {
+        return 'None';
+    }
+    if (!app.status.sourceHydrator?.currentOperation) {
+        return 'None';
+    }
+    return app.status.sourceHydrator.currentOperation.phase;
+}
+
+export function getFilterResults(applications: Application[], pref: AppsListPreferences, hydratorEnabled: boolean = true): FilteredApp[] {
     return applications.map(app => ({
         ...app,
         filterResult: {
             repos: pref.reposFilter.length === 0 || pref.reposFilter.includes(getAppDefaultSource(app).repoURL),
             sync: pref.syncFilter.length === 0 || pref.syncFilter.includes(app.status.sync.status),
             autosync: pref.autoSyncFilter.length === 0 || pref.autoSyncFilter.includes(getAutoSyncStatus(app.spec.syncPolicy)),
             health: pref.healthFilter.length === 0 || pref.healthFilter.includes(app.status.health.status),
+            hydration: !hydratorEnabled || pref.hydrationFilter.length === 0 || pref.hydrationFilter.includes(getHydrationStatus(app)),
             namespaces: pref.namespacesFilter.length === 0 || pref.namespacesFilter.some(ns => app.spec.destination.namespace && minimatch(app.spec.destination.namespace, ns)),
             favourite: !pref.showFavorites || (pref.favoritesAppList && pref.favoritesAppList.includes(app.metadata.name)),
             clusters:
@@ -70,9 +82,10 @@ const optionsFrom = (options: string[], filter: string[]) => {
 interface AppFilterProps {
     apps: FilteredApp[];
     pref: AppsListPreferences;
-    onChange: (newPrefs: AppsListPreferences) => void;
-    children?: React.ReactNode;
+    onChange: (newPref: AppsListPreferences) => void;
     collapsed?: boolean;
+    hydratorEnabled?: boolean;
+    children?: React.ReactNode;
 }
 
 const getCounts = (apps: FilteredApp[], filterType: keyof FilterResult, filter: (app: Application) => string, init?: string[]) => {
@@ -132,6 +145,55 @@ const HealthFilter = (props: AppFilterProps) => (
     />
 );
 
+function getHydrationOptions(apps: FilteredApp[]) {
+    const hydrationStatuses = ['None', 'Hydrating', 'Hydrated', 'Failed'];
+    const counts = getCounts(apps, 'hydration', getHydrationStatus, hydrationStatuses);
+    return hydrationStatuses.map(status => {
+        let icon;
+        const iconColor =
+            status === 'Hydrated'
+                ? COLORS.operation.success
+                : status === 'Failed'
+                  ? COLORS.operation.failed
+                  : status === 'Hydrating'
+                    ? COLORS.operation.running
+                    : COLORS.sync.unknown;
+
+        switch (status) {
+            case 'Hydrated':
+                icon = <i className='fa fa-check-circle' style={{color: iconColor}} />;
+                break;
+            case 'Failed':
+                icon = <i className='fa fa-times-circle' style={{color: iconColor}} />;
+                break;
+            case 'Hydrating':
+                icon = <i className='fa fa-circle-notch' style={{color: iconColor}} />;
+                break;
+            case 'None':
+                icon = <i className='fa fa-minus-circle' style={{color: iconColor}} />;
+                break;
+            default:
+                icon = <i className='fa fa-question-circle' style={{color: iconColor}} />;
+                break;
+        }
+
+        return {
+            label: status,
+            icon,
+            count: counts.get(status)
+        };
+    });
+}
+
+const HydrationFilter = (props: AppFilterProps) => (
+    <Filter
+        label='HYDRATION STATUS'
+        selected={props.pref.hydrationFilter}
+        setSelected={s => props.onChange({...props.pref, hydrationFilter: s})}
+        options={getHydrationOptions(props.apps)}
+    />
+);
+
 const LabelsFilter = (props: AppFilterProps) => {
     const labels = new Map<string, Set<string>>();
     props.apps
@@ -281,6 +343,7 @@ export const ApplicationsFilter = (props: AppFilterProps) => {
             <FavoriteFilter {...props} />
             <SyncFilter {...props} />
             <HealthFilter {...props} />
+            {props.hydratorEnabled && <HydrationFilter {...props} collapsed={true} />}
             <LabelsFilter {...props} />
             <ProjectFilter {...props} />
             <ClusterFilter {...props} />