feat: add execution log

Author: philippfromme

demo/.env

@@ -1,4 +1,4 @@
-import React, { useState, useRef, useEffect } from 'react';
+import React, { useState, useRef, useEffect, useCallback } from 'react';
 
 import { debounce } from 'min-dash';
 
@@ -27,7 +27,7 @@ function App() {
 
   const [ modeler, setModeler ] = useState(null);
 
-  const [ isConnectionConfigured, setIsConnectionConfigured ] = useState(false);
+  const [ isConnectionConfigured, setIsConnectionConfigured ] = useState(true);
 
   const [ config, setConfig ] = useState(undefined);
 
@@ -66,18 +66,18 @@ function App() {
   const deploy = async () => {
     const { xml } = await modeler.saveXML();
 
-    const payload = { xml };
+    const resources = [ { name: 'diagram.bpmn', content: xml } ];
 
     if (form) {
-      payload.form = form;
+      resources.push({ name: 'form.form', content: form });
     }
 
     const response = await fetch('/api/deploy', {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json'
       },
-      body: JSON.stringify(payload)
+      body: JSON.stringify({ resources })
     });
 
     return await response.json();
@@ -119,17 +119,37 @@ function App() {
       .then(response => response.json());
   };
 
+  const searchJobs = async (processInstanceKey, elementId) => {
+    return fetch(`/api/searchJobs/${processInstanceKey}?elementId=${elementId}`)
+      .then(response => response.json());
+  };
+
+  const searchUserTasks = async (processInstanceKey, elementId) => {
+    return fetch(`/api/searchUserTasks/${processInstanceKey}?elementId=${elementId}`)
+      .then(response => response.json());
+  };
+
+  const searchMessageSubscriptions = async (processInstanceKey, elementId) => {
+    return fetch(`/api/searchMessageSubscriptions/${processInstanceKey}?elementId=${elementId}`)
+      .then(response => response.json());
+  };
+
   const { current: onConfigChanged } = useRef(debounce(config => setConfig(config), 300));
 
   // eslint-disable-next-line no-undef
   const operateURL = process.env.CAMUNDA_OPERATE_BASE_URL;
 
+  // eslint-disable-next-line no-undef
+  const tasklistURL = process.env.CAMUNDA_TASKLIST_BASE_URL;
+
   return (
     <>
       <div className="modeler" ref={ modelerRef }>
         <div id="canvas" className="canvas"></div>
-        <div id="properties" className="properties-panel"></div>
-        <div className="task-testing">
+        <ResizablePanel className="properties-panel" defaultWidth={ 300 } minWidth={ 200 } maxWidth={ 600 }>
+          <div id="properties" style={ { width: '100%', height: '100%' } }></div>
+        </ResizablePanel>
+        <ResizablePanel className="task-testing" defaultWidth={ 500 } minWidth={ 300 } maxWidth={ 800 }>
           <TestTab
             injector={ injector }
             isConnectionConfigured={ isConnectionConfigured }
@@ -160,11 +180,15 @@ function App() {
               getProcessInstance,
               getProcessInstanceVariables,
               getProcessInstanceElementInstances,
-              getProcessInstanceIncident
+              getProcessInstanceIncident,
+              searchJobs,
+              searchUserTasks,
+              searchMessageSubscriptions
             } }
             config={ config }
             onConfigChanged={ onConfigChanged }
             operateBaseUrl={ operateURL }
+            tasklistBaseUrl={ tasklistURL }
             documentationUrl="https://docs.camunda.io/"
             onTaskExecutionStarted={ (element) => {
               console.log('Task execution started:', element.id);
@@ -173,7 +197,7 @@ function App() {
               console.log('Task execution finished:', element.id, result.success ? 'success' : result.reason, result);
             } }
           />
-        </div>
+        </ResizablePanel>
       </div>
     </>
   );
@@ -196,4 +220,52 @@ function TestTab(props) {
   </TaskTesting>;
 }
 
+function ResizablePanel({ children, className, defaultWidth, minWidth, maxWidth }) {
+  const [ width, setWidth ] = useState(defaultWidth);
+  const isDragging = useRef(false);
+  const startX = useRef(0);
+  const startWidth = useRef(0);
+
+  const onMouseDown = useCallback((e) => {
+    isDragging.current = true;
+    startX.current = e.clientX;
+    startWidth.current = width;
+    document.body.style.cursor = 'col-resize';
+    document.body.style.userSelect = 'none';
+    e.preventDefault();
+  }, [ width ]);
+
+  useEffect(() => {
+    const onMouseMove = (e) => {
+      if (!isDragging.current) return;
+      const delta = startX.current - e.clientX;
+      const newWidth = Math.min(maxWidth, Math.max(minWidth, startWidth.current + delta));
+      setWidth(newWidth);
+    };
+
+    const onMouseUp = () => {
+      if (isDragging.current) {
+        isDragging.current = false;
+        document.body.style.cursor = '';
+        document.body.style.userSelect = '';
+      }
+    };
+
+    document.addEventListener('mousemove', onMouseMove);
+    document.addEventListener('mouseup', onMouseUp);
+
+    return () => {
+      document.removeEventListener('mousemove', onMouseMove);
+      document.removeEventListener('mouseup', onMouseUp);
+    };
+  }, [ minWidth, maxWidth ]);
+
+  return (
+    <div className={ className } style={ { width: `${width}px` } }>
+      <div className="resize-handle" onMouseDown={ onMouseDown } />
+      { children }
+    </div>
+  );
+}
+
 export default App;

demo/App.jsx

@@ -0,0 +1,141 @@
+/**
+ * Shared Camunda REST API wrapper.
+ *
+ * createApi(client) returns an object whose methods mirror the SDK calls used
+ * by both demo/server.mjs and test/recording/run.mjs. Every method returns a
+ * `{ success: true, response }` or `{ success: false, error }` object so
+ * callers never need their own try/catch. Recording stays with the caller.
+ *
+ * Response-shape helpers are also exported here since they depend only on the
+ * result structures produced by these methods.
+ */
+
+async function safe(promise) {
+  try {
+    const response = await promise;
+    return { success: true, response };
+  } catch (err) {
+    return { success: false, error: err.message };
+  }
+}
+
+/**
+ * @param {import('@camunda8/sdk').CamundaRestClient} client
+ */
+export function createApi(client) {
+  return {
+
+    /** @param {Array<{ name: string, content: string }>} resources */
+    deployResources(resources) {
+      return safe(client.deployResources(resources));
+    },
+
+    /**
+     * Starts a process instance scoped to a single element, which is also
+     * used as the TERMINATE_PROCESS_INSTANCE instruction target.
+     */
+    createProcessInstance({ processDefinitionKey, variables = {}, elementId }) {
+      return safe(client.createProcessInstance({
+        processDefinitionKey,
+        variables,
+        startInstructions: [ { elementId } ],
+        runtimeInstructions: [
+          { type: 'TERMINATE_PROCESS_INSTANCE', afterElementId: elementId }
+        ]
+      }));
+    },
+
+    searchProcessInstances(processInstanceKey) {
+      return safe(client.searchProcessInstances({
+        filter: { processInstanceKey }
+      }));
+    },
+
+    searchVariables(processInstanceKey) {
+      return safe(client.searchVariables({
+        filter: { processInstanceKey }
+      }));
+    },
+
+    searchJobs(processInstanceKey, elementId) {
+      return safe(client.callApiEndpoint({
+        urlPath: 'jobs/search',
+        method: 'POST',
+        body: {
+          filter: {
+            processInstanceKey,
+            ...(elementId && { elementId })
+          }
+        }
+      }));
+    },
+
+    searchUserTasks(processInstanceKey, elementId) {
+      return safe(client.searchUserTasks({
+        filter: {
+          processInstanceKey,
+          ...(elementId && { elementId })
+        }
+      }));
+    },
+
+    searchMessageSubscriptions(processInstanceKey, elementId) {
+      return safe(client.callApiEndpoint({
+        urlPath: 'message-subscriptions/search',
+        method: 'POST',
+        body: {
+          filter: {
+            processInstanceKey,
+            ...(elementId && { elementId })
+          }
+        }
+      }));
+    },
+
+    searchElementInstances(processInstanceKey) {
+      return safe(client.searchElementInstances({
+        filter: { processInstanceKey }
+      }));
+    },
+
+    searchIncidents(processInstanceKey) {
+      return safe(client.searchIncidents({
+        filter: { processInstanceKey }
+      }));
+    }
+  };
+}
+
+export function getProcessDefinitionKey(deployResponse, processId) {
+  const { deployments = [] } = deployResponse;
+  for (const deployment of deployments) {
+    if ('processDefinition' in deployment) {
+      const { processDefinition } = deployment;
+      if (processDefinition.processDefinitionId === processId) {
+        return processDefinition.processDefinitionKey;
+      }
+    }
+  }
+  return null;
+}
+
+export function getProcessInstanceKey(response) {
+  const { processInstanceKey } = response;
+  return processInstanceKey || null;
+}
+
+function getProcessInstance(response, processInstanceKey) {
+  const { items = [] } = response;
+  if (!items.length) return null;
+  return items.find(item => item.processInstanceKey === processInstanceKey) || null;
+}
+
+export function getProcessInstanceState(response, processInstanceKey) {
+  const processInstance = getProcessInstance(response, processInstanceKey);
+  return processInstance ? processInstance.state : null;
+}
+
+export function hasProcessInstanceIncident(response, processInstanceKey) {
+  const processInstance = getProcessInstance(response, processInstanceKey);
+  return processInstance ? (processInstance.hasIncident || false) : false;
+}

demo/api.mjs

@@ -15,7 +15,8 @@ const input = {
   }, null, 2),
   'ServiceTask_5': JSON.stringify({
     jobWorkerDelay: 5,
-    failJob: false
+    failJob: false,
+    terminate: false
   }, null, 2)
 };