feat(ui): allow sorting the application list (#11645)

Signed-off-by: Alex Eftimie <alex.eftimie@getyourguide.com> Co-authored-by: Remington Breeze <remington@breeze.software>
argoproj · Jan 25, 2023 · f7011f6 · f7011f6
1 parent 3da1eaa
commit f7011f6
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 2 deletions.
diff --git a/ui/src/app/applications/components/applications-list/applications-list.tsx b/ui/src/app/applications/components/applications-list/applications-list.tsx
@@ -43,6 +43,7 @@ const APP_FIELDS = [
     'status.sync.revision',
     'status.health',
     'status.operationState.phase',
+    'status.operationState.finishedAt',
     'status.operationState.operation.sync',
     'status.summary',
     'status.resources'
@@ -516,6 +517,18 @@ export const ApplicationsList = (props: RouteComponentProps<{}>) => {
                                                                                 </h5>
                                                                             </EmptyState>
                                                                         )}
+                                                                        sortOptions={[
+                                                                            {title: 'Name', compare: (a, b) => a.metadata.name.localeCompare(b.metadata.name)},
+                                                                            {
+                                                                                title: 'Created At',
+                                                                                compare: (a, b) => a.metadata.creationTimestamp.localeCompare(b.metadata.creationTimestamp)
+                                                                            },
+                                                                            {
+                                                                                title: 'Synchronized',
+                                                                                compare: (a, b) =>
+                                                                                    a.status.operationState?.finishedAt?.localeCompare(b.status.operationState?.finishedAt)
+                                                                            }
+                                                                        ]}
                                                                         data={filteredApps}
                                                                         onPageChange={page => ctx.navigation.goto('.', {page})}>
                                                                         {data =>

diff --git a/ui/src/app/shared/components/paginate/paginate.tsx b/ui/src/app/shared/components/paginate/paginate.tsx
@@ -6,6 +6,11 @@ import {services} from '../../services';
 
 require('./paginate.scss');
 
+export interface SortOption<T> {
+    title: string;
+    compare: (a: T, b: T) => number;
+}
+
 export interface PaginateProps<T> {
     page: number;
     onPageChange: (page: number) => any;
@@ -15,14 +20,16 @@ export interface PaginateProps<T> {
     preferencesKey?: string;
     header?: React.ReactNode;
     showHeader?: boolean;
+    sortOptions?: SortOption<T>[];
 }
 
-export function Paginate<T>({page, onPageChange, children, data, emptyState, preferencesKey, header, showHeader}: PaginateProps<T>) {
+export function Paginate<T>({page, onPageChange, children, data, emptyState, preferencesKey, header, showHeader, sortOptions}: PaginateProps<T>) {
     return (
         <DataLoader load={() => services.viewPreferences.getPreferences()}>
             {pref => {
                 preferencesKey = preferencesKey || 'default';
                 const pageSize = pref.pageSizes[preferencesKey] || 10;
+                const sortOption = sortOptions ? (pref.sortOptions && pref.sortOptions[preferencesKey]) || sortOptions[0].title : '';
                 const pageCount = pageSize === -1 ? 1 : Math.ceil(data.length / pageSize);
                 if (pageCount <= page) {
                     page = pageCount - 1;
@@ -43,6 +50,29 @@ export function Paginate<T>({page, onPageChange, children, data, emptyState, pre
                                     />
                                 )}
                                 <div className='paginate__size-menu'>
+                                    {sortOptions && (
+                                        <DropDownMenu
+                                            anchor={() => (
+                                                <>
+                                                    <a>
+                                                        Sort: {sortOption.toLowerCase()} <i className='fa fa-caret-down' />
+                                                    </a>
+                                                    &nbsp;
+                                                </>
+                                            )}
+                                            items={sortOptions.map(so => ({
+                                                title: so.title,
+                                                action: () => {
+                                                    // sortOptions might not be set in the browser storage
+                                                    if (!pref.sortOptions) {
+                                                        pref.sortOptions = {};
+                                                    }
+                                                    pref.sortOptions[preferencesKey] = so.title;
+                                                    services.viewPreferences.updatePreferences(pref);
+                                                }
+                                            }))}
+                                        />
+                                    )}
                                     <DropDownMenu
                                         anchor={() => (
                                             <a>
@@ -63,7 +93,13 @@ export function Paginate<T>({page, onPageChange, children, data, emptyState, pre
                         </div>
                     );
                 }
-
+                if (sortOption) {
+                    sortOptions
+                        .filter(o => o.title === sortOption)
+                        .map(so => {
+                            data.sort(so.compare);
+                        });
+                }
                 return (
                     <React.Fragment>
                         <div className='paginate'>{paginator()}</div>

diff --git a/ui/src/app/shared/services/view-preferences-service.ts b/ui/src/app/shared/services/view-preferences-service.ts
@@ -91,6 +91,7 @@ export interface ViewPreferences {
     appDetails: AppDetailsPreferences;
     appList: AppsListPreferences;
     pageSizes: {[key: string]: number};
+    sortOptions: {[key: string]: string};
     hideBannerContent: string;
     hideSidebar: boolean;
     position: string;