App set UI refactor rebase

ui/src/app/app.tsx

@@ -5,6 +5,7 @@ import * as React from 'react';
 import {Helmet} from 'react-helmet';
 import {Redirect, Route, RouteComponentProps, Router, Switch} from 'react-router';
 import applications from './applications';
+import applicationsets from './applicationsets';
 import help from './help';
 import login from './login';
 import settings from './settings';
@@ -30,6 +31,8 @@ type Routes = {[path: string]: {component: React.ComponentType<RouteComponentPro
 const routes: Routes = {
     '/login': {component: login.component as any, noLayout: true},
     '/applications': {component: applications.component},
+    // '/applicationsets': {component: applicationsets.component},    
+    '/applicationsets': {component: applications.component},    
     '/settings': {component: settings.component},
     '/user-info': {component: userInfo.component},
     '/help': {component: help.component}
@@ -49,6 +52,7 @@ const navItems: NavItem[] = [
         path: '/applications',
         iconClassName: 'argo-icon argo-icon-application'
     },
+
     {
         title: 'Settings',
         tooltip: 'Manage your repositories, projects, settings',
@@ -267,4 +271,4 @@ export class App extends React.Component<
     public getChildContext() {
         return {history, apis: {popup: this.popupManager, notifications: this.notificationsManager, navigation: this.navigationManager}};
     }
-}
+}

ui/src/app/applications/components/application-details/application-details-app-dropdown.tsx

@@ -53,3 +53,54 @@ export const ApplicationsDetailsAppDropdown = (props: {appName: string}) => {
         </DropDown>
     );
 };
+
+export const ApplicationSetsDetailsAppDropdown = (props: {appName: string}) => {
+    const [opened, setOpened] = React.useState(false);
+    const [appFilter, setAppFilter] = React.useState('');
+    const ctx = React.useContext(Context);
+    return (
+        <DropDown
+            onOpenStateChange={setOpened}
+            isMenu={true}
+            anchor={() => (
+                <>
+                    <i className='fa fa-search' /> <span>{props.appName}</span>
+                </>
+            )}>
+            {opened && (
+                <ul>
+                    <li>
+                        <input
+                            className='argo-field'
+                            value={appFilter}
+                            onChange={e => setAppFilter(e.target.value)}
+                            ref={el =>
+                                el &&
+                                setTimeout(() => {
+                                    if (el) {
+                                        el.focus();
+                                    }
+                                }, 100)
+                            }
+                        />
+                    </li>
+                    <DataLoader load={() => services.applicationSets.list({fields: ['items.metadata.name']})}>
+                        {apps =>
+                            apps.items
+                                .filter(app => {
+                                    return appFilter.length === 0 || app.metadata.name.toLowerCase().includes(appFilter.toLowerCase());
+                                })
+                                .slice(0, 100) // take top 100 results after filtering to avoid performance issues
+                                .map(app => (
+                                    <li key={app.metadata.name} onClick={() => ctx.navigation.goto(`/applicationSets/${app.metadata.name}`)}>
+                                        {app.metadata.name} {app.metadata.name === props.appName && ' (current)'}
+                                    </li>
+                                ))
+                        }
+                    </DataLoader>
+                </ul>
+            )}
+        </DropDown>
+    );
+};
+

ui/src/app/applications/components/application-resource-tree/application-resource-tree.tsx

@@ -47,7 +47,7 @@ export interface ResourceTreeNode extends models.ResourceNode {
 }
 
 export interface ApplicationResourceTreeProps {
-    app: models.Application;
+    app: models.AbstractApplication;
     tree: models.ApplicationTree;
     useNetworkingHierarchy: boolean;
     nodeFilter: (node: ResourceTreeNode) => boolean;
@@ -748,7 +748,10 @@ function renderResourceNode(props: ApplicationResourceTreeProps, id: string, nod
     }
     const appNode = isAppNode(node);
     const rootNode = !node.root;
-    const extLinks: string[] = props.app.status.summary.externalURLs;
+    var extLinks: string[] = [];
+    if ('summary' in props.app.status) {
+        extLinks = props.app.status.summary.externalURLs;
+    }
     const childCount = nodesHavingChildren.get(node.uid);
     return (
         <div
@@ -880,6 +883,16 @@ export const ApplicationResourceTree = (props: ApplicationResourceTreeProps) =>
     graph.setGraph({nodesep: 25, rankdir: 'LR', marginy: 45, marginx: -100, ranksep: 80});
     graph.setDefaultEdgeLabel(() => ({}));
     const overridesCount = getAppOverridesCount(props.app);
+    var status = "";
+    var health = "";
+    var isApplicationSet = true;
+    if ('sync' in props.app.status) {
+        status = props.app.status.sync.status;
+        isApplicationSet = false;
+    }
+    if ('health' in props.app.status) {
+        health = props.app.status.health;
+    }
     const appNode = {
         kind: props.app.kind,
         name: props.app.metadata.name,
@@ -888,8 +901,8 @@ export const ApplicationResourceTree = (props: ApplicationResourceTreeProps) =>
         group: 'argoproj.io',
         version: '',
         children: Array(),
-        status: props.app.status.sync.status,
-        health: props.app.status.health,
+        status: status, // props.app.status?.sync.status,
+        health: health, // props.app.status?.health,
         uid: props.app.kind + '-' + props.app.metadata.namespace + '-' + props.app.metadata.name,
         info:
             overridesCount > 0
@@ -903,7 +916,11 @@ export const ApplicationResourceTree = (props: ApplicationResourceTreeProps) =>
     };
 
     const statusByKey = new Map<string, models.ResourceStatus>();
-    props.app.status.resources.forEach(res => statusByKey.set(nodeKey(res), res));
+    var resources : models.ResourceStatus [] = [];
+    if (!isApplicationSet) {
+        resources = props.app.status.resources;
+        resources.forEach(res => statusByKey.set(nodeKey(res), res));
+    }
     const nodeByKey = new Map<string, ResourceTreeNode>();
     props.tree.nodes
         .map(node => ({...node, orphaned: false}))
@@ -1073,7 +1090,12 @@ export const ApplicationResourceTree = (props: ApplicationResourceTreeProps) =>
         }
     } else {
         // Tree view
-        const managedKeys = new Set(props.app.status.resources.map(nodeKey));
+        var managedKeys: Set<unknown>;
+        if (!isApplicationSet) {
+            managedKeys = new Set(props.app.status.resources.map(nodeKey));
+        } else {
+            managedKeys = new Set();
+        }
         const orphanedKeys = new Set(props.tree.orphanedNodes?.map(nodeKey));
         const orphans: ResourceTreeNode[] = [];
         let allChildNodes: ResourceTreeNode[] = [];