feat: Add link to get the list of applications of a cluster/project (#21561)

Signed-off-by: Almo Elda <[email protected]>

Author: almoelda

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

@@ -7,6 +7,7 @@ import {AppsListPreferences, services} from '../../../shared/services';
 import {Filter, FiltersGroup} from '../filter/filter';
 import * as LabelSelector from '../label-selector';
 import {ComparisonStatusIcon, getAppDefaultSource, HealthStatusIcon} from '../utils';
+import {formatClusterQueryParam} from '../../../shared/utils';
 
 export interface FilterResult {
     repos: boolean;
@@ -185,10 +186,7 @@ const ClusterFilter = (props: AppFilterProps) => {
         if (!cluster) {
             return dest.server || dest.name;
         }
-        if (cluster.name === cluster.server) {
-            return cluster.name;
-        }
-        return `${cluster.name} (${cluster.server})`;
+        return formatClusterQueryParam(cluster);
     };
 
     const [clusters, loading, error] = useData(() => services.clusters.list());

ui/src/app/settings/components/cluster-details/cluster-details.tsx

@@ -2,14 +2,15 @@ import * as classNames from 'classnames';
 import * as moment from 'moment';
 import * as React from 'react';
 import {FieldApi, FormField as ReactFormField, Text} from 'react-form';
-import {RouteComponentProps} from 'react-router-dom';
+import {RouteComponentProps, Link} from 'react-router-dom';
 import {from, timer} from 'rxjs';
 import {mergeMap} from 'rxjs/operators';
 
 import {FormField, Ticker} from 'argo-ui';
 import {ConnectionStateIcon, DataLoader, EditablePanel, Page, Timestamp, MapInputField} from '../../../shared/components';
 import {Cluster} from '../../../shared/models';
 import {services} from '../../../shared/services';
+import {formatClusterQueryParam} from '../../../shared/utils';
 
 function isRefreshRequested(cluster: Cluster): boolean {
     return cluster.info.connectionState.attemptedAt && cluster.refreshRequestedAt && moment(cluster.info.connectionState.attemptedAt).isBefore(moment(cluster.refreshRequestedAt));
@@ -86,6 +87,23 @@ export const ClusterDetails = (props: RouteComponentProps<{server: string}>) =>
                                     view: ((cluster.namespaces || []).length === 0 && 'All namespaces') || cluster.namespaces.join(', '),
                                     edit: formApi => <FormField formApi={formApi} field='namespaces' component={NamespacesEditor} />
                                 },
+                                {
+                                    title: 'APPLICATIONS',
+                                    view: (
+                                        <div>
+                                            <DataLoader load={() => services.applications.list([])}>
+                                                {apps => (
+                                                    <Link to={`/applications?cluster=${formatClusterQueryParam(cluster)}`}>
+                                                        {
+                                                            apps.items.filter(app => app.spec.destination.name === cluster.name || app.spec.destination.server === cluster.server)
+                                                                .length
+                                                        }
+                                                    </Link>
+                                                )}
+                                            </DataLoader>
+                                        </div>
+                                    )
+                                },
                                 {
                                     title: 'LABELS',
                                     view: Object.keys(cluster.labels || [])

ui/src/app/settings/components/project-details/project-details.tsx

@@ -4,6 +4,7 @@ import * as PropTypes from 'prop-types';
 import * as React from 'react';
 import {FormApi, Text} from 'react-form';
 import {RouteComponentProps} from 'react-router';
+import {Link} from 'react-router-dom';
 
 import {BadgePanel, CheckboxField, DataLoader, EditablePanel, ErrorNotification, MapInputField, Page, Query} from '../../../shared/components';
 import {AppContext, Consumer, AuthSettingsCtx} from '../../../shared/context';
@@ -610,6 +611,16 @@ export class ProjectDetails extends React.Component<RouteComponentProps<{name: s
                                     <DataLoader load={() => services.projects.getLinks(proj.metadata.name)}>{links => <DeepLinks links={links.items} />}</DataLoader>
                                 </div>
                             )
+                        },
+                        {
+                            title: 'APPLICATIONS',
+                            view: (
+                                <div>
+                                    <DataLoader load={() => services.applications.list([proj.metadata.name])}>
+                                        {apps => <Link to={'/applications?proj=' + proj.metadata.name}>{apps.items.length}</Link>}
+                                    </DataLoader>
+                                </div>
+                            )
                         }
                     ]}
                 />

ui/src/app/shared/utils.ts

@@ -1,4 +1,5 @@
 import React from 'react';
+import {Cluster} from './models';
 
 export function hashCode(str: string) {
     let hash = 0;
@@ -104,3 +105,10 @@ export const useTheme = (props: {theme: string}) => {
 
     return [theme];
 };
+
+export const formatClusterQueryParam = (cluster: Cluster) => {
+    if (cluster.name === cluster.server) {
+        return cluster.name;
+    }
+    return `${cluster.name} (${cluster.server})`;
+};