feat: support multiple extensions per resource group/kind

[alexmt]

Signed-off-by: Alexander Matyushentsev AMatyushentsev@gmail.com

PR improves the UI extensions functionality and allows having multiple extensions for the same resource group/kind. The changes are documented in docs/developer-guide/ui-extensions.md. Duplicating it here for convenience:

UI Extensions

Argo CD web user interface can be extended with additional UI elements. Extensions should be delivered as a javascript file
in the argocd-server Pods that are placed in the /tmp/extensions directory and starts with extension prefix ( matches to ^extension(.*).js$ regex ).

/tmp/extensions
├── example1
│   └── extension-1.js
└── example2
    └── extension-2.js

Extensions are loaded during initial page rendering and should register themselves using API exposed in the extensionsAPI global variable. (See
corresponding extention type details for additional information).

The extension should provide a React component that is responsible for rendering the UI element. Extension should not bundle the React library.
Instead extension should use the react global variable. You can leverage externals setting if you are using webpack:

  externals: {
    react: 'React'
  }

Resource Tab Extensions

Resource Tab extensions is an extension that provides an additional tab for the resource sliding panel at the Argo CD Application details page.

The resource tab extension should be registered using the extensionsAPI.registerResourceExtension method:

registerResourceExtension(component: ExtensionComponent, group: string, kind: string, tabTitle: string)

• component: ExtensionComponent is a React component that receives the following properties:

  • resource: State - the kubernetes resource object;
  • tree: ApplicationTree - includes list of all resources that comprise the application;

  See properties interfaces in models.ts

• group: string - the glob expression that matches the group of the resource;

• kind: string - the glob expression that matches the kind of the resource;

• tabTitle: string - the extension tab title.

Below is an example of a resource tab extension:

((window) => {
    const component = () => {
        return React.createElement( 'div', {}, 'Hello World' );
    };
    window.extensionsAPI.registerResourceExtension(component, '*', '*', 'Nice extension');
})(window)

[codecov]

Codecov Report

Merging #9834 (f9fb1b9) into master (7630d43) will decrease coverage by 0.08%.
The diff coverage is 8.33%.

@@            Coverage Diff             @@
##           master    #9834      +/-   ##
==========================================
- Coverage   45.86%   45.77%   -0.09%     
==========================================
  Files         227      227              
  Lines       26861    27027     +166     
==========================================
+ Hits        12319    12372      +53     
- Misses      12862    12965     +103     
- Partials     1680     1690      +10     

Impacted Files	Coverage Δ
server/server.go	50.86% <8.33%> (-2.32%)	⬇️
util/argo/resource_tracking.go	70.11% <0.00%> (-1.68%)	⬇️
cmd/argocd-k8s-auth/commands/aws.go	17.64% <0.00%> (-0.36%)	⬇️
server/application/websocket.go	8.00% <0.00%> (-0.34%)	⬇️
cmd/argocd/commands/cluster.go	8.89% <0.00%> (-0.28%)	⬇️
cmd/argocd/commands/admin/settings_rbac.go	23.80% <0.00%> (-0.26%)	⬇️
cmd/argocd/commands/admin/project.go	27.97% <0.00%> (-0.20%)	⬇️
cmd/argocd/commands/app.go	20.00% <0.00%> (-0.15%)	⬇️
controller/cache/cache.go	20.88% <0.00%> (-0.14%)	⬇️
... and 40 more

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 7630d43...f9fb1b9. Read the comment docs.

[jannfis]

I have some nit about io/ioutil package.

[crenshaw-dev]

I think we should either stream this out or add a cache. Total file of extensions will probably usually be small (<1MB), but an attacker could put memory pressure on the API server by making a bunch of requests to this endpoint.

[alexmt]

Agree. Working on adding caching. Sorry, answered too soon. The only difference if this endpoint from http.FileServer is that it serves multiple files instead of one which is not a big difference.

We could introduce something like fsnotify but it known to cause problems in k8s (leaking file handlers). I don't think it worth it. So I would do nothing right now until we discover a real issue. WDYT?

[alexmt]

resolved accidentally, unresolved :)

[crenshaw-dev]

One downside to this vs. http.FileServer is that (I believe) that library streams the requested file from disk instead of loading it fully into memory. In the case of this new behavior, multiple files are loaded simultaneously into memory before being sent out.

If we can stream the concatenated files out instead of caching them, I think that would sufficiently limit memory load on the API server.

[alexmt]

That is an awesome idea! Thank you! Working on it

[alexmt]

done!

[rbreeze]

Agree with Michael's suggestions, otherwise LGTM

[crenshaw-dev]

nitpicks and paranoia :-)

[crenshaw-dev]

Can you wrap this error?

[alexmt]

done

[crenshaw-dev]

Can you wrap this error?

[alexmt]

done