feat(ui): add a filter for auto sync (argoproj#11357)

ashutosh16 · Nov 23, 2022 · d1303fc · d1303fc
1 parent 49001ad
commit d1303fc
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 2 deletions.
diff --git a/ui/src/app/applications/components/applications-list/applications-filter.tsx b/ui/src/app/applications/components/applications-list/applications-filter.tsx
@@ -2,7 +2,7 @@ import {useData, Checkbox} from 'argo-ui/v2';
 import * as minimatch from 'minimatch';
 import * as React from 'react';
 import {Context} from '../../../shared/context';
-import {Application, ApplicationDestination, Cluster, HealthStatusCode, HealthStatuses, SyncStatusCode, SyncStatuses} from '../../../shared/models';
+import {Application, ApplicationDestination, Cluster, HealthStatusCode, HealthStatuses, SyncPolicy, SyncStatusCode, SyncStatuses} from '../../../shared/models';
 import {AppsListPreferences, services} from '../../../shared/services';
 import {Filter, FiltersGroup} from '../filter/filter';
 import * as LabelSelector from '../label-selector';
@@ -11,6 +11,7 @@ import {ComparisonStatusIcon, HealthStatusIcon} from '../utils';
 export interface FilterResult {
     repos: boolean;
     sync: boolean;
+    autosync: boolean;
     health: boolean;
     namespaces: boolean;
     clusters: boolean;
@@ -22,12 +23,20 @@ export interface FilteredApp extends Application {
     filterResult: FilterResult;
 }
 
+function getAutoSyncStatus(syncPolicy?: SyncPolicy) {
+    if (!syncPolicy || !syncPolicy.automated) {
+        return 'Disabled';
+    }
+    return 'Enabled';
+}
+
 export function getFilterResults(applications: Application[], pref: AppsListPreferences): FilteredApp[] {
     return applications.map(app => ({
         ...app,
         filterResult: {
             repos: pref.reposFilter.length === 0 || pref.reposFilter.includes(app.spec.source.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),
             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)),
@@ -241,6 +250,32 @@ const FavoriteFilter = (props: AppFilterProps) => {
     );
 };
 
+function getAutoSyncOptions(apps: FilteredApp[]) {
+    const counts = getCounts(apps, 'autosync', app => getAutoSyncStatus(app.spec.syncPolicy), ['Enabled', 'Disabled']);
+    return [
+        {
+            label: 'Enabled',
+            icon: <i className='fa fa-circle-play' />,
+            count: counts.get('Enabled')
+        },
+        {
+            label: 'Disabled',
+            icon: <i className='fa fa-ban' />,
+            count: counts.get('Disabled')
+        }
+    ];
+}
+
+const AutoSyncFilter = (props: AppFilterProps) => (
+    <Filter
+        label='AUTO SYNC'
+        selected={props.pref.autoSyncFilter}
+        setSelected={s => props.onChange({...props.pref, autoSyncFilter: s})}
+        options={getAutoSyncOptions(props.apps)}
+        collapsed={props.collapsed || false}
+    />
+);
+
 export const ApplicationsFilter = (props: AppFilterProps) => {
     return (
         <FiltersGroup content={props.children} collapsed={props.collapsed}>
@@ -251,6 +286,7 @@ export const ApplicationsFilter = (props: AppFilterProps) => {
             <ProjectFilter {...props} />
             <ClusterFilter {...props} />
             <NamespaceFilter {...props} />
+            <AutoSyncFilter {...props} collapsed={true} />
         </FiltersGroup>
     );
 };
diff --git a/ui/src/app/applications/components/applications-list/applications-list.tsx b/ui/src/app/applications/components/applications-list/applications-list.tsx
@@ -111,6 +111,12 @@ const ViewPref = ({children}: {children: (pref: AppsListPreferences & {page: num
                                     .split(',')
                                     .filter(item => !!item);
                             }
+                            if (params.get('autoSync') != null) {
+                                viewPref.autosyncFilter = params
+                                    .get('autoSync')
+                                    .split(',')
+                                    .filter(item => !!item);
+                            }
                             if (params.get('health') != null) {
                                 viewPref.healthFilter = params
                                     .get('health')
@@ -332,6 +338,7 @@ export const ApplicationsList = (props: RouteComponentProps<{}>) => {
             {
                 proj: newPref.projectsFilter.join(','),
                 sync: newPref.syncFilter.join(','),
+                autoSync: newPref.autoSyncFilter.join(','),
                 health: newPref.healthFilter.join(','),
                 namespace: newPref.namespacesFilter.join(','),
                 cluster: newPref.clustersFilter.join(','),

diff --git a/ui/src/app/applications/components/filter/filter.tsx b/ui/src/app/applications/components/filter/filter.tsx
@@ -15,6 +15,7 @@ interface FilterProps {
     retry?: () => void;
     loading?: boolean;
     radio?: boolean;
+    collapsed?: boolean;
 }
 
 export interface CheckboxOption {
@@ -77,7 +78,7 @@ export const Filter = (props: FilterProps) => {
     const [values, setValues] = React.useState(init);
     const [tags, setTags] = React.useState([]);
     const [input, setInput] = React.useState('');
-    const [collapsed, setCollapsed] = React.useState(false);
+    const [collapsed, setCollapsed] = React.useState(props.collapsed || false);
     const [options, setOptions] = React.useState(props.options);
 
     React.useEffect(() => {

diff --git a/ui/src/app/shared/services/view-preferences-service.ts b/ui/src/app/shared/services/view-preferences-service.ts
@@ -68,13 +68,15 @@ export class AppsListPreferences {
         pref.projectsFilter = [];
         pref.reposFilter = [];
         pref.syncFilter = [];
+        pref.autoSyncFilter = [];
         pref.showFavorites = false;
     }
 
     public labelsFilter: string[];
     public projectsFilter: string[];
     public reposFilter: string[];
     public syncFilter: string[];
+    public autoSyncFilter: string[];
     public healthFilter: string[];
     public namespacesFilter: string[];
     public clustersFilter: string[];
@@ -129,6 +131,7 @@ const DEFAULT_PREFERENCES: ViewPreferences = {
         clustersFilter: new Array<string>(),
         reposFilter: new Array<string>(),
         syncFilter: new Array<string>(),
+        autoSyncFilter: new Array<string>(),
         healthFilter: new Array<string>(),
         hideFilters: false,
         showFavorites: false,