feat:integrate orkes-workflow-visualizer

[najeebkp]

Pull Request type

• Bugfix
• Feature
• Refactoring (no functional changes, no api changes)
• Build related changes
• WHOSUSING.md
• Other (please describe):

NOTE: Please remember to run ./gradlew spotlessApply to fix any format violations.

Changes in this PR

Describe the new behavior from this PR, and why it's needed

• Upgraded react version to v18.3.1
• Integrated orkes-workflow-visualizer library to render the workflow definition and execution diagrams.

Screenshots

Alternatives considered

Describe alternative implementation you have considered

[Sudakatux]

found a bug.
create a workflow with the following definition:

{
  "ownerApp": "",
  "createTime": 1732033317471,
  "updateTime": 1732033317849,
  "status": "COMPLETED",
  "endTime": 1732033317849,
  "workflowId": "becec3ac-6e56-4446-8e57-dbcaa433ea2b",
  "tasks": [
    {
      "taskType": "INLINE",
      "status": "COMPLETED",
      "inputData": {
        "evaluatorType": "javascript",
        "expression": "(function () {\n  return $.value1 + $.value2;\n})();",
        "value2": 2,
        "value1": 2
      },
      "referenceTaskName": "inline_ref_1",
      "retryCount": 0,
      "seq": 1,
      "pollCount": 0,
      "taskDefName": "inline_2",
      "scheduledTime": 1732033317482,
      "startTime": 1732033317482,
      "endTime": 1732033317770,
      "updateTime": 1732033317483,
      "startDelayInSeconds": 0,
      "retried": false,
      "executed": true,
      "callbackFromWorker": true,
      "responseTimeoutSeconds": 0,
      "workflowInstanceId": "becec3ac-6e56-4446-8e57-dbcaa433ea2b",
      "workflowType": "http_asdasd",
      "taskId": "7b2d6dc8-b04e-4af2-a31a-1654e8ad6a8f",
      "callbackAfterSeconds": 0,
      "outputData": {
        "result": 4
      },
      "workflowTask": {
        "name": "inline_2",
        "taskReferenceName": "inline_ref_1",
        "inputParameters": {
          "expression": "(function () {\n  return $.value1 + $.value2;\n})();",
          "evaluatorType": "javascript",
          "value1": 2,
          "value2": 2
        },
        "type": "INLINE",
        "decisionCases": {},
        "defaultCase": [],
        "forkTasks": [],
        "startDelay": 0,
        "joinOn": [],
        "optional": false,
        "defaultExclusiveJoinTask": [],
        "asyncComplete": false,
        "loopOver": [],
        "onStateChange": {},
        "permissive": false
      },
      "rateLimitPerFrequency": 0,
      "rateLimitFrequencyInSeconds": 0,
      "workflowPriority": 0,
      "iteration": 0,
      "subworkflowChanged": false,
      "loopOverTask": false,
      "queueWaitTime": 0,
      "taskDefinition": null
    },
    {
      "taskType": "DO_WHILE",
      "status": "COMPLETED",
      "inputData": {
        "myArray": [
          {
            "name": "Orkes"
          },
          {
            "year": 2024
          }
        ]
      },
      "referenceTaskName": "do_while_ref",
      "retryCount": 0,
      "seq": 2,
      "pollCount": 0,
      "taskDefName": "do_while",
      "scheduledTime": 1732033317778,
      "startTime": 1732033317778,
      "endTime": 1732033317843,
      "updateTime": 1732033317828,
      "startDelayInSeconds": 0,
      "retried": false,
      "executed": false,
      "callbackFromWorker": true,
      "responseTimeoutSeconds": 0,
      "workflowInstanceId": "becec3ac-6e56-4446-8e57-dbcaa433ea2b",
      "workflowType": "http_asdasd",
      "taskId": "27645cc5-867b-48c5-8402-dfa160bfa9e0",
      "callbackAfterSeconds": 0,
      "outputData": {
        "1": {
          "inline_ref": {
            "result": 3
          }
        },
        "2": {
          "inline_ref": {
            "result": 3
          }
        },
        "iteration": 2
      },
      "workflowTask": {
        "name": "do_while",
        "taskReferenceName": "do_while_ref",
        "inputParameters": {
          "myArray": [
            {
              "name": "Orkes"
            },
            {
              "year": 2024
            }
          ]
        },
        "type": "DO_WHILE",
        "decisionCases": {},
        "defaultCase": [],
        "forkTasks": [],
        "startDelay": 0,
        "joinOn": [],
        "optional": false,
        "defaultExclusiveJoinTask": [],
        "asyncComplete": false,
        "loopCondition": "(function () {\n  if ($.do_while_ref['iteration'] < $.myArray.length) {\n    return true;\n  }\n  return false;\n})();",
        "loopOver": [
          {
            "name": "inline",
            "taskReferenceName": "inline_ref",
            "inputParameters": {
              "expression": "(function () {\n  return $.value1 + $.value2;\n})();",
              "evaluatorType": "javascript",
              "value1": 1,
              "value2": 2
            },
            "type": "INLINE",
            "decisionCases": {},
            "defaultCase": [],
            "forkTasks": [],
            "startDelay": 0,
            "joinOn": [],
            "optional": false,
            "defaultExclusiveJoinTask": [],
            "asyncComplete": false,
            "loopOver": [],
            "onStateChange": {},
            "permissive": false
          }
        ],
        "evaluatorType": "graaljs",
        "onStateChange": {},
        "permissive": false
      },
      "rateLimitPerFrequency": 0,
      "rateLimitFrequencyInSeconds": 1,
      "workflowPriority": 0,
      "iteration": 2,
      "subworkflowChanged": false,
      "loopOverTask": true,
      "queueWaitTime": 0,
      "taskDefinition": null
    },
    {
      "taskType": "INLINE",
      "status": "COMPLETED",
      "inputData": {
        "evaluatorType": "javascript",
        "expression": "(function () {\n  return $.value1 + $.value2;\n})();",
        "value2": 2,
        "value1": 1
      },
      "referenceTaskName": "inline_ref__1",
      "retryCount": 0,
      "seq": 3,
      "pollCount": 0,
      "taskDefName": "inline",
      "scheduledTime": 1732033317785,
      "startTime": 1732033317785,
      "endTime": 1732033317801,
      "updateTime": 1732033317786,
      "startDelayInSeconds": 0,
      "retried": false,
      "executed": true,
      "callbackFromWorker": true,
      "responseTimeoutSeconds": 0,
      "workflowInstanceId": "becec3ac-6e56-4446-8e57-dbcaa433ea2b",
      "workflowType": "http_asdasd",
      "taskId": "8e86cddf-8ca1-4917-b6c2-247f278abad4",
      "callbackAfterSeconds": 0,
      "outputData": {
        "result": 3
      },
      "workflowTask": {
        "name": "inline",
        "taskReferenceName": "inline_ref",
        "inputParameters": {
          "expression": "(function () {\n  return $.value1 + $.value2;\n})();",
          "evaluatorType": "javascript",
          "value1": 1,
          "value2": 2
        },
        "type": "INLINE",
        "decisionCases": {},
        "defaultCase": [],
        "forkTasks": [],
        "startDelay": 0,
        "joinOn": [],
        "optional": false,
        "defaultExclusiveJoinTask": [],
        "asyncComplete": false,
        "loopOver": [],
        "onStateChange": {},
        "permissive": false
      },
      "rateLimitPerFrequency": 0,
      "rateLimitFrequencyInSeconds": 0,
      "workflowPriority": 0,
      "iteration": 1,
      "subworkflowChanged": false,
      "loopOverTask": true,
      "queueWaitTime": 0,
      "taskDefinition": null
    },
    {
      "taskType": "INLINE",
      "status": "COMPLETED",
      "inputData": {
        "evaluatorType": "javascript",
        "expression": "(function () {\n  return $.value1 + $.value2;\n})();",
        "value2": 2,
        "value1": 1
      },
      "referenceTaskName": "inline_ref__2",
      "retryCount": 0,
      "seq": 4,
      "pollCount": 0,
      "taskDefName": "inline",
      "scheduledTime": 1732033317818,
      "startTime": 1732033317818,
      "endTime": 1732033317834,
      "updateTime": 1732033317818,
      "startDelayInSeconds": 0,
      "retried": false,
      "executed": true,
      "callbackFromWorker": true,
      "responseTimeoutSeconds": 0,
      "workflowInstanceId": "becec3ac-6e56-4446-8e57-dbcaa433ea2b",
      "workflowType": "http_asdasd",
      "taskId": "44ffb76d-0850-4704-a2b2-fed0963923ba",
      "callbackAfterSeconds": 0,
      "outputData": {
        "result": 3
      },
      "workflowTask": {
        "name": "inline",
        "taskReferenceName": "inline_ref",
        "inputParameters": {
          "expression": "(function () {\n  return $.value1 + $.value2;\n})();",
          "evaluatorType": "javascript",
          "value1": 1,
          "value2": 2
        },
        "type": "INLINE",
        "decisionCases": {},
        "defaultCase": [],
        "forkTasks": [],
        "startDelay": 0,
        "joinOn": [],
        "optional": false,
        "defaultExclusiveJoinTask": [],
        "asyncComplete": false,
        "loopOver": [],
        "onStateChange": {},
        "permissive": false
      },
      "rateLimitPerFrequency": 0,
      "rateLimitFrequencyInSeconds": 0,
      "workflowPriority": 0,
      "iteration": 2,
      "subworkflowChanged": false,
      "loopOverTask": true,
      "queueWaitTime": 0,
      "taskDefinition": null
    }
  ],
  "input": {},
  "output": {
    "result": 3
  },
  "taskToDomain": {},
  "failedReferenceTaskNames": [],
  "workflowDefinition": {
    "createTime": 1732033182842,
    "updateTime": 1732033307187,
    "name": "http_asdasd",
    "description": "asdasdasd",
    "version": 3,
    "tasks": [
      {
        "name": "inline_2",
        "taskReferenceName": "inline_ref_1",
        "inputParameters": {
          "expression": "(function () {\n  return $.value1 + $.value2;\n})();",
          "evaluatorType": "javascript",
          "value1": 2,
          "value2": 2
        },
        "type": "INLINE",
        "decisionCases": {},
        "defaultCase": [],
        "forkTasks": [],
        "startDelay": 0,
        "joinOn": [],
        "optional": false,
        "defaultExclusiveJoinTask": [],
        "asyncComplete": false,
        "loopOver": [],
        "onStateChange": {},
        "permissive": false
      },
      {
        "name": "do_while",
        "taskReferenceName": "do_while_ref",
        "inputParameters": {
          "myArray": [
            {
              "name": "Orkes"
            },
            {
              "year": 2024
            }
          ]
        },
        "type": "DO_WHILE",
        "decisionCases": {},
        "defaultCase": [],
        "forkTasks": [],
        "startDelay": 0,
        "joinOn": [],
        "optional": false,
        "defaultExclusiveJoinTask": [],
        "asyncComplete": false,
        "loopCondition": "(function () {\n  if ($.do_while_ref['iteration'] < $.myArray.length) {\n    return true;\n  }\n  return false;\n})();",
        "loopOver": [
          {
            "name": "inline",
            "taskReferenceName": "inline_ref",
            "inputParameters": {
              "expression": "(function () {\n  return $.value1 + $.value2;\n})();",
              "evaluatorType": "javascript",
              "value1": 1,
              "value2": 2
            },
            "type": "INLINE",
            "decisionCases": {},
            "defaultCase": [],
            "forkTasks": [],
            "startDelay": 0,
            "joinOn": [],
            "optional": false,
            "defaultExclusiveJoinTask": [],
            "asyncComplete": false,
            "loopOver": [],
            "onStateChange": {},
            "permissive": false
          }
        ],
        "evaluatorType": "graaljs",
        "onStateChange": {},
        "permissive": false
      }
    ],
    "inputParameters": [],
    "outputParameters": {},
    "failureWorkflow": "aaa_jeu",
    "schemaVersion": 2,
    "restartable": true,
    "workflowStatusListenerEnabled": false,
    "ownerEmail": "[email protected]",
    "timeoutPolicy": "ALERT_ONLY",
    "timeoutSeconds": 0,
    "variables": {},
    "inputTemplate": {},
    "enforceSchema": true
  },
  "priority": 0,
  "variables": {},
  "lastRetriedTime": 0,
  "failedTaskNames": [],
  "history": [],
  "rateLimited": false,
  "workflowName": "http_asdasd",
  "startTime": 1732033317471,
  "workflowVersion": 3
}

Run the workflow. it will render ok. BUT clicking on the do-while task will crash the app

[Sudakatux]

LGTM