Issue #1167 - Allow enabling/disabling orphaned resources using UI (#2186)

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

@@ -98,8 +98,8 @@ function filterGraph(app: models.Application, filteredIndicatorParent: string, g
     }
 }
 
-function compareNodes(first: models.ResourceNode, second: models.ResourceNode) {
-    return nodeKey(first).localeCompare(nodeKey(second));
+function compareNodes(first: ResourceTreeNode, second: ResourceTreeNode) {
+    return `${first.orphaned && '1' || '0'}/${nodeKey(first)}`.localeCompare(`${second.orphaned && '1' || '0'}/${nodeKey(second)}`);
 }
 
 function appNodeKey(app: models.Application) {

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

@@ -1,4 +1,4 @@
-import { NotificationsApi, NotificationType, SlidingPanel, Tabs } from 'argo-ui';
+import { NotificationsApi, NotificationType, SlidingPanel, Tabs, Tooltip } from 'argo-ui';
 import * as React from 'react';
 import { FormApi } from 'react-form';
 import { RouteComponentProps } from 'react-router';
@@ -16,6 +16,14 @@ interface ProjectDetailsState {
     token: string;
 }
 
+function helpTip(text: string) {
+    return (
+        <Tooltip content={text}>
+            <span style={{fontSize: 'smaller'}}> <i className='fa fa-question-circle'/></span>
+        </Tooltip>
+    );
+}
+
 export class ProjectDetails extends React.Component<RouteComponentProps<{ name: string; }>, ProjectDetailsState> {
     private projectFormApi: FormApi;
     private projectRoleFormApi: FormApi;
@@ -87,6 +95,8 @@ export class ProjectDetails extends React.Component<RouteComponentProps<{ name:
                                         clusterResourceWhitelist: proj.spec.clusterResourceWhitelist || [],
                                         namespaceResourceBlacklist: proj.spec.namespaceResourceBlacklist || [],
                                         roles: proj.spec.roles || [],
+                                        orphanedResourcesEnabled: !!proj.spec.orphanedResources,
+                                        orphanedResourcesWarn: proj.spec.orphanedResources && (proj.spec.orphanedResources.warn === undefined || proj.spec.orphanedResources.warn),
                                         }} getApi={(api) => this.projectFormApi = api} submit={async (projParams) => {
                                             try {
                                                 await services.projects.update(projParams);
@@ -255,7 +265,7 @@ export class ProjectDetails extends React.Component<RouteComponentProps<{ name:
                 </div>
             </div>
 
-            <h4>Source repositories</h4>
+            <h4>Source repositories {helpTip('Git repositories where application manifests are permitted to be retrieved from')}</h4>
             {(proj.spec.sourceRepos || []).length > 0 && (
             <div className='argo-table-list'>
                 <div className='argo-table-list__head'>
@@ -274,7 +284,7 @@ export class ProjectDetails extends React.Component<RouteComponentProps<{ name:
                 ))}
             </div>) || <div className='white-box'><p>Project has no source repositories</p></div>}
 
-            <h4>Destinations</h4>
+            <h4>Destinations {helpTip('Cluster and namespaces where applications are permitted to be deployed to')}</h4>
             {(proj.spec.destinations || []).length > 0 && (
             <div className='argo-table-list'>
                 <div className='argo-table-list__head'>
@@ -297,7 +307,7 @@ export class ProjectDetails extends React.Component<RouteComponentProps<{ name:
                 ))}
             </div>) || <div className='white-box'><p>Project has no destinations</p></div>}
 
-            <h4>Whitelisted cluster resources</h4>
+            <h4>Whitelisted cluster resources {helpTip('Cluster-scoped K8s API Groups and Kinds which are permitted to be deployed')}</h4>
             {(proj.spec.clusterResourceWhitelist || []).length > 0 && (
             <div className='argo-table-list'>
                 <div className='argo-table-list__head'>
@@ -320,7 +330,7 @@ export class ProjectDetails extends React.Component<RouteComponentProps<{ name:
                 ))}
             </div>) || <div className='white-box'><p>No cluster-scoped resources are permitted to deploy</p></div>}
 
