fix: extensions is not loading for ConfigMap/Pods (#10010)

Signed-off-by: Alexander Matyushentsev <[email protected]>
argoproj · Jul 28, 2022 · fac8466 · fac8466
1 parent ac34ff2
commit fac8466
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 8 deletions.
diff --git a/docs/developer-guide/ui-extensions.md b/docs/developer-guide/ui-extensions.md
@@ -35,14 +35,17 @@ registerResourceExtension(component: ExtensionComponent, group: string, kind: st
 
 * `component: ExtensionComponent` is a React component that receives the following properties:
 
+    * application: Application - Argo CD Application resource;
     * resource: State - the kubernetes resource object;
     * tree: ApplicationTree - includes list of all resources that comprise the application;
 
     See properties interfaces in [models.ts](https://github.com/argoproj/argo-cd/blob/master/ui/src/app/shared/models.ts)
 
-* `group: string` - the glob expression that matches the group of the resource;
+* `group: string` - the glob expression that matches the group of the resource; note: use globstar (`**`) to match all groups including empty string;
 * `kind: string` - the glob expression that matches the kind of the resource;
 * `tabTitle: string` - the extension tab title.
+* `opts: Object` - additional options:
+  * `icon: string` - the class name the represents the icon from the [https://fontawesome.com/](https://fontawesome.com/) library (e.g. 'fa-calendar-alt');
 
 Below is an example of a resource tab extension:
 

diff --git a/ui/src/app/applications/components/resource-details/resource-details.tsx b/ui/src/app/applications/components/resource-details/resource-details.tsx
@@ -122,9 +122,10 @@ export const ResourceDetails = (props: ResourceDetailsProps) => {
                     key: `extension-${i}`,
                     content: (
                         <ErrorBoundary message={`Something went wrong with Extension for ${state.kind}`}>
-                            <tabExtensions.component tree={tree} resource={state} />
+                            <tabExtensions.component tree={tree} resource={state} application={application} />
                         </ErrorBoundary>
-                    )
+                    ),
+                    icon: tabExtensions.icon
                 });
             });
         }
@@ -205,13 +206,14 @@ export const ResourceDetails = (props: ResourceDetailsProps) => {
         const extensionTabs = services.extensions.getResourceTabs('argoproj.io', 'Application').map((ext, i) => ({
             title: ext.title,
             key: `extension-${i}`,
-            content: <ext.component resource={application} tree={tree} />
+            content: <ext.component resource={application} tree={tree} application={application} />,
+            icon: ext.icon
         }));
 
         return tabs.concat(extensionTabs);
     };
 
-    const extensions = selectedNode?.kind && selectedNode?.group ? services.extensions.getResourceTabs(selectedNode?.group, selectedNode?.kind) : [];
+    const extensions = selectedNode?.kind ? services.extensions.getResourceTabs(selectedNode?.group || '', selectedNode?.kind) : [];
 
     return (
         <div style={{width: '100%', height: '100%'}}>

diff --git a/ui/src/app/shared/services/extensions-service.ts b/ui/src/app/shared/services/extensions-service.ts
@@ -1,14 +1,14 @@
 import * as React from 'react';
 import * as minimatch from 'minimatch';
 
-import {ApplicationTree, State} from '../models';
+import {Application, ApplicationTree, State} from '../models';
 
 const extensions = {
     resourceExtentions: new Array<ResourceTabExtension>()
 };
 
-function registerResourceExtension(component: ExtensionComponent, group: string, kind: string, tabTitle: string) {
-    extensions.resourceExtentions.push({component, group, kind, title: tabTitle});
+function registerResourceExtension(component: ExtensionComponent, group: string, kind: string, tabTitle: string, opts?: {icon: string}) {
+    extensions.resourceExtentions.push({component, group, kind, title: tabTitle, icon: opts?.icon});
 }
 
 let legacyInitialized = false;
@@ -30,6 +30,7 @@ export interface ResourceTabExtension {
     group: string;
     kind: string;
     component: ExtensionComponent;
+    icon?: string;
 }
 
 export type ExtensionComponent = React.ComponentType<ExtensionComponentProps>;
@@ -41,6 +42,7 @@ export interface Extension {
 export interface ExtensionComponentProps {
     resource: State;
     tree: ApplicationTree;
+    application: Application;
 }
 
 export class ExtensionsService {