Plugin Compatibility

Please note that the code of Cockpit plugins might need to be migrated when updating Camunda BPM to a higher version (e.g. CSS styles).

Cockpit defines a plugin concept to add own functionality without being forced to extend or hack the Cockpit web application. You can add plugins at various plugin points, e.g., the processes dashboard as shown in the following example:

Plugins - 图1

The Nature of a Cockpit Plugin

A cockpit plugin is a maven jar project that is included in the cockpit webapplication as a library dependency. It provides a server-side and a client-side extension to cockpit.

The integration of a plugin into the overall cockpit architecture is depicted in the following figure.

Plugins - 图2

On the server-side, it can extend cockpit with custom SQL queries and JAX-RS resource classes. Queries (defined via MyBatis) may be used to squeeze additional intel out of an engine database or to execute custom engine operations. JAX-RS resources on the other hand extend the cockpit API and expose data to the client-side part of the plugin.

On the client-side a plugin may include AngularJS modules to extend the cockpit webapplication. Via those modules a plugin provides custom views and services.

File structure

The basic skeleton of a cockpit plugin looks as follows:

  1. cockpit-plugin/
  2. ├── src/
  3. | ├── main/
  4. | | ├── java/
  5. | | | └── org/my/plugin/
  6. | | | ├── db/
  7. | | | | └── MyDto.java (5)
  8. | | | ├── resource/
  9. | | | | ├── MyPluginRootResource.java (3)
  10. | | | | └── ... (4)
  11. | | | └── MyPlugin.java (1)
  12. | | └── resources/
  13. | | ├── META-INF/services/
  14. | | | └── org.camunda.bpm.cockpit.plugin.spi.CockpitPlugin (2)
  15. | | └── org/my/plugin/
  16. | | ├── queries/
  17. | | | └── sample.xml (6)
  18. | | └── assets/app/ (7)
  19. | | └── app/
  20. | | ├── plugin.js (8)
  21. | | ├── plugin.css (9)
  22. | | ├── view.html
  23. | | └── ...
  24. | └── test/
  25. | ├── java/
  26. | | └── org/my/plugin/
  27. | | └── MyPluginTest.java
  28. | └── resources/
  29. | └── camunda.cfg.xml
  30. └── pom.xml

As runtime relevant resource it defines

  • a plugin main class
  • a META-INF/services entry that publishes the plugin to Cockpit
  • a plugin root JAX-RS resource that wires the server-side API
  • other resources that are part of the server-side API
  • data transfer objects used by the resources
  • mapping files that provide additional cockpit queries as MyBatis mappings
  • resource directory from which client-side plugin assets are served as static files
  • a js file that bootstraps the client-side plugin in a AngularJS / RequireJS environment. This file must be named plugin.js and be located in the app directory of the plugin asset directory
  • a css file that contains the style definitions for the client-side plugin. This file must be named plugin.css and be located in the app directory of the plugin asset directory

How to develop a cockpit plugin

Plugin Exclusion (Client Side)

You can exclude some plugins from the interface by adding a cam-exclude-pluginsattribute to the HTML base tag of the page loading the interface.The content of the attribute is a comma separated list formatted like: <plugin.key>:<feature.id>.If the feature ID is not provided, the whole plugin will be excluded.

Excluding a Complete Plugin

This example will completely deactivate the action buttons on the right side of the process instance view.

  1. <base href="/"
  2. cam-exclude-plugins="cockpit.processInstance.runtime.action" />

Excluding a Plugin Feature

In this example we deactivate the cancel action in the cockpit process instance view and disable the job retry action button:

  1. <base href="/"
  2. cam-exclude-plugins="cockpit.processInstance.runtime.action:cancel-process-instance-action,
  3. cockpit.processInstance.runtime.action:job-retry-action" />

Plugin points

In this section you will find all Cockpit plugin points.To configure where you place your plugin have look at the following exampe:

  1. var ViewConfig = [ 'ViewsProvider', function(ViewsProvider) {
  2. ViewsProvider.registerDefaultView('cockpit.processDefinition.view', {
  3. id: 'runtime',
  4. priority: 20,
  5. label: 'Runtime'
  6. });
  7. }];

For more information on creating and configuring your own plugin, please see How to develop a Cockpit plugin.

Navigation

Plugins - 图3

Name: cockpit.navigation

Setup

The dashboard navigation plugins can be used to define custom menu entries.

weight

Takes a number and will defined where the plugin should be placed.The bigger the value is the most left it will be placed.A value smaller than 0 will put the menu point within the dropdown.

pagePath

A menu link will be shown in the header of the Cockpit if you set this property.The label property of the plugin is used as the “text”.

checkActive

This property can be used to control when the menu link is set to be active.You can set a function in order to set the active CSS class properly.

noDashboardSection

You can set this property to true on your plugin if you do not want it to be shownon the dashboard (but still want a menu point in the header).

access

You can dynamically determine if a section is accessible using the following notation

  1. // …
  2. access: ['angularDependency', function (angularDependency) {
  3. return function (callback) {
  4. var bool = angularDependency.something; // would hide the menu point if `bool` is false
  5. cb(null, bool);
  6. };
  7. }]
  8. // …

You can see a working example in which the plugin is hidden when no report types are found.

Dashboard

Name: cockpit.dashboard

Plugins - 图4

With Camunda BPM 7.6, the dashboard plugins of Cockpit have been re-organized and new names have beengiven to the plugin points.

The cockpit.dashboard plugin point will allow to add your custom views at the bottom of the dashboard.

Metrics

Name: cockpit.dashboard.metrics

Plugins - 图5

Processes Dashboard

Name: cockpit.processes.dashboard

Plugins - 图6

Decisions Dashboard

Name: cockpit.decisions.dashboard

Plugins - 图7

Cases Dashboard

Name: cockpit.cases.dashboard

Plugins - 图8

Process Definition Runtime Tab

Name: cockpit.processDefinition.runtime.tab

Plugins - 图9

Process Instance Runtime Tab

Name: cockpit.processInstance.runtime.tab

Plugins - 图10

Process Definition Runtime Action

Name: cockpit.processDefinition.runtime.action

Plugins - 图11

Process Instance Runtime Action

Name: cockpit.processInstance.runtime.action

Plugins - 图12

Process Definition View

Name: cockpit.processDefinition.view

Plugins - 图13

Process Instance View

Name: cockpit.processInstance.view

Plugins - 图14

Process Definition Diagram Overlay

Name: cockpit.processDefinition.diagram.plugin

Plugins - 图15

Diagram overlay plugins are a little different from other plugins.Overlay function needs to be provided, that uses bpmn-js diagram control object to to new overlays to diagram.For example look at instance count plugin.

  1. var ViewConfig = [ 'ViewsProvider', function(ViewsProvider) {
  2. ViewsProvider.registerDefaultView('cockpit.processDefinition.view', {
  3. id: 'runtime',
  4. priority: 20,
  5. label: 'Runtime',
  6. overlay: [
  7. 'control', 'processData', 'pageData', 'processDiagram',
  8. function(control, processData, pageData, processDiagram) {
  9. // Plugin code here
  10. }
  11. ]
  12. });
  13. }];

Process Instance Diagram Overlay

Name: cockpit.processInstance.diagram.plugin

Plugins - 图16

Job Definition Action

Name: cockpit.jobDefinition.action

Plugins - 图17

Decision Definition Tab

Name: cockpit.decisionDefinition.tab

Plugins - 图18

Decision Definition Action

Name: cockpit.decisionDefinition.action

Plugins - 图19

Decision Definition Table

Name: cockpit.decisionDefinition.table

Plugins - 图20

This plugin should contain an initialize function recieving a data object with the following fields:

  • decisionDefinition: The data about the decision definition corresponding to the REST response
  • decisionData: The data-depend object for the decision definition
  • tableControl: Control object for the rendered dmn-table corresponding to the dmn-table widget
    Example:
  1. ViewsProvider.registerDefaultView('cockpit.decisionDefinition.table', {
  2. id: 'my-plugin',
  3. initialize: function(data) {
  4. var viewer = data.tableControl.getViewer();
  5. // ...
  6. }
  7. });

Decision Instance Tab

Name: cockpit.decisionInstance.tab

Plugins - 图21

Decision Instance Action

Name: cockpit.decisionInstance.action

Plugins - 图22

Decision Instance Table

Name: cockpit.decisionInstance.table

Plugins - 图23

Case Definition Tab

Name: cockpit.caseDefinition.tab

Plugins - 图24

Case Definition Action

Name: cockpit.caseDefinition.action

Plugins - 图25

Case Definition Diagram Overlay

Name: cockpit.caseDefinition.diagram.overlay

Plugins - 图26

Case Instance Tab

Name: cockpit.caseInstance.tab

Plugins - 图27

Case Instance Action

Name: cockpit.caseInstance.action

Plugins - 图28

Case Instance Diagram Overlay

Name: cockpit.caseInstance.diagram.overlay

Plugins - 图29

Repository Resource Action

Name: cockpit.repository.resource.action

Plugins - 图30

Repository Resource Detail

Name: cockpit.repository.resource.detail

Plugins - 图31

Open Task Dashboard

Name: cockpit.tasks.dashboard

Plugins - 图32

See the Open Tasks Dashboard section for an example open taskdashboard plugin.

Report View

Name: cockpit.report

See the Reports section for an example report plugin.

Incident Action

Name: cockpit.incident.action

Plugins - 图33

原文: https://docs.camunda.org/manual/7.9/webapps/cockpit/extend/plugins/