-            <h4>Blacklisted namespaced resources</h4>
+            <h4>Blacklisted namespaced resources {helpTip('Namespace-scoped K8s API Groups and Kinds which are prohibited from being deployed')}</h4>
             {(proj.spec.namespaceResourceBlacklist || []).length > 0 && (
             <div className='argo-table-list'>
                 <div className='argo-table-list__head'>
@@ -342,6 +352,25 @@ export class ProjectDetails extends React.Component<RouteComponentProps<{ name:
                     </div>
                 ))}
             </div>) || <div className='white-box'><p>All namespaced-scoped resources are permitted to deploy</p></div>}
+
+            <h4>Orphaned Resource Monitoring {helpTip('Enables monitoring of top level resources in the application target namespace')}</h4>
+
+            <div className='white-box'>
+                <div className='white-box__details'>
+                    {proj.spec.orphanedResources && (
+                        <div className='row white-box__details-row'>
+                            <div className='columns small-3'>
+                                WARN
+                            </div>
+                            <div className='columns small-9'>
+                                {(proj.spec.orphanedResources.warn === undefined || proj.spec.orphanedResources.warn) && 'enabled' || 'disabled'}
+                            </div>
+                        </div>
+                    ) || (
+                        <p>Orphan resources monitoring is disabled</p>
+                    )}
+                </div>
+            </div>
         </div>
         );
     }

ui/src/app/settings/components/project-edit-panel/project-edit-panel.tsx

@@ -2,7 +2,7 @@ import {FormField, FormSelect} from 'argo-ui';
 import * as React from 'react';
 import {Form, FormApi, Text} from 'react-form';
 
-import {AutocompleteField, clusterTitle, DataLoader} from '../../../shared/components';
+import {AutocompleteField, CheckboxField, clusterTitle, DataLoader} from '../../../shared/components';
 import * as models from '../../../shared/models';
 import {ProjectParams, services} from '../../../shared/services';
 
@@ -156,6 +156,15 @@ export const ProjectEditPanel = (props: {
                         blacklist new namespaced resource
                     </a>
                 </React.Fragment>
+
+                <React.Fragment>
+                    <h4>Orphaned Resource Monitoring</h4>
+                    <div>Enables monitoring of top level resources in the application target namespace</div>
+                    <FormField formApi={api} label='Enabled' field='orphanedResourcesEnabled' component={CheckboxField} />
+                    {api.values.orphanedResourcesEnabled && (
+                        <FormField formApi={api} label='Warn' field='orphanedResourcesWarn' component={CheckboxField} />
+                    )}
+                </React.Fragment>
             </form>
         )}
     </Form>

ui/src/app/shared/models.ts

@@ -499,6 +499,7 @@ export interface ProjectSpec {
     roles: ProjectRole[];
     clusterResourceWhitelist: GroupKind[];
     namespaceResourceBlacklist: GroupKind[];
+    orphanedResources?: { warn?: boolean };
 }
 
 export interface Project {

ui/src/app/shared/services/projects-service.ts

@@ -10,6 +10,8 @@ export interface ProjectParams {
     roles: models.ProjectRole[];
     clusterResourceWhitelist: models.GroupKind[];
     namespaceResourceBlacklist: models.GroupKind[];
+    orphanedResourcesEnabled: boolean;
+    orphanedResourcesWarn: boolean;
 }
 
 export interface CreateJWTTokenParams {
@@ -67,6 +69,7 @@ function paramsToProj(params: ProjectParams) {
             roles: params.roles,
             clusterResourceWhitelist: params.clusterResourceWhitelist,
             namespaceResourceBlacklist: params.namespaceResourceBlacklist,
+            orphanedResources: params.orphanedResourcesEnabled && { warn: !!params.orphanedResourcesWarn } || null,
         },
     };
 }