github.com/argoproj/argo-cd/v2@v2.10.9/docs/developer-guide/extensions/ui-extensions.md (about)

     1  # UI Extensions
     2  
     3  Argo CD web user interface can be extended with additional UI elements. Extensions should be delivered as a javascript file
     4  in the `argocd-server` Pods that are placed in the `/tmp/extensions` directory and starts with `extension` prefix ( matches to `^extension(.*)\.js$` regex ).
     5  
     6  ```
     7  /tmp/extensions
     8  ├── example1
     9  │   └── extension-1.js
    10  └── example2
    11      └── extension-2.js
    12  ```
    13  
    14  Extensions are loaded during initial page rendering and should register themselves using API exposed in the `extensionsAPI` global variable. (See
    15  corresponding extension type details for additional information).
    16  
    17  The extension should provide a React component that is responsible for rendering the UI element. Extension should not bundle the React library.
    18  Instead extension should use the `react` global variable. You can leverage `externals` setting if you are using webpack:
    19  
    20  ```js
    21  externals: {
    22    react: "React";
    23  }
    24  ```
    25  
    26  ## Resource Tab Extensions
    27  
    28  Resource Tab extensions is an extension that provides an additional tab for the resource sliding panel at the Argo CD Application details page.
    29  
    30  The resource tab extension should be registered using the `extensionsAPI.registerResourceExtension` method:
    31  
    32  ```typescript
    33  registerResourceExtension(component: ExtensionComponent, group: string, kind: string, tabTitle: string)
    34  ```
    35  
    36  - `component: ExtensionComponent` is a React component that receives the following properties:
    37  
    38    - application: Application - Argo CD Application resource;
    39    - resource: State - the Kubernetes resource object;
    40    - tree: ApplicationTree - includes list of all resources that comprise the application;
    41  
    42    See properties interfaces in [models.ts](https://github.com/argoproj/argo-cd/blob/master/ui/src/app/shared/models.ts)
    43  
    44  - `group: string` - the glob expression that matches the group of the resource; note: use globstar (`**`) to match all groups including empty string;
    45  - `kind: string` - the glob expression that matches the kind of the resource;
    46  - `tabTitle: string` - the extension tab title.
    47  - `opts: Object` - additional options:
    48    - `icon: string` - the class name the represents the icon from the [https://fontawesome.com/](https://fontawesome.com/) library (e.g. 'fa-calendar-alt');
    49  
    50  Below is an example of a resource tab extension:
    51  
    52  ```javascript
    53  ((window) => {
    54    const component = () => {
    55      return React.createElement("div", {}, "Hello World");
    56    };
    57    window.extensionsAPI.registerResourceExtension(
    58      component,
    59      "*",
    60      "*",
    61      "Nice extension"
    62    );
    63  })(window);
    64  ```
    65  
    66  ## System Level Extensions
    67  
    68  Argo CD allows you to add new items to the sidebar that will be displayed as a new page with a custom component when clicked. The system level extension should be registered using the `extensionsAPI.registerSystemLevelExtension` method:
    69  
    70  ```typescript
    71  registerSystemLevelExtension(component: ExtensionComponent, title: string, options: {icon?: string})
    72  ```
    73  
    74  Below is an example of a simple system level extension:
    75  
    76  ```typescript
    77  ((window) => {
    78    const component = () => {
    79      return React.createElement(
    80        "div",
    81        { style: { padding: "10px" } },
    82        "Hello World"
    83      );
    84    };
    85    window.extensionsAPI.registerSystemLevelExtension(
    86      component,
    87      "Test Ext",
    88      "/hello",
    89      "fa-flask"
    90    );
    91  })(window);
    92  ```
    93  
    94  ## Application Tab Extensions
    95  
    96  Since the Argo CD Application is a Kubernetes resource, application tabs can be the same as any other resource tab.
    97  Make sure to use 'argoproj.io'/'Application' as group/kind and an extension will be used to render the application-level tab.
    98  
    99  ## Application Status Panel Extensions
   100  
   101  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:
   102  
   103  ```typescript
   104  registerStatusPanelExtension(component: StatusPanelExtensionComponent, title: string, id: string, flyout?: ExtensionComponent)
   105  ```
   106  
   107  Below is an example of a simple extension:
   108  
   109  ```typescript
   110  ((window) => {
   111    const component = () => {
   112      return React.createElement(
   113        "div",
   114        { style: { padding: "10px" } },
   115        "Hello World"
   116      );
   117    };
   118    window.extensionsAPI.registerStatusPanelExtension(
   119      component,
   120      "My Extension",
   121      "my_extension"
   122    );
   123  })(window);
   124  ```
   125  
   126  ### Flyout widget
   127  
   128  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`.
   129  
   130  Below is an example of an extension using the flyout widget:
   131  
   132  ```typescript
   133  ((window) => {
   134    const component = (props: {
   135        openFlyout: () => any
   136      }) => {
   137      return React.createElement(
   138        "div",
   139        { 
   140          style: { padding: "10px" },
   141          onClick: () => props.openFlyout()
   142        },
   143        "Hello World"
   144      );
   145    };
   146    const flyout = () => {
   147      return React.createElement(
   148        "div",
   149        { style: { padding: "10px" } },
   150        "This is a flyout"
   151      );
   152    };
   153    window.extensionsAPI.registerStatusPanelExtension(
   154      component,
   155      "My Extension",
   156      "my_extension",
   157      flyout
   158    );
   159  })(window);
   160  ```