WIP refactor

Author: philippfromme

lib/ExecutionLogModel.js

@@ -17,7 +17,7 @@ import theme from '../shared/CodeMirrorTheme';
 
 import { getAutocompletionExtensions } from '../../utils/autocompletion';
 
-import { SCOPES } from '../../TaskExecution';
+import { SCOPES } from '../../utils/variables';
 
 const fromPropAnnotation = Annotation.define();
 

lib/TaskExecution.js

@@ -1,3 +1,11 @@
+/**
+ * ExecutionLog — pure rendering component for the execution timeline.
+ *
+ * All log state management, entry merge semantics, display projection,
+ * and item helper logic live in {@link ../../ExecutionLogModel.js}.
+ * This file is exclusively concerned with rendering.
+ */
+
 import React, { useState } from 'react';
 
 import {
@@ -12,206 +20,17 @@ import { Link } from '@carbon/react';
 
 import OutputEditor from './OutputEditor';
 
-const STATUS_LABELS = {
-  deploying: 'Process deployed',
-  'starting-instance': 'Process instance created',
-  executing: null,
-  completed: 'Process instance completed',
-  incident: 'Incident',
-  canceled: 'Test canceled'
-};
-
-const WAITING_ITEM_LABELS = {
-  'job-active': 'Job is active',
-  'job-completed': 'Job completed',
-  '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',
-  'event-sub-process': 'Event sub-process triggered'
-};
-
-const WAITING_ITEM_FINISHED_LABELS = {
-  'user-task-form': 'User task completed'
-};
-
-/**
- * Get display label for a waiting item.
- *
- * @param {import('../../types').WaitingItem} item
- * @param {boolean} [isFinished]
- * @returns {string}
- */
-function getWaitingItemLabel(item, isFinished) {
-  if (isFinished && WAITING_ITEM_FINISHED_LABELS[item.type]) {
-    return WAITING_ITEM_FINISHED_LABELS[item.type];
-  }
-
-  return WAITING_ITEM_LABELS[item.type] || item.type;
-}
-
-/**
- * Get details for a waiting item to display in expanded view.
- *
- * @param {import('../../types').WaitingItem} item
- * @returns {{ label: string; value: string }[]}
- */
-function getWaitingItemDetails(item) {
-  if (!item.data) {
-    return [];
-  }
-
-  // Handle boundary events and event sub-processes
-  if (item.type === 'boundary-event' || item.type === 'event-sub-process') {
-    const details = [];
-
-    if (item.data.elementId) {
-      details.push({ label: 'Element', value: item.data.elementId });
-    }
-
-    if (item.data.elementName) {
-      details.push({ label: 'Name', value: item.data.elementName });
-    }
-
-    if (item.data.state) {
-      details.push({ label: 'State', value: item.data.state });
-    }
-
-    if (item.data.startDate) {
-      details.push({ label: 'Started', value: new Date(item.data.startDate).toLocaleTimeString() });
-    }
-
-    if (item.data.elementInstanceKey) {
-      details.push({ label: 'Instance Key', value: item.data.elementInstanceKey });
-    }
-
-    return details;
-  }
-
-  // Handle job items
-  if (!isJobItem(item)) {
-    return [];
-  }
-
-  const details = [];
-
-  if (item.data.type) {
-    details.push({ label: 'Type', value: item.data.type });
-  }
-
-  if (item.data.elementId) {
-    details.push({ label: 'Element', value: item.data.elementId });
-  }
-
-  const listenerLabel = getExecutionListenerLabel(item.data);
-  if (listenerLabel) {
-    details.push({ label: 'Kind', value: listenerLabel });
-  }
-
-  if (item.data.state) {
-    details.push({ label: 'State', value: item.data.state });
-  }
-
-  if (item.data.jobKey) {
-    details.push({ label: 'Job Key', value: item.data.jobKey });
-  }
-
-  return details;
-}
-
-/**
- * Get execution listener label if the job is an execution listener.
- *
- * @param {Object} jobData
- * @returns {string|null}
- */
-function getExecutionListenerLabel(jobData) {
-  if (!jobData || jobData.kind !== 'EXECUTION_LISTENER') {
-    return null;
-  }
-
-  const eventType = jobData.listenerEventType;
-
-  if (eventType === 'START') {
-    return 'start execution listener';
-  }
-
-  if (eventType === 'END') {
-    return 'end execution listener';
-  }
-
-  return 'execution listener';
-}
-
-/**
- * @param {import('../../types').WaitingItem} item
- * @returns {boolean}
- */
-function isJobItem(item) {
-  return item.type === 'job-active'
-    || item.type === 'job-completed'
-    || item.type === 'job-inactive';
-}
-
-/**
- * Determine if a waiting item is still pending (should show blue dot).
- * Completed/triggered items show green.
- *
- * @param {import('../../types').WaitingItem} item
- * @returns {boolean}
- */
-function isPendingItem(item) {
-  switch (item.type) {
-  case 'job-active':
-  case 'job-inactive':
-  case 'user-task-form':
-  case 'message-subscription':
-    return true;
-  default:
-    return false;
-  }
-}
-
-/**
- * Get badge texts for waiting items.
- *
- * @param {import('../../types').WaitingItem} item
- * @returns {{ text: string, variant?: string }[]}
- */
-function getWaitingItemBadges(item) {
-  const badges = [];
-
-  // Execution listener start/end badge
-  if (isJobItem(item) && item.data?.kind === 'EXECUTION_LISTENER' && item.data.listenerEventType) {
-    badges.push({
-      text: item.data.listenerEventType === 'START' ? 'start' : 'end',
-      variant: item.data.listenerEventType === 'START' ? 'start' : 'end'
-    });
-  }
-
-  // Job type badge
-  if (isJobItem(item) && item.data?.type) {
-    badges.push({ text: item.data.type });
-  }
-
-  // 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 });
-  }
-
-  return badges;
-}
-
-/**
- * Format a timestamp as a human-readable time string.
- *
- * @param {number} timestamp
- * @returns {string}
- */
-function formatTime(timestamp) {
-  return new Date(timestamp).toLocaleTimeString();
-}
+import {
+  STATUS_LABELS,
+  getDisplayEntries,
+  getWaitingItemLabel,
+  getWaitingItemDetails,
+  getWaitingItemBadges,
+  isPendingItem,
+  formatTime,
+  formatElementType,
+  isFinished as checkIsFinished
+} from '../../ExecutionLogModel';
 
 /**
  * Renders an execution log that builds up during task execution.
@@ -232,20 +51,8 @@ export function ExecutionLog({ entries, tasklistBaseUrl, currentOperateUrl, onSe
   }
 
   const lastEntry = entries[entries.length - 1];
-
-  // Check if execution has finished (completed, incident, or canceled)
-  const isFinished = entries.some(
-    e => e.type === 'status' && (e.status === 'completed' || e.status === 'incident' || e.status === 'canceled')
-  );
-
-  // Filter out 'executing' status once finished - it's just a temporary placeholder
-  // During execution, move 'executing' to the end so it's always last
-  const displayEntries = isFinished
-    ? entries.filter(e => !(e.type === 'status' && e.status === 'executing'))
-    : [
-      ...entries.filter(e => !(e.type === 'status' && e.status === 'executing')),
-      ...entries.filter(e => e.type === 'status' && e.status === 'executing')
-    ];
+  const isFinished = checkIsFinished(entries);
+  const displayEntries = getDisplayEntries(entries);
 
   return (
     <div className="execution-log">
@@ -355,19 +162,6 @@ function ChildElement({ child }) {
   );
 }
 
-/**
- * Format an element type for display.
- *
- * @param {string} type
- * @returns {string}
- */
-function formatElementType(type) {
-  return (type || '')
-    .toLowerCase()
-    .replace(/_/g, ' ')
-    .replace(/\b\w/g, c => c.toUpperCase());
-}
-
 function WaitingEntry({ entry, isLast, isFinished, onSelectElement }) {
   if (!entry.items?.length) {
     return null;

lib/components/Input/InputEditor.jsx

@@ -21,7 +21,7 @@ import { OutputVariables, pickVariables } from './OutputVariables';
 import OutputEditor from './OutputEditor';
 import { ExecutionLog } from './ExecutionLog';
 import { PluginContext } from '../shared/plugins';
-import { SCOPES } from '../../TaskExecution';
+import { SCOPES } from '../../utils/variables';
 
 export const TASK_EXECUTION_STATUS_LABEL = {
   deploying: 'Deploying...',