feat(ui): add status panel extensions

docs/developer-guide/extensions/ui-extensions.md

@@ -95,3 +95,66 @@ Below is an example of a simple system level extension:
 
 Since the Argo CD Application is a Kubernetes resource, application tabs can be the same as any other resource tab.
 Make sure to use 'argoproj.io'/'Application' as group/kind and an extension will be used to render the application-level tab.
+
+## Application Status Panel Extensions
+
+The status panel is the bar at the top of the application view where the sync status is displayed. Argo CD allows you to add new items to the status panel of an application. The extension should be registered using the `extensionsAPI.registerStatusPanelExtension` method:
+
+```typescript
+registerStatusPanelExtension(component: StatusPanelExtensionComponent, title: string, id: string, flyout?: ExtensionComponent)
+```
+
+Below is an example of a simple extension:
+
+```typescript
+((window) => {
+  const component = () => {
+    return React.createElement(
+      "div",
+      { style: { padding: "10px" } },
+      "Hello World"
+    );
+  };
+  window.extensionsAPI.registerStatusPanelExtension(
+    component,
+    "My Extension",
+    "my_extension"
+  );
+})(window);
+```
+
+### Flyout widget
+
+It is also possible to add an optional flyout widget to your extension. It can be opened by calling `openFlyout()` from your extension's component. Your flyout component will then be rendered in a sliding panel, similar to the panel that opens when clicking on `History and rollback`.
+
+Below is an example of an extension using the flyout widget:
+
+```typescript
+((window) => {
+  const component = (props: {
+      openFlyout: () => any
+    }) => {
+    return React.createElement(
+      "div",
+      { 
+        style: { padding: "10px" },
+        onClick: () => props.openFlyout()
+      },
+      "Hello World"
+    );
+  };
+  const flyout = () => {
+    return React.createElement(
+      "div",
+      { style: { padding: "10px" } },
+      "This is a flyout"
+    );
+  };
+  window.extensionsAPI.registerStatusPanelExtension(
+    component,
+    "My Extension",
+    "my_extension",
+    flyout
+  );
+})(window);
+```

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

@@ -30,7 +30,7 @@ import {ApplicationsDetailsAppDropdown} from './application-details-app-dropdown
 import {useSidebarTarget} from '../../../sidebar/sidebar';
 
 import './application-details.scss';
