UI plugins

[anbraten]

It would be cool to add own components to the UI.

Current concept:

1. Places to add UI plugins:
   1. A tab in the pipeline view (next to config, changes)
   2. A tab in the repo view (next to activity, branches, pull-requests)
2. Configure UI components (layout, the position it will be shown) in the settings of a repo
   1. layout: this would be some schema how the UI should look like, it allows the usage of existing UI elements which will later be enriched by the actual input data, might look somehow like:

   { 
     items: [
       { type: "text", value: "my.key.in.some.object", style: { text: "red" } }
       { type: "chart", value: "some.array.in.my.object" }
     ]
   }

3. position: select the place the UI should be shown and for the current approach a name for the tab
4. Provide some data to be shown by the UI plugin:
   1. The input data for a UI component could be set by calling a Woodpecker endpoint
      access should be handled by some token (injected as env var) Inject bot / api token as environment variable #368 Improve token Auth #665
   2. Echoing to stdout with a step using some bash escape sequence
   3. data would be stored as json with the repo-id / pipeline-id & a name of the ui component to the database
5. UI components would be rendered based on layout configured in repo settings (1.) and data from the pipeline (2.) on the page of a pipeline

TODOs & Discussions

• are adaptivecards suitable for this?
• ...

Samples

• list deployments
• show build artifacts Add buildin artifact support #2282 [Feature] Add support to link build assets #2298
• show test coverage

[aozomaro]

OMG, I would love this feature. In my current project I have cloned the woodpecker ui folder and have made appropriate modifications. Then we point our live instance to the “dev server” which serves this page.

This presents a maintenance problem as you can imagine though. Everyone woodpecker changes, we have to pull down the ui folder and sometimes (though very rarely) fight with a merge conflict.

Ability to add UI plugins will allow us to upgrade to the latest version without any manual interventions!

[anbraten]

@aozomaro I've updated the description a bit. What do you think about that approach?

[qwerty287]

Maybe we first need to discuss/decide #2291?

[aozomaro]

Approach looks good, however i'm a little unclear, how would i specify the plugin and how would i build it also? Using adaptivecards?

[anbraten]

Yes the idea is that Woodpecker provides UI components and you can provide a json schema that defines the layout. The pipeline will later provide data that get renders into that layout. Adaptivecards seems to be the best known option for this. This approach has the benefit that we don't risk security issues by allowing repo admins to inject code which could be abused for XSS attacks.

[aozomaro]

I am thinking I could implement this also. My use case is around adding tabs to the pipeline section though. We could allow a plugin written in vue to be dependency injected into a tab based on some server configurations. Thoughts?

[lafriks]

I currently have not seen a good way to inject something into Vue spa apps post-build