Minimal Cockpit "history plugins" for Camunda >= 7.14.0

Hi @tmetzke thanks for your answer !

Unfortunately I tried it but it doesn’t works on my side.

Anthony

Hey @canthony, thanks for the update.

Too bad this doesn’t work for you. I will try to follow-up on this within the next days.
In the meantime, if someone else has already achieved this, feel free to update here :slight_smile:

@canthony, could you detail a bit more what exactly you tried? Did you override the config.js as well as @datakurre mentioned?

Hi,

I tried to copy all script files into configuration/userlib/META-INF/resources/webjars/camunda/app/cockpit/scripts within my dockerfile.

FROM camunda/camunda-bpm-platform:run-7.14.0
COPY --chown=camunda:camunda scripts/* configuration/userlib/META-INF/resources/webjars/camunda/app/cockpit/scripts/

Following @datakurre’s tutorial I’m able to use the plugin without using the run image.

Thanks for help,
Anthony

2 Likes

Finally managed to find time to add toggle for sequence flow rendering, and that is now merged into master:

output

While the rendering works for my current use cases, there must be unimaginable amount of corner cases where it fails to render correctly. Issues with example processes are welcome.

Since the first versions, there are also some other minor improvements like linking historic sub process and DMN executions from “Audit Log”.

Next up is some hidden refactoring to make bundled diagram and tab plugins actually be controlled by the same React app to make them share state and be able to e.g. implement shared filter for historic executions rendered on definition level:

At times,I feel a bit stupid having to re-implement “camunda commons ui” components with inferior versions to have some features taken for granted, but that’s probably the way until upcoming Camunda versions re-introduce commons ui library and it is usable outside Angular.

3 Likes

I finally found a little hack that works for me :

FROM camunda/camunda-bpm-platform:run-7.14.0
COPY --chown=camunda:camunda camunda-cockpit-plugins/* /camunda/META-INF/resources/webjars/camunda/app/cockpit/scripts/

USER root
RUN apk add --no-cache zip
RUN zip -r internal/webapps/camunda-webapp-webjar-7.14.0.jar META-INF
USER camunda
3 Likes

Thanks for sharing, @canthony!

Hey @canthony,

would you mind detailing a bit on how and why this works so others can get a better idea on this particular approach? :smiley:

Official support and documentation of Cockpit Plugins in Camunda Run might come with a future release, but until then I guess it would help a lot of people with the same intentions that find this thread here :slight_smile:

Thanks and best,
Tobias

This is amazing, I am studying how to implement similar history tab in the tasklist. Show audit log of the process-instance currentUser started.
Will some modification to your js file do the job?

1 Like

My thought now is to send a request to /history/process-instance?startedBy={ insert Current User Id Here} to get the process-instance then start from there.

Sounds possible. Once you have the processInstanceId from task details, you should be able to re-use: camunda-cockpit-plugins/src/instance-historic-activities.tsx at master · datakurre/camunda-cockpit-plugins · GitHub

That was easier than I thought. If you checkout the latest version of my project, enter that directory and start Docker with (on MacOS or Linux):

docker run --rm -p 8082:8080 -v $(pwd):/camunda/webapps/camunda/app/cockpit/scripts/:ro -v $(pwd)/tasklist-config.js:/camunda/webapps/camunda/app/tasklist/scripts/config.js:ro -v $(pwd)/tasklist-audit-log.js:/camunda/webapps/camunda/app/tasklist/scripts/tasklist-audit-log.js:ro  camunda/camunda-bpm-platform:7.15.0

You have both the cockpit plugins and the tasklist plugin.

Links from tasklist Audit Log to processes or decisions are still broken, because AuditLog-component expect to be already inside cockpit, but those should not be too hard…

@LevinHelix You probably want to customize the audit log columns for you use case, so just clone / fork the project and customize as you wish. I might make the component more configurable to have simpler tab for the task list than for the cockpit, but not any time too soon. (This initial implementation was fast, because I had not thought before your post about how easy the reuse could be.)

2 Likes

And those links from task audit log to cockpit are now fixed. Could be prettier, but works for now. Later I need to update documentation to take task list into account and figure out, what I do with the bad naming for the project…

OMG this is lighting response speed. I will definitely try this out. Much appreciated.

1 Like

Hello @datakurre, would it be possible to fix the case when decisions map is not available?

And one more question: Did you (or someone else) test your plugins - especially the statistics - on a cockpit having running millions of processes?

Could you elaborate more. What do you mean with “decision map” and when it is not available?

Unfortunately, it is not even close what you seem to expect. I recall, it currently fetches 100 latest events for each version of the process definition in question. That’s well enough to help when developing and testing a process, but obviously not for monitoring high volume production data.

There will be interactive filter for managing the statics query, but that branch is still incomplete and currently I have other priorities.

Even then, a frontend plugin like this can never analyze statistics for millions of process executions. In theory, a database specific process engine add-on could specify periodically updated database statistic tables with custom REST API endpoints to expose them to a cockpit plugin, but in practice, it is simpler to export the data into an external out-of-the-box BI solution.

“Could you elaborate more. What do you mean with “decision map” and when it is not available?”

new Map(decisions.map(function (decision) { return [decision.activityInstanceId, decision.id]; }));

It is not available if the DMN engine is not enabled.
I get a HTTP status code 500 for /decision-instance , /decision-definition and /decision-requirements-definition

“Unfortunately, it is not even close what you seem to expect.”

I just expect that the plugins don’t break the cockpit (by making it unusable slow) if there are millions of instances.

:+1: Exactly, why it make a such limited query until there is UI for configuring the filter.

Thanks for explaining. I agree the plugin should be fixed to not break when decision engine is not enabled. I’ll make this into an issue to remember to fix this.

2 Likes

Hi @Bernd

I tried to copy all the files (as @datakurre suggested) into ./src/main/resources/META-INF/resources/webjars/camunda/app/cockpit/scripts/camunda-cockpit-plugins
and ./src/main/resources/META-INF/resources/webjars/camunda/app/cockpit/scripts/
of my Spring Boot App.

What did exactly work for you?

Hi datakurre, @datakurre ,
I have some novice question to ask here.
I am writing a plugin for tasklist in plug-in point : tasklist.list.
my code is something like this:

const host = "http://localhost:8080"

export default {
    id: 'tasklist.myprocess',
    pluginPoint: 'tasklist.list',
    priority: -1,
    render: (node, {api}) => {

        const data = { startedBy: 'demo'}

        console.log("api", api);
        fetch(api.engineApi + "/history/process-instance", {
            method: 'post',
            body: JSON.stringify(data),
            headers: {
                "Accept": "application/json",
                "Content-Type": "application/json",
                "X-XSRF-TOKEN": api.CSRFToken,
            }
        })
            .then(async  (response) => await response.json())
            .then(async (data) => {
                const myProcessContainer = document.createElement("div");
                const banner = document.createElement("h5");
                banner.innerText = "Process created by me";
                myProcessContainer.append(banner);

                //console.log("Success:", data)
                for(let i = 0; i < data.length; i++){
                    const obj = data[i];
                    console.log(obj);
                    let process_item_div = document.createElement("div");
                    let process_item_a = document.createElement("a");

                    process_item_a.setAttribute('id', obj['id']);
                    process_item_a.innerText = obj['processDefinitionKey'] + " " + obj['startTime'];
                    process_item_a.href = host + "/camunda/app/cockpit/default/#/history/process-instance/" + obj['id']

                    process_item_div.append(process_item_a)

                    myProcessContainer.append(process_item_div);
                }
                node.innerHTML = myProcessContainer.innerHTML;
            })
            .catch((error) => {
                console.error('Error', error);
            });

    },
    properties: {
        label: 'My process instance'
    }
}

I want to know if I can get the current userId somehow and put it in my request body. so that I can get process-instance of current user from history.