-import {AppViewExtension} from '../../../shared/services/extensions-service';
+import {AppViewExtension, StatusPanelExtension} from '../../../shared/services/extensions-service';
 
 interface ApplicationDetailsState {
     page: number;
@@ -42,6 +42,8 @@ interface ApplicationDetailsState {
     collapsedNodes?: string[];
     extensions?: AppViewExtension[];
     extensionsMap?: {[key: string]: AppViewExtension};
+    statusExtensions?: StatusPanelExtension[];
+    statusExtensionsMap?: {[key: string]: StatusPanelExtension};
 }
 
 interface FilterInput {
@@ -87,6 +89,11 @@ export class ApplicationDetails extends React.Component<RouteComponentProps<{app
         extensions.forEach(ext => {
             extensionsMap[ext.title] = ext;
         });
+        const statusExtensions = services.extensions.getStatusPanelExtensions();
+        const statusExtensionsMap: {[key: string]: StatusPanelExtension} = {};
+        statusExtensions.forEach(ext => {
+            statusExtensionsMap[ext.id] = ext;
+        });
         this.state = {
             page: 0,
             groupedResources: [],
@@ -95,7 +102,9 @@ export class ApplicationDetails extends React.Component<RouteComponentProps<{app
             truncateNameOnRight: false,
             collapsedNodes: [],
             extensions,
-            extensionsMap
+            extensionsMap,
+            statusExtensions,
+            statusExtensionsMap
         };
         if (typeof this.props.match.params.appnamespace === 'undefined') {
             this.appNamespace = '';
@@ -142,6 +151,10 @@ export class ApplicationDetails extends React.Component<RouteComponentProps<{app
         return nodeContainer.key;
     }
 
+    private get selectedExtension() {
+        return new URLSearchParams(this.props.history.location.search).get('extension');
+    }
+
     private closeGroupedNodesPanel() {
         this.setState({groupedResources: []});
         this.setState({slidingPanelPage: 0});
@@ -353,6 +366,9 @@ export class ApplicationDetails extends React.Component<RouteComponentProps<{app
                                 name: application.metadata.name,
                                 namespace: application.metadata.namespace
                             });
+
+                            const activeExtension = this.state.statusExtensionsMap[this.selectedExtension];
+
                             return (
                                 <div className={`application-details ${this.props.match.params.name}`}>
                                     <Page
@@ -423,6 +439,7 @@ export class ApplicationDetails extends React.Component<RouteComponentProps<{app
                                                     showDiff={() => this.selectNode(appFullName, 0, 'diff')}
                                                     showOperation={() => this.setOperationStatusVisible(true)}
                                                     showConditions={() => this.setConditionsStatusVisible(true)}
+                                                    showExtension={id => this.setExtensionPanelVisible(id)}
                                                     showMetadataInfo={revision => this.setState({...this.state, revision})}
                                                 />
                                             </div>
@@ -732,6 +749,13 @@ export class ApplicationDetails extends React.Component<RouteComponentProps<{app
                                                     </DataLoader>
                                                 ))}
                                         </SlidingPanel>
+                                        <SlidingPanel
+                                            isShown={this.selectedExtension !== '' && activeExtension != null && activeExtension.flyout != null}
+                                            onClose={() => this.setExtensionPanelVisible('')}>
+                                            {this.selectedExtension !== '' && activeExtension && activeExtension.flyout && (
+                                                <activeExtension.flyout application={application} tree={tree} />
+                                            )}
+                                        </SlidingPanel>
                                     </Page>
                                 </div>
                             );
@@ -966,6 +990,10 @@ export class ApplicationDetails extends React.Component<RouteComponentProps<{app
         this.appContext.apis.navigation.goto('.', {rollback: selectedDeploymentIndex}, {replace: true});
     }
 
+    private setExtensionPanelVisible(selectedExtension = '') {
+        this.appContext.apis.navigation.goto('.', {extension: selectedExtension}, {replace: true});
+    }
+
     private selectNode(fullName: string, containerIndex = 0, tab: string = null) {
         SelectNode(fullName, containerIndex, tab, this.appContext.apis);
     }

ui/src/app/applications/components/application-status-panel/application-status-panel.tsx

@@ -16,6 +16,7 @@ interface Props {
     showDiff?: () => any;
     showOperation?: () => any;
     showConditions?: () => any;
+    showExtension?: (id: string) => any;
     showMetadataInfo?: (revision: string) => any;
 }
 
@@ -45,7 +46,7 @@ const sectionHeader = (info: SectionInfo, hasMultipleSources: boolean, onClick?:
     );
 };
 
-export const ApplicationStatusPanel = ({application, showDiff, showOperation, showConditions, showMetadataInfo}: Props) => {
+export const ApplicationStatusPanel = ({application, showDiff, showOperation, showConditions, showExtension, showMetadataInfo}: Props) => {
     const today = new Date();
 
     let daysSinceLastSynchronized = 0;
@@ -63,6 +64,8 @@ export const ApplicationStatusPanel = ({application, showDiff, showOperation, sh
         showOperation = null;
     }
 
+    const statusExtensions = services.extensions.getStatusPanelExtensions();
+
     const infos = cntByCategory.get('info');
     const warnings = cntByCategory.get('warning');
     const errors = cntByCategory.get('error');
@@ -203,6 +206,7 @@ export const ApplicationStatusPanel = ({application, showDiff, showOperation, sh
                     </React.Fragment>
                 )}
             </DataLoader>
+            {statusExtensions && statusExtensions.map(ext => <ext.component key={ext.title} application={application} openFlyout={() => showExtension && showExtension(ext.id)} />)}
         </div>
     );
 };

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

@@ -6,7 +6,8 @@ import {Application, ApplicationTree, State} from '../models';
 const extensions = {
     resourceExtentions: new Array<ResourceTabExtension>(),
     systemLevelExtensions: new Array<SystemLevelExtension>(),
-    appViewExtensions: new Array<AppViewExtension>()
+    appViewExtensions: new Array<AppViewExtension>(),
+    statusPanelExtensions: new Array<StatusPanelExtension>()
 };
 
 function registerResourceExtension(component: ExtensionComponent, group: string, kind: string, tabTitle: string, opts?: {icon: string}) {
@@ -21,6 +22,10 @@ function registerAppViewExtension(component: ExtensionComponent, title: string,
     extensions.appViewExtensions.push({component, title, icon});
 }
 
+function registerStatusPanelExtension(component: StatusPanelExtensionComponent, title: string, id: string, flyout?: ExtensionComponent) {
+    extensions.statusPanelExtensions.push({component, flyout, title, id});
+}
+
 let legacyInitialized = false;
 
 function initLegacyExtensions() {
@@ -56,9 +61,18 @@ export interface AppViewExtension {
     icon?: string;
 }
 
+export interface StatusPanelExtension {
+    component: StatusPanelExtensionComponent;
+    flyout?: StatusPanelExtensionFlyoutComponent;
+    title: string;
+    id: string;
+}
+
 export type ExtensionComponent = React.ComponentType<ExtensionComponentProps>;
 export type SystemExtensionComponent = React.ComponentType;
 export type AppViewExtensionComponent = React.ComponentType<AppViewComponentProps>;
+export type StatusPanelExtensionComponent = React.ComponentType<StatusPanelComponentProps>;
+export type StatusPanelExtensionFlyoutComponent = React.ComponentType<StatusPanelFlyoutProps>;
 
 export interface Extension {
     component: ExtensionComponent;
@@ -75,6 +89,16 @@ export interface AppViewComponentProps {
     tree: ApplicationTree;
 }
 
+export interface StatusPanelComponentProps {
+    application: Application;
+    openFlyout: () => any;
+}
+
+export interface StatusPanelFlyoutProps {
+    application: Application;
+    tree: ApplicationTree;
+}
+
 export class ExtensionsService {
     public getResourceTabs(group: string, kind: string): ResourceTabExtension[] {
         initLegacyExtensions();
@@ -89,6 +113,10 @@ export class ExtensionsService {
     public getAppViewExtensions(): AppViewExtension[] {
         return extensions.appViewExtensions.slice();
     }
+
+    public getStatusPanelExtensions(): StatusPanelExtension[] {
+        return extensions.statusPanelExtensions.slice();
+    }
 }
 
 ((window: any) => {
@@ -97,6 +125,7 @@ export class ExtensionsService {
     window.extensionsAPI = {
         registerResourceExtension,
         registerSystemLevelExtension,
-        registerAppViewExtension
+        registerAppViewExtension,
+        registerStatusPanelExtension
     };
 })(window);