WIP event sub processes

Author: philippfromme

lib/TaskExecution.js

@@ -160,6 +160,7 @@ export default class TaskExecution extends EventEmitter {
 
 
       const waitingItems = buildWaitingItems(jobsResult, userTasksResult, messageSubscriptionsResult, elementInstancesResult);
+      enrichEventSubProcessChildren(waitingItems, elementInstancesResult, this._elementRegistry);
 
       if (waitingItems.length) {
 
@@ -552,14 +553,14 @@ export function buildWaitingItems(jobsResult, userTasksResult, messageSubscripti
     }
   }
 
-  // Add boundary events as waiting items
+  // Add boundary events and event sub-processes as waiting items
   if (elementInstancesResult.success) {
     for (const element of (elementInstancesResult.response.items || [])) {
-      if (element.type !== 'BOUNDARY_EVENT') {
-        continue;
+      if (element.type === 'BOUNDARY_EVENT') {
+        items.push({ type: 'boundary-event', data: element });
+      } else if (element.type === 'EVENT_SUB_PROCESS') {
+        items.push({ type: 'event-sub-process', data: element });
       }
-
-      items.push({ type: 'boundary-event', data: element });
     }
   }
 
@@ -578,7 +579,7 @@ export function buildWaitingItems(jobsResult, userTasksResult, messageSubscripti
 function getItemTimestamp(item) {
   const data = item.data || {};
 
-  if (item.type === 'boundary-event') {
+  if (item.type === 'boundary-event' || item.type === 'event-sub-process') {
     return data.startDate ? new Date(data.startDate).getTime() : 0;
   }
 
@@ -670,6 +671,47 @@ export function buildChildElements(elementInstancesResult, elementId, childEleme
  * @param {import('./types').ApiResponse<import('@camunda8/sdk/dist/c8/lib/C8Dto').SearchVariablesResponse>} [variablesResult]
  * @returns {import('./types').ChildElement[]}
  */
+/**
+ * Enrich event sub-process waiting items with their child element instances.
+ *
+ * @param {import('./types').WaitingItem[]} waitingItems
+ * @param {import('./types').ApiResponse<import('@camunda8/sdk/dist/c8/lib/C8Dto').SearchElementInstancesResponse>} elementInstancesResult
+ * @param {Object} elementRegistry
+ */
+function enrichEventSubProcessChildren(waitingItems, elementInstancesResult, elementRegistry) {
+  if (!elementInstancesResult.success) {
+    return;
+  }
+
+  const allInstances = elementInstancesResult.response.items || [];
+
+  for (const item of waitingItems) {
+    if (item.type !== 'event-sub-process') {
+      continue;
+    }
+
+    const espId = item.data.elementId;
+    const childIds = getChildElementIds(elementRegistry, espId);
+
+    if (!childIds.size) {
+      continue;
+    }
+
+    item.children = allInstances
+      .filter(el => childIds.has(el.elementId))
+      .map(el => ({
+        elementId: el.elementId,
+        elementName: el.elementName,
+        type: el.type,
+        state: el.state,
+        startDate: el.startDate,
+        endDate: el.endDate,
+        hasIncident: el.hasIncident
+      }))
+      .sort((a, b) => new Date(a.startDate).getTime() - new Date(b.startDate).getTime());
+  }
+}
+
 function enrichChildrenWithVariables(children, elementInstancesResult, variablesResult) {
   if (!variablesResult?.success || !elementInstancesResult.success) {
     return children;

lib/components/Output/ExecutionLog.jsx

@@ -27,7 +27,8 @@ const WAITING_ITEM_LABELS = {
   'job-inactive': 'Job waiting to be activated',
   'user-task-form': 'User task waiting for completion',
   'message-subscription': 'Waiting for message',
-  'boundary-event': 'Boundary event triggered'
+  'boundary-event': 'Boundary event triggered',
+  'event-sub-process': 'Event sub-process triggered'
 };
 
 const WAITING_ITEM_FINISHED_LABELS = {
@@ -60,8 +61,8 @@ function getWaitingItemDetails(item) {
     return [];
   }
 
-  // Handle boundary events
-  if (item.type === 'boundary-event') {
+  // Handle boundary events and event sub-processes
+  if (item.type === 'boundary-event' || item.type === 'event-sub-process') {
     const details = [];
 
     if (item.data.elementId) {
@@ -193,8 +194,8 @@ function getWaitingItemBadges(item) {
     badges.push({ text: item.data.type });
   }
 
-  // Boundary event badge - show element name or ID
-  if (item.type === 'boundary-event' && item.data) {
+  // Boundary event or event sub-process badge - show element name or ID
+  if ((item.type === 'boundary-event' || item.type === 'event-sub-process') && item.data) {
     const label = item.data.elementName || item.data.elementId;
     if (label) badges.push({ text: label });
   }
@@ -415,7 +416,9 @@ function WaitingItem({ item, timestamp, isLast, isFinished, onSelectElement }) {
   const badges = getWaitingItemBadges(item);
 
   const isBoundaryEvent = item.type === 'boundary-event';
-  const isClickable = isBoundaryEvent && onSelectElement && item.data?.elementId;
+  const isEventSubProcess = item.type === 'event-sub-process';
+  const isClickable = (isBoundaryEvent || isEventSubProcess) && onSelectElement && item.data?.elementId;
+  const hasChildren = isEventSubProcess && item.children?.length > 0;
 
   const isPending = !isFinished && isPendingItem(item);
 
@@ -428,8 +431,10 @@ function WaitingItem({ item, timestamp, isLast, isFinished, onSelectElement }) {
     ? <ChevronDown size={ 14 } />
     : <ChevronRight size={ 14 } />;
 
+  const isExpandable = hasDetails || hasChildren;
+
   const handleExpandToggle = () => {
-    if (hasDetails) {
+    if (isExpandable) {
       setExpanded(!expanded);
     }
   };
@@ -443,17 +448,17 @@ function WaitingItem({ item, timestamp, isLast, isFinished, onSelectElement }) {
 
   const entryClass = [
     'execution-log__entry',
-    hasDetails ? 'execution-log__entry--expandable' : ''
+    isExpandable ? 'execution-log__entry--expandable' : ''
   ].filter(Boolean).join(' ');
 
   return (
     <li className={ `execution-log__entry-wrapper${isPending ? ' execution-log__entry-wrapper--active' : ''}` }>
       <span className={ dotClass } />
       <div
         className={ entryClass }
-        onClick={ hasDetails ? handleExpandToggle : undefined }
+        onClick={ isExpandable ? handleExpandToggle : undefined }
       >
-        { hasDetails && <span className="execution-log__toggle">{ toggleIcon }</span> }
+        { isExpandable && <span className="execution-log__toggle">{ toggleIcon }</span> }
         <span className="execution-log__label">{ label }</span>
         { badges.map((badge, i) => {
           const badgeClass = [
@@ -485,6 +490,13 @@ function WaitingItem({ item, timestamp, isLast, isFinished, onSelectElement }) {
           )) }
         </dl>
       ) }
+      { isEventSubProcess && item.children?.length > 0 && (
+        <ol className="execution-log__children-list">
+          { item.children.map((child, i) => (
+            <ChildElement key={ i } child={ child } />
+          )) }
+        </ol>
+      ) }
     </li>
   );
 }

lib/style/style.scss

@@ -549,17 +549,6 @@
     .execution-log__child-item {
       position: relative;
       padding: 3px 0;
-
-      .execution-log__dot {
-        width: 6px;
-        height: 6px;
-        left: -13px;
-        top: 9px;
-      }
-
-      .execution-log__entry {
-        font-size: 13px;
-      }
     }
 
     .execution-log__child-variables {

lib/types.d.ts

@@ -86,6 +86,10 @@ export type WaitingItem =
   | {
       type: 'boundary-event';
       data: any;
+    }
+  | {
+      type: 'event-sub-process';
+      data: any;
     };
 
 export type WaitingState = {