Executions info panel tweaks

src/helper-modules/bpmn-helper/index.d.ts

@@ -285,8 +285,28 @@ declare const _exports: {
     area: getters.AreaInfos[];
     workingPlace: getters.WorkingPlaceInfos[];
   };
-  getPerformersFromElement(element: object): any[];
-  getPerformersFromElementById(bpmn: string | object, elementId: string): any[];
+  getPerformersFromElement(element: object): {
+    user: string[];
+    roles: string[];
+  };
+  getPerformersFromElementById(
+    bpmn: string | object,
+    elementId: string,
+  ): {
+    user: string[];
+    roles: string[];
+  };
+  getResponsiblePartyFromElement(element: object): {
+    user: string[];
+    roles: string[];
+  };
+  getResponsiblePartyFromElementId(
+    bpmn: string | object,
+    elementId: string,
+  ): {
+    user: string[];
+    roles: string[];
+  };
   getPotentialOwnersFromElementById(
     elementId: string,
     bpmn: string | object,

src/helper-modules/bpmn-helper/src/getters.d.ts

@@ -747,17 +747,58 @@ export function getLocationsFromElement(element: object): {
  * Get the performers for given element
  *
  * @param {object} element
- * @returns {Array} performers given for element
+ * @returns {{ user: string[], roles: string[] } | undefined} performers given for element
  */
-export function getPerformersFromElement(element: object): any[];
+export function getPerformersFromElement(element: object):
+  | {
+      user: string[];
+      roles: string[];
+    }
+  | undefined;
 /**
  * Get the performers for given element id
  *
  * @param {(string|object)} bpmn - the process definition as XML string or BPMN-Moddle Object
  * @param {string} elementId the id of the element
- * @returns {Array} array with all performers
+ * @returns {{ user: string[], roles: string[] } | undefined} array with all performers
  */
-export function getPerformersFromElementById(bpmn: string | object, elementId: string): any[];
+export function getPerformersFromElementById(
+  bpmn: string | object,
+  elementId: string,
+):
+  | {
+      user: string[];
+      roles: string[];
+    }
+  | undefined;
+/**
+ * Get the responsible persons for given element
+ *
+ * @param {object} element
+ * @returns {{ user: string[], roles: string[] } | undefined} responsible persons given for element
+ */
+export function getResponsiblePartyFromElement(element: object):
+  | {
+      user: string[];
+      roles: string[];
+    }
+  | undefined;
+/**
+ * Get the performers for given element id
+ *
+ * @param {(string|object)} bpmn - the process definition as XML string or BPMN-Moddle Object
+ * @param {string} elementId the id of the element
+ * @returns {{ user: string[], roles: string[] } | undefined} array with all responsible persons
+ */
+export function getResponsiblePartyFromElementId(
+  bpmn: string | object,
+  elementId: string,
+):
+  | {
+      user: string[];
+      roles: string[];
+    }
+  | undefined;
 /**
  * Returrns the roles and users that may be owners of a specific element
  *

src/helper-modules/bpmn-helper/src/getters.js

@@ -856,7 +856,7 @@ async function getVariablesFromElementById(bpmn, elementId) {
  *
  * @param {(string|object)} bpmn - the process definition as XML string or BPMN-Moddle Object
  * @param {string} elementId the id of the element
- * @returns {Array} array with all performers
+ * @returns {{ user: string[], roles: string[] } | undefined} array with all performers
  */
 async function getPerformersFromElementById(bpmn, elementId) {
   const bpmnObj = typeof bpmn === 'string' ? await toBpmnObject(bpmn) : bpmn;
@@ -865,6 +865,20 @@ async function getPerformersFromElementById(bpmn, elementId) {
   return getPerformersFromElement(element);
 }
 
+/**
+ * Get the performers for given element id
+ *
+ * @param {(string|object)} bpmn - the process definition as XML string or BPMN-Moddle Object
+ * @param {string} elementId the id of the element
+ * @returns {{ user: string[], roles: string[] } | undefined} array with all responsible persons
+ */
+async function getResponsiblePartyFromElementId(bpmn, elementId) {
+  const bpmnObj = typeof bpmn === 'string' ? await toBpmnObject(bpmn) : bpmn;
+  const element = getElementById(bpmnObj, elementId);
+
+  return getResponsiblePartyFromElement(element);
+}
+
 /**
  * An object containing properties from defined companies
  *
@@ -1169,7 +1183,7 @@ function getResourcesFromElement(element) {
  * Get the performers for given element
  *
  * @param {object} element
- * @returns {Array} performers given for element
+ * @returns {{ user: string[], roles: string[] } | undefined} performers given for element
  */
 function getPerformersFromElement(element) {
   if (element.resources) {
@@ -1186,7 +1200,29 @@ function getPerformersFromElement(element) {
       return JSON.parse(potentialOwner.resourceAssignmentExpression.expression.body);
     }
   }
-  return [];
+}
+
+/**
+ * Get the responsible persons for given element
+ *
+ * @param {object} element
+ * @returns {{ user: string[], roles: string[] } | undefined} responsible persons given for element
+ */
+function getResponsiblePartyFromElement(element) {
+  if (element.resources) {
+    const responsiblePerson = element.resources.find(
+      (resource) => resource.$type === 'proceed:ResponsibleParty',
+    );
+
+    if (
+      responsiblePerson &&
+      responsiblePerson.resourceAssignmentExpression &&
+      responsiblePerson.resourceAssignmentExpression.expression &&
+      responsiblePerson.resourceAssignmentExpression.expression.body
+    ) {
+      return JSON.parse(responsiblePerson.resourceAssignmentExpression.expression.body);
+    }
+  }
 }
 
 /**
@@ -1346,6 +1382,8 @@ module.exports = {
   getLocationsFromElement,
   getPerformersFromElement,
   getPerformersFromElementById,
+  getResponsiblePartyFromElement,
+  getResponsiblePartyFromElementId,
   getPotentialOwnersFromElementById,
   parseISODuration,
   convertISODurationToMiliseconds,

src/management-system-v2/app/(dashboard)/[environmentId]/(automation)/executions/[processId]/element-activity.module.scss

@@ -0,0 +1,17 @@
+.GridContainer {
+  display: grid;
+  grid-template-columns: repeat(1, 1fr);
+}
+
+.GridCell {
+  padding: 10px 5px;
+  border-bottom: 1px solid #ddd;
+}
+
+.GridCell:last-child {
+  border-bottom: none;
+}
+
+.GridCell:hover {
+  background-color: rgba(93, 117, 136, 0.05);
+}

src/management-system-v2/app/(dashboard)/[environmentId]/(automation)/executions/[processId]/element-activity.tsx

@@ -0,0 +1,72 @@
+import { ReactNode } from 'react';
+import { Col, Row, Tag, Typography } from 'antd';
+import { ClockCircleFilled } from '@ant-design/icons';
+import styles from './element-activity.module.scss';
+import { ElementLike } from 'diagram-js/lib/model/Types';
+import { ExtendedInstanceInfo } from '@/lib/data/instance';
+
+type EntryTextProps = React.ComponentProps<typeof Typography.Text>;
+const TimetableEntryText = (props: EntryTextProps) => (
+  <Typography.Text
+    ellipsis={{ tooltip: { ...props } }}
+    style={{
+      wordBreak: 'normal',
+    }}
+    {...props}
+  />
+);
+
+const ClockSymbol = () => (
+  <ClockCircleFilled style={{ fontSize: '1.1rem', verticalAlign: 'middle' }} />
+);
+
+export function ElementActivity({
+  processId,
+  element,
+  instance,
+}: {
+  processId: string;
+  element?: ElementLike;
+  instance?: ExtendedInstanceInfo;
+}) {
+  const activityEntries: ReactNode[][] = [];
+
+  const activityLog: [string, 'INFO' | 'WARN', string][] = [
+    ['09:14:02', 'INFO', 'Process started by m.chen'],
+    ['09:15:02', 'INFO', "ZStep 'Receive Application' started"],
+    ['09:16:13', 'INFO', "Step 'Receive Application' completed"],
+    ['09:18:23', 'INFO', "Gateway 'Application complete?' yes"],
+    ['09:23:13', 'INFO', "Step 'Credit Check' started"],
+    ['09:19:35', 'WARN', 'Credit Bureau response delayed (retry 1/3)'],
+    ['09:25:54', 'INFO', "Step 'Credit Check' completed"],
+    ['09:35:23', 'INFO', "Step 'Manager Approval' started"],
+  ];
+
+  const tagStatus: Record<'INFO' | 'WARN', string> = {
+    INFO: 'processing',
+    WARN: 'warning',
+  };
+
+  return (
+    <div
+      className={styles.GridContainer}
+      style={{ border: 'solid 1px #ddd', borderRadius: 12, marginBlock: 15 }}
+    >
+      {activityLog.map((row, idx_row) => (
+        <Row key={'activity' + idx_row} className={styles.GridCell}>
+          <Col flex="70px" style={{ textAlign: 'center' }}>
+            {row[0]}
+          </Col>
+
+          <Col flex="70px" style={{ textAlign: 'center' }}>
+            <Tag color={tagStatus[row[1]]}>{row[1]}</Tag>
+          </Col>
+
+          <Col flex="auto" style={{ padding: '0 10px' }}>
+            {row[2]}
+          </Col>
+        </Row>
+      ))}
+    </div>
+  );
+}

src/management-system-v2/app/(dashboard)/[environmentId]/(automation)/executions/[processId]/element-details.module.scss

@@ -0,0 +1,28 @@
+.ElementText {
+  word-break: normal;
+}
+
+.ElementKeyText {
+  color: gray;
+  font-size: 0.8em;
+}
+
+.ElementValueText {
+  font-size: 0.9em;
+}
+
+.NewElementSection {
+  width: 100%;
+  padding: 0;
+  margin: 0;
+
+  .ElementSectionDivider {
+    padding: 0;
+    margin: 0;
+  }
+}
+
+.ElementSectionHeader {
+  font-weight: 600;
+  font-size: 0.9em;
+}