From a81c5c63daef3081a42b6fd0477daa5bc3fac316 Mon Sep 17 00:00:00 2001 From: Sipke Schoorstra Date: Fri, 3 Jun 2022 22:26:47 +0200 Subject: [PATCH] Incremental work on journal UI --- .../src/components.d.ts | 2 + .../workflow-instance-viewer.tsx | 5 +- .../workflow-journal.tsx | 162 ++++++------------ .../src/models/core.ts | 10 +- .../api-client/workflow-instances-api.ts | 21 ++- 5 files changed, 86 insertions(+), 114 deletions(-) diff --git a/src/designer/elsa-workflows-designer/src/components.d.ts b/src/designer/elsa-workflows-designer/src/components.d.ts index 928426eac..ba7ad3b89 100644 --- a/src/designer/elsa-workflows-designer/src/components.d.ts +++ b/src/designer/elsa-workflows-designer/src/components.d.ts @@ -231,6 +231,7 @@ export namespace Components { "workflowInstance": WorkflowInstance; } interface ElsaWorkflowJournal { + "workflowInstanceId": any; } interface ElsaWorkflowManager { "activityDescriptors": Array; @@ -757,6 +758,7 @@ declare namespace LocalJSX { "workflowInstance"?: WorkflowInstance; } interface ElsaWorkflowJournal { + "workflowInstanceId"?: any; } interface ElsaWorkflowManager { "activityDescriptors"?: Array; diff --git a/src/designer/elsa-workflows-designer/src/components/designer/workflow-instance-viewer/workflow-instance-viewer.tsx b/src/designer/elsa-workflows-designer/src/components/designer/workflow-instance-viewer/workflow-instance-viewer.tsx index 520f3737a..8f5815a39 100644 --- a/src/designer/elsa-workflows-designer/src/components/designer/workflow-instance-viewer/workflow-instance-viewer.tsx +++ b/src/designer/elsa-workflows-designer/src/components/designer/workflow-instance-viewer/workflow-instance-viewer.tsx @@ -122,6 +122,9 @@ export class WorkflowViewer { } public render() { + const workflowInstance = this.workflowInstance; + const workflowInstanceId = workflowInstance?.id; + const tunnelState: WorkflowDesignerState = { workflow: this.workflowDefinition, activityDescriptors: this.activityDescriptors, @@ -134,7 +137,7 @@ export class WorkflowViewer { class="elsa-activity-picker-container" position={PanelPosition.Left} onExpandedStateChanged={e => this.onActivityPickerPanelStateChanged(e.detail)}> - + this.canvas = el} diff --git a/src/designer/elsa-workflows-designer/src/components/designer/workflow-instance-viewer/workflow-journal.tsx b/src/designer/elsa-workflows-designer/src/components/designer/workflow-instance-viewer/workflow-journal.tsx index 663636ef4..c8e5c1f7e 100644 --- a/src/designer/elsa-workflows-designer/src/components/designer/workflow-instance-viewer/workflow-journal.tsx +++ b/src/designer/elsa-workflows-designer/src/components/designer/workflow-instance-viewer/workflow-journal.tsx @@ -1,12 +1,37 @@ -import {Component, h} from "@stencil/core"; -import {isNullOrWhitespace} from "../../../utils"; +import {Component, h, Prop, State, Watch} from "@stencil/core"; +import {WorkflowExecutionLogRecord} from "../../../models"; +import {Container} from "typedi"; +import {ElsaApiClientProvider} from "../../../services"; + +const PAGE_SIZE: number = 20; @Component({ tag: 'elsa-workflow-journal', shadow: false }) export class WorkflowJournal { + private readonly elsaApiClientProvider: ElsaApiClientProvider; + + constructor() { + this.elsaApiClientProvider = Container.get(ElsaApiClientProvider); + } + + @Prop() workflowInstanceId; + @State() workflowExecutionLogRecords: Array = []; + + @Watch('workflowInstanceId') + async onWorkflowInstanceIdChanged(value: string) { + await this.loadJournalPage(0); + } + + async componentWillLoad() { + await this.loadJournalPage(0); + } + public render() { + + const records = this.workflowExecutionLogRecords; + return (
@@ -23,129 +48,44 @@ export class WorkflowJournal {
    -
  • -
    -
  • +
    +
    • + + ))} -
  • -
    - -
    -
    - - - - -
    -
    -
    -

    Advanced to phone screening by Bethany Blake

    -
    -
    - -
    -
    -
    -
    -
    • - -
  • -
    - -
    -
    - - - - -
    -
    -
    -

    Completed phone screening with Martha Gardner

    -
    -
    - -
    -
    -
    -
    -
    • - -
  • -
    - -
    -
    - - - - -
    -
    -
    -

    Advanced to interview by Bethany Blake

    -
    -
    - -
    -
    -
    -
    -
    • - -
  • -
    -
    -
    - - - - -
    -
    -
    -

    Completed interview with Katherine Snyder

    -
    -
    - -
    -
    -
    -
    -
); } + + private loadJournalPage = async (page: number): Promise => { + if (!this.workflowInstanceId) + return; + + const client = await this.elsaApiClientProvider.getElsaClient(); + const pageOfRecords = await client.workflowInstances.getJournal({page, pageSize: PAGE_SIZE, workflowInstanceId: this.workflowInstanceId}) + this.workflowExecutionLogRecords = [...this.workflowExecutionLogRecords, ...pageOfRecords.items]; + } } diff --git a/src/designer/elsa-workflows-designer/src/models/core.ts b/src/designer/elsa-workflows-designer/src/models/core.ts index ab880fbd1..54a6fe3b4 100644 --- a/src/designer/elsa-workflows-designer/src/models/core.ts +++ b/src/designer/elsa-workflows-designer/src/models/core.ts @@ -1,7 +1,7 @@ import {Type} from "./shared"; import {Expression} from "./expressions"; -export type Lookup = { [key: string]: T}; +export type Lookup = { [key: string]: T }; export interface Activity { id: string; @@ -79,6 +79,14 @@ export interface RegisterLocation { value: any; } +export interface WorkflowExecutionLogRecord { + id: string; + activityId: string; + activityType: string; + timestamp: Date; + eventName: string; +} + export enum SyntaxNames { Literal = 'Literal', JavaScript = 'JavaScript', diff --git a/src/designer/elsa-workflows-designer/src/services/api-client/workflow-instances-api.ts b/src/designer/elsa-workflows-designer/src/services/api-client/workflow-instances-api.ts index 65f3d7ffd..3a117f43f 100644 --- a/src/designer/elsa-workflows-designer/src/services/api-client/workflow-instances-api.ts +++ b/src/designer/elsa-workflows-designer/src/services/api-client/workflow-instances-api.ts @@ -1,4 +1,4 @@ -import {OrderBy, OrderDirection, PagedList, VersionOptions, WorkflowInstance, WorkflowInstanceSummary, WorkflowStatus, WorkflowSubStatus} from "../../models"; +import {OrderBy, OrderDirection, PagedList, VersionOptions, WorkflowExecutionLogRecord, WorkflowInstance, WorkflowInstanceSummary, WorkflowStatus, WorkflowSubStatus} from "../../models"; import {AxiosInstance} from "axios"; import {getVersionOptionsString, serializeQueryString} from "../../utils"; @@ -11,6 +11,8 @@ export interface WorkflowInstancesApi { delete(request: DeleteWorkflowInstanceRequest): Promise deleteMany(request: BulkDeleteWorkflowInstancesRequest): Promise> + + getJournal(request: GetWorkflowJournalRequest): Promise>; } export interface ListWorkflowInstancesRequest { @@ -39,6 +41,12 @@ export interface BulkDeleteWorkflowInstancesRequest { workflowInstanceIds: Array; } +export interface GetWorkflowJournalRequest { + workflowInstanceId: string; + page?: number; + pageSize?: number; +} + export class WorkflowInstancesApiImpl implements WorkflowInstancesApi { private httpClient: AxiosInstance; @@ -84,4 +92,15 @@ export class WorkflowInstancesApiImpl implements WorkflowInstancesApi { const response = await this.httpClient.delete>(`workflow-instances/bulk`); return response.data; } + + async getJournal(request: GetWorkflowJournalRequest): Promise> { + let queryString = { + page: request.page, + pageSize: request.pageSize + }; + + const queryStringText = serializeQueryString(queryString); + const response = await this.httpClient.get>(`workflow-instances/${request.workflowInstanceId}/journal${queryStringText}`); + return response.data; + } }