Appsetui updates

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,7 @@ 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: applications.component}, 
     '/settings': {component: settings.component},
     '/user-info': {component: userInfo.component},
     '/help': {component: help.component}
@@ -49,9 +51,9 @@ const navItems: NavItem[] = [
         path: '/applications',
         iconClassName: 'argo-icon argo-icon-application'
     },
-    {
+        {
         title: 'Settings',
-        tooltip: 'Manage your repositories, projects, settings',
+        tooltip: 'Manage your repositories, projects, settings, application sets',
         path: '/settings',
         iconClassName: 'argo-icon argo-icon-settings'
     },

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

@@ -4,7 +4,7 @@ import * as React from 'react';
 import {Context} from '../../../shared/context';
 import {services} from '../../../shared/services';
 
-export const ApplicationsDetailsAppDropdown = (props: {appName: string}) => {
+export const ApplicationsDetailsAppDropdown = (props: {isAppSet: boolean, appName: string}) => {
     const [opened, setOpened] = React.useState(false);
     const [appFilter, setAppFilter] = React.useState('');
     const ctx = React.useContext(Context);
@@ -34,7 +34,7 @@ export const ApplicationsDetailsAppDropdown = (props: {appName: string}) => {
                             }
                         />
                     </li>
-                    <DataLoader load={() => services.applications.list([], {fields: ['items.metadata.name']})}>
+                    <DataLoader load={() => services.applications.list(!props.isAppSet, [], {fields: ['items.metadata.name']})}>
                         {apps =>
                             apps.items
                                 .filter(app => {

ui/src/app/applications/components/application-details/application-resource-filter.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import {Checkbox} from 'argo-ui/v2';
 import {ApplicationTree, HealthStatusCode, HealthStatuses, SyncStatusCode, SyncStatuses} from '../../../shared/models';
-import {AppDetailsPreferences, services} from '../../../shared/services';
+import {AppDetailsPreferences, AppSetDetailsPreferences, services} from '../../../shared/services';
 import {Context} from '../../../shared/context';
 import {Filter, FiltersGroup} from '../filter/filter';
 import {ComparisonStatusIcon, HealthStatusIcon} from '../utils';
@@ -14,17 +14,25 @@ function toOption(label: string) {
     return {label};
 }
 
-export interface FiltersProps {
+export interface AbstractFiltersProps {
     children?: React.ReactNode;
-    pref: AppDetailsPreferences;
+    pref: AppDetailsPreferences | AppSetDetailsPreferences;
     tree: ApplicationTree;
     resourceNodes: models.ResourceStatus[];
     onSetFilter: (items: string[]) => void;
     onClearFilter: () => void;
     collapsed?: boolean;
 }
 
-export const Filters = (props: FiltersProps) => {
+export interface FiltersProps extends AbstractFiltersProps{
+    pref: AppDetailsPreferences;
+}
+
+export interface AppSetFiltersProps extends AbstractFiltersProps{
+    pref: AppSetDetailsPreferences;
+}
+
+export const Filters = (props: AbstractFiltersProps) => {
     const ctx = React.useContext(Context);
 
     const {pref, tree, onSetFilter} = props;

ui/src/app/applications/components/application-details/application-resource-list.tsx

@@ -31,6 +31,7 @@ export const ApplicationResourceList = ({
         return null;
     }
     const parentNode = ((resources || []).length > 0 && (getResNode(tree.nodes, nodeKey(resources[0])) as ResourceNode)?.parentRefs?.[0]) || ({} as ResourceRef);
+    // debugger;
 
     return (
         <div>

ui/src/app/applications/components/application-pod-view/pod-view.tsx

@@ -6,7 +6,7 @@ import Moment from 'react-moment';
 import {AppContext} from '../../../shared/context';
 import {EmptyState} from '../../../shared/components';
 import {Application, ApplicationTree, HostResourceInfo, InfoItem, Node, Pod, ResourceName, ResourceNode, ResourceStatus} from '../../../shared/models';
-import {PodViewPreferences, services, ViewPreferences} from '../../../shared/services';
+import {AppDetailsPreferences, PodViewPreferences, services, ViewPreferences} from '../../../shared/services';
 
 import {ResourceTreeNode} from '../application-resource-tree/application-resource-tree';
 import {ResourceIcon} from '../resource-icon';
@@ -15,6 +15,7 @@ import {ComparisonStatusIcon, isYoungerThanXMinutes, HealthStatusIcon, nodeKey,
 
 import './pod-view.scss';
 import {PodTooltip} from './pod-tooltip';
+import { Observable } from 'rxjs';
 
 interface PodViewProps {
     tree: ApplicationTree;
@@ -48,7 +49,7 @@ export class PodView extends React.Component<PodViewProps> {
 
     public render() {
         return (
-            <DataLoader load={() => services.viewPreferences.getPreferences()}>
+            <DataLoader load={() => services.viewPreferences.getPreferences() as Observable<ViewPreferences>}>
                 {prefs => {
                     const podPrefs = prefs.appDetails.podView || ({} as PodViewPreferences);
                     const groups = this.processTree(podPrefs.sortMode, this.props.tree.hosts || []) || [];
@@ -75,7 +76,7 @@ export class PodView extends React.Component<PodViewProps> {
                                             style={{border: 'none', width: '170px'}}
                                             onClick={() =>
                                                 services.viewPreferences.updatePreferences({
-                                                    appDetails: {...prefs.appDetails, podView: {...podPrefs, hideUnschedulable: !podPrefs.hideUnschedulable}}
+                                                    appDetails: {...prefs.appDetails, podView: {...podPrefs, hideUnschedulable: !podPrefs.hideUnschedulable} } as AppDetailsPreferences
                                                 })
                                             }>
                                             <i className={`fa fa-${podPrefs.hideUnschedulable ? 'eye-slash' : 'eye'}`} style={{width: '15px', marginRight: '5px'}} />
@@ -270,7 +271,7 @@ export class PodView extends React.Component<PodViewProps> {
             ),
             action: () => {
                 this.appContext.apis.navigation.goto('.', {podSortMode: mode});
-                services.viewPreferences.updatePreferences({appDetails: {...prefs.appDetails, podView: {...podPrefs, sortMode: mode}}});
+                services.viewPreferences.updatePreferences({appDetails: {...prefs.appDetails, podView: {...podPrefs, sortMode: mode}} as AppDetailsPreferences});
             }
         }));
     }

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

@@ -4,13 +4,13 @@ import * as React from 'react';
 import {DataLoader, EventsList} from '../../../shared/components';
 import {services} from '../../../shared/services';
 
-export const ApplicationResourceEvents = (props: {applicationName: string; applicationNamespace: string; resource?: {namespace: string; name: string; uid: string}}) => (
+export const ApplicationResourceEvents = (props: {isApp: boolean, applicationName: string; applicationNamespace: string; resource?: {namespace: string; name: string; uid: string}}) => (
     <div className='application-resource-events'>
         <DataLoader
             load={() =>
                 props.resource
-                    ? services.applications.resourceEvents(props.applicationName, props.applicationNamespace, props.resource)
-                    : services.applications.events(props.applicationName, props.applicationNamespace)
+                    ? services.applications.resourceEvents(props.isApp, props.applicationName, props.applicationNamespace, props.resource)
+                    : services.applications.events(props.isApp, props.applicationName, props.applicationNamespace)
             }
             loadingRenderer={() => <MockupList height={50} marginTop={10} />}>
             {events => <EventsList events={events} />}