Fix timing issue with workflow journal

src/bundles/Elsa.WorkflowServer.Web/appsettings.json

@@ -1,13 +1,13 @@
 {
   "Logging": {
     "LogLevel": {
-      "Default": "Debug",
+      "Default": "Warning",
       "Elsa.Mediator": "Warning",
       "MassTransit": "Warning",
       "Microsoft.Extensions.Http": "Warning",
       "Microsoft.Hosting.Lifetime": "Information",
       "Microsoft.EntityFrameworkCore": "Warning",
-      "Microsoft.AspNetCore": "Debug",
+      "Microsoft.AspNetCore": "Warning",
       "System.Net.Http": "Warning"
     }
   },

src/designer/designer_packages/elsa-workflows-designer/src/components.d.ts

@@ -29,6 +29,7 @@ import { StudioInitializingContext } from "./models/studio";
 import { WorkflowContextProviderDescriptor } from "./modules/workflow-contexts/services/api";
 import { RenderActivityPropsContext } from "./modules/workflow-definitions/components/models";
 import { ActivityDriverRegistry } from "./services";
+import { WorkflowJournalModel } from "./modules/workflow-instances/models";
 import { JournalItemSelectedArgs } from "./modules/workflow-instances/events";
 import { PublishClickedArgs } from "./modules/workflow-definitions/components/publish-button";
 export { InputDefinition, OutputDefinition, WorkflowDefinition, WorkflowDefinitionSummary } from "./modules/workflow-definitions/models/entities";
@@ -55,6 +56,7 @@ export { StudioInitializingContext } from "./models/studio";
 export { WorkflowContextProviderDescriptor } from "./modules/workflow-contexts/services/api";
 export { RenderActivityPropsContext } from "./modules/workflow-definitions/components/models";
 export { ActivityDriverRegistry } from "./services";
+export { WorkflowJournalModel } from "./modules/workflow-instances/models";
 export { JournalItemSelectedArgs } from "./modules/workflow-instances/events";
 export { PublishClickedArgs } from "./modules/workflow-definitions/components/publish-button";
 export namespace Components {
@@ -378,8 +380,8 @@ export namespace Components {
         "workflowInstance": WorkflowInstance;
     }
     interface ElsaWorkflowJournal {
-        "workflowDefinition": WorkflowDefinition;
-        "workflowInstance": WorkflowInstance;
+        "model": WorkflowJournalModel;
+        "refresh": () => Promise<void>;
     }
     interface ElsaWorkflowNavigator {
         "items": Array<FlowchartPathItem>;
@@ -1340,9 +1342,8 @@ declare namespace LocalJSX {
         "workflowInstance"?: WorkflowInstance;
     }
     interface ElsaWorkflowJournal {
+        "model"?: WorkflowJournalModel;
         "onJournalItemSelected"?: (event: ElsaWorkflowJournalCustomEvent<JournalItemSelectedArgs>) => void;
-        "workflowDefinition"?: WorkflowDefinition;
-        "workflowInstance"?: WorkflowInstance;
     }
     interface ElsaWorkflowNavigator {
         "items"?: Array<FlowchartPathItem>;

src/designer/designer_packages/elsa-workflows-designer/src/modules/workflow-instances/components/journal.tsx

@@ -1,11 +1,10 @@
-import {Component, h, Prop, State, Watch, Event, EventEmitter} from "@stencil/core";
+import {Component, h, Prop, State, Watch, Event, EventEmitter, Method} from "@stencil/core";
 import {Activity, Workflow, WorkflowExecutionLogRecord, WorkflowInstance} from "../../../models";
 import {Container} from "typedi";
 import {ActivityIconRegistry, ActivityNode, flatten, walkActivities} from "../../../services";
 import {durationToString, formatTime, getDuration, Hash, isNullOrWhitespace} from "../../../utils";
-import {ActivityExecutionEventBlock} from "../models";
+import {ActivityExecutionEventBlock, WorkflowJournalModel} from "../models";
 import {ActivityIconSize} from "../../../components/icons/activities";
-import {WorkflowDefinition} from "../../workflow-definitions/models/entities";
 import {WorkflowInstancesApi} from "../services/workflow-instances-api";
 import {JournalItemSelectedArgs} from "../events";
 
@@ -26,8 +25,7 @@ export class Journal {
     this.workflowInstancesApi = Container.get(WorkflowInstancesApi);
   }
 
-  @Prop() workflowInstance: WorkflowInstance;
-  @Prop() workflowDefinition: WorkflowDefinition;
+  @Prop() model: WorkflowJournalModel;
   @State() workflowExecutionLogRecords: Array<WorkflowExecutionLogRecord> = [];
   @State() blocks: Array<ActivityExecutionEventBlock> = [];
   @State() rootBlocks: Array<ActivityExecutionEventBlock> = [];
@@ -35,21 +33,18 @@ export class Journal {
   @State() journalActivityMap: Set<ActivityNode> = new Set<ActivityNode>();
   @Event() journalItemSelected: EventEmitter<JournalItemSelectedArgs>;
 
-  @Watch('workflowInstance')
-  async onWorkflowInstanceChanged(value: string) {
-    await this.loadJournalPage(0);
-    this.createActivityMapForJournal();
-
-  }
-
-  @Watch('workflowDefinition')
-  async onWorkflowDefinitionChanged(value: string) {
-    this.rootBlocks = [];
-    await this.loadJournalPage(0);
-    this.createActivityMapForJournal();
+  @Watch('model')
+  async onWorkflowInstanceModelChanged(value: WorkflowJournalModel) {
+    await this.refresh();
   }
 
   async componentWillLoad(): Promise<void> {
+    await this.refresh();
+  }
+
+  @Method()
+  async refresh() {
+    this.rootBlocks = [];
     await this.loadJournalPage(0);
     this.createActivityMapForJournal();
   }
@@ -105,6 +100,10 @@ export class Journal {
 
     return sortedBlocks.map((block) => {
       const activityNode = journalActivityMap[block.nodeId];
+
+      if (activityNode == null)
+        debugger
+
       const activity = activityNode.activity;
 
       if (activity.type == "Elsa.Workflow" || activity.type == "Elsa.Flowchart")
@@ -165,10 +164,11 @@ export class Journal {
   }
 
   private loadJournalPage = async (page: number): Promise<void> => {
-    if (!this.workflowInstance || !this.workflowDefinition)
+    if (!this.model)
       return;
 
-    const workflowInstanceId = this.workflowInstance.id;
+    const workflowInstance = this.model.workflowInstance;
+    const workflowInstanceId = workflowInstance.id;
     const pageOfRecords = await this.workflowInstancesApi.getJournal({page, pageSize: PAGE_SIZE, workflowInstanceId: workflowInstanceId});
     const blocks = this.createBlocks(pageOfRecords.items);
     const rootBlocks = blocks.filter(x => !x.parentActivityInstanceId);
@@ -239,13 +239,15 @@ export class Journal {
   }
 
   private createActivityMapForJournal() {
+    const workflowDefinition = this.model.workflowDefinition;
+
     // Create dummy root workflow to match structure of workflow execution log entries in order to generate the right node IDs.
     const workflow: Workflow = {
       type: 'Elsa.Workflow',
-      version: this.workflowDefinition.version,
+      version: workflowDefinition.version,
       id: "Workflow1",
-      root: this.workflowDefinition.root,
-      variables: this.workflowDefinition.variables,
+      root: workflowDefinition.root,
+      variables: workflowDefinition.variables,
       metadata: {},
       customProperties: {}
     }

src/designer/designer_packages/elsa-workflows-designer/src/modules/workflow-instances/components/viewer.tsx

@@ -10,12 +10,13 @@ import {
   Workflow
 } from '../../../models';
 import {ActivityDriverRegistry, EventBus, ActivityNode} from '../../../services';
-import {MonacoEditorSettings} from "../../../services/monaco-editor-settings";
+import {MonacoEditorSettings} from "../../../services";
 import {WorkflowDefinition} from "../../workflow-definitions/models/entities";
 import {WorkflowEditorEventTypes} from "../../workflow-definitions/models/ui";
 import {JournalItemSelectedArgs} from '../events';
 import {JournalApi} from "../services/journal-api";
 import {Flowchart} from '../../flowchart/models';
+import {WorkflowJournalModel} from "../models";
 
 @Component({
   tag: 'elsa-workflow-instance-viewer',
@@ -227,6 +228,11 @@ export class WorkflowInstanceViewer {
   public render() {
     const workflowDefinition = this.mainWorkflowDefinitionState;
     const workflowInstance = this.workflowInstanceState;
+    const workflowJournalModel: WorkflowJournalModel = {
+      workflowInstance,
+      workflowDefinition
+    }
+
     this.flowchartRootActivity = this.flowchartRootActivity ?? this.mainWorkflowDefinitionState.root;
 
     return (
@@ -236,10 +242,7 @@ export class WorkflowInstanceViewer {
           class="elsa-activity-picker-container tw-z-30"
           position={PanelPosition.Left}
           onExpandedStateChanged={e => this.onActivityPickerPanelStateChanged(e.detail)}>
-          <elsa-workflow-journal
-            workflowDefinition={workflowDefinition}
-            workflowInstance={workflowInstance}
-          />
+          <elsa-workflow-journal model={workflowJournalModel}/>
         </elsa-panel>
         <elsa-flowchart
           ref={el => this.flowchartElement = el}

src/designer/designer_packages/elsa-workflows-designer/src/modules/workflow-instances/models.ts

@@ -1,5 +1,6 @@
-import {TabDefinition, WorkflowExecutionLogRecord} from "../../models";
+import {TabDefinition, WorkflowExecutionLogRecord, WorkflowInstance} from "../../models";
 import moment from "moment";
+import {WorkflowDefinition} from "../workflow-definitions/models/entities";
 
 export const WorkflowInstanceViewerEventTypes = {
   WorkflowDefinition: {
@@ -51,3 +52,8 @@ export interface ActivityExecutionEventBlock {
   faultedRecord?: WorkflowExecutionLogRecord;
   children: Array<ActivityExecutionEventBlock>;
 }
+
+export interface WorkflowJournalModel {
+  workflowInstance: WorkflowInstance;
+  workflowDefinition: WorkflowDefinition;
+}