From f20fdbf437e7c579454e1f4aa5a4f3a3e0f25d5f Mon Sep 17 00:00:00 2001 From: Sipke Schoorstra Date: Wed, 21 Apr 2021 17:28:56 +0200 Subject: [PATCH] Implement record selection --- .../elsa-workflows-studio/src/components.d.ts | 7 +++- .../elsa-designer-tree-activity.tsx | 4 ++- .../elsa-designer-tree/elsa-designer-tree.tsx | 6 +++- .../elsa-workflow-instance-journal.tsx | 36 ++++++++++++++++--- .../elsa-workflow-instance-viewer-screen.tsx | 15 ++++++-- 5 files changed, 57 insertions(+), 11 deletions(-) diff --git a/src/designer/elsa-workflows-studio/src/components.d.ts b/src/designer/elsa-workflows-studio/src/components.d.ts index dde36787e..c054d38a7 100644 --- a/src/designer/elsa-workflows-studio/src/components.d.ts +++ b/src/designer/elsa-workflows-studio/src/components.d.ts @@ -5,7 +5,7 @@ * It contains typing information for all components that exist in this project. */ import { HTMLStencilElement, JSXBase } from "@stencil/core/internal"; -import { ActivityDefinitionProperty, ActivityDescriptor, ActivityDesignDisplayContext, ActivityModel, ActivityPropertyDescriptor, VersionOptions, WorkflowBlueprint, WorkflowDefinition, WorkflowModel } from "./models"; +import { ActivityDefinitionProperty, ActivityDescriptor, ActivityDesignDisplayContext, ActivityModel, ActivityPropertyDescriptor, VersionOptions, WorkflowBlueprint, WorkflowDefinition, WorkflowExecutionLogRecord, WorkflowModel } from "./models"; import { MatchResults, RouterHistory } from "@stencil/router"; import { MenuItem } from "./components/controls/elsa-context-menu/models"; import { DropdownButtonItem, DropdownButtonOrigin } from "./components/controls/elsa-dropdown-button/models"; @@ -36,10 +36,12 @@ export namespace Components { interface ElsaDesignerTree { "destroyJsPlumb": () => Promise; "model": WorkflowModel; + "selectedActivityId"?: string; } interface ElsaDesignerTreeActivity { "displayContext": ActivityDesignDisplayContext; "icon": string; + "selected": boolean; } interface ElsaDropdownButton { "icon"?: any; @@ -482,12 +484,14 @@ declare namespace LocalJSX { interface ElsaDesignerTree { "model"?: WorkflowModel; "onWorkflow-changed"?: (event: CustomEvent) => void; + "selectedActivityId"?: string; } interface ElsaDesignerTreeActivity { "displayContext"?: ActivityDesignDisplayContext; "icon"?: string; "onEdit-activity"?: (event: CustomEvent) => void; "onRemove-activity"?: (event: CustomEvent) => void; + "selected"?: boolean; } interface ElsaDropdownButton { "icon"?: any; @@ -619,6 +623,7 @@ declare namespace LocalJSX { } interface ElsaWorkflowInstanceJournal { "activityDescriptors"?: Array; + "onRecordSelected"?: (event: CustomEvent) => void; "serverUrl"?: string; "workflowBlueprint"?: WorkflowBlueprint; "workflowInstanceId"?: string; diff --git a/src/designer/elsa-workflows-studio/src/components/designers/tree/elsa-designer-tree-activity/elsa-designer-tree-activity.tsx b/src/designer/elsa-workflows-studio/src/components/designers/tree/elsa-designer-tree-activity/elsa-designer-tree-activity.tsx index 146cf6f01..7e5e5f566 100644 --- a/src/designer/elsa-workflows-studio/src/components/designers/tree/elsa-designer-tree-activity/elsa-designer-tree-activity.tsx +++ b/src/designer/elsa-workflows-studio/src/components/designers/tree/elsa-designer-tree-activity/elsa-designer-tree-activity.tsx @@ -14,6 +14,7 @@ export class ElsaDesignerTreeActivity { @Prop() displayContext: ActivityDesignDisplayContext @Prop() icon: string + @Prop() selected: boolean; @Event({eventName: 'remove-activity', bubbles: true}) removeActivityEmitter: EventEmitter; @Event({eventName: 'edit-activity', bubbles: true}) editActivityEmitter: EventEmitter; @State() showMenu: boolean @@ -45,11 +46,12 @@ export class ElsaDesignerTreeActivity { const activity = displayContext.activityModel; const activityId = activity.activityId; const displayName = activity.displayName && activity.displayName.length > 0 ? activity.displayName : activity.name && activity.name.length > 0 ? activity.name : activity.type + const activityClass = this.selected ? 'border-blue-600' : 'border-white hover:border-blue-600'; return ( this.onEditActivityClick(e)} - class="activity border-2 border-solid border-white rounded bg-white text-left text-black text-lg hover:border-blue-600 select-none max-w-md shadow-sm relative"> + class={`${activityClass} activity border-2 border-solid rounded bg-white text-left text-black text-lg select-none max-w-md shadow-sm relative`}>
diff --git a/src/designer/elsa-workflows-studio/src/components/designers/tree/elsa-designer-tree/elsa-designer-tree.tsx b/src/designer/elsa-workflows-studio/src/components/designers/tree/elsa-designer-tree/elsa-designer-tree.tsx index 2a7d07169..b9633177b 100644 --- a/src/designer/elsa-workflows-studio/src/components/designers/tree/elsa-designer-tree/elsa-designer-tree.tsx +++ b/src/designer/elsa-workflows-studio/src/components/designers/tree/elsa-designer-tree/elsa-designer-tree.tsx @@ -17,6 +17,7 @@ import state from "../../../../utils/store"; export class ElsaWorkflowDesigner { @Prop() model: WorkflowModel = { activities: [], connections: [], persistenceBehavior: WorkflowPersistenceBehavior.WorkflowBurst }; + @Prop() selectedActivityId?: string; @Event({eventName: 'workflow-changed', bubbles: true, composed: true, cancelable: true}) workflowChanged: EventEmitter @State() workflowModel: WorkflowModel el: HTMLElement @@ -536,7 +537,10 @@ export class ElsaWorkflowDesigner { } renderActivity(displayContext: ActivityDesignDisplayContext) { - return this.onDragStartActivity(e, displayContext)} />; } diff --git a/src/designer/elsa-workflows-studio/src/components/screens/workflow-instance-viewer/elsa-workflow-instance-viewer-screen/elsa-workflow-instance-journal.tsx b/src/designer/elsa-workflows-studio/src/components/screens/workflow-instance-viewer/elsa-workflow-instance-viewer-screen/elsa-workflow-instance-journal.tsx index dae05e022..122da4d08 100644 --- a/src/designer/elsa-workflows-studio/src/components/screens/workflow-instance-viewer/elsa-workflow-instance-viewer-screen/elsa-workflow-instance-journal.tsx +++ b/src/designer/elsa-workflows-studio/src/components/screens/workflow-instance-viewer/elsa-workflow-instance-viewer-screen/elsa-workflow-instance-journal.tsx @@ -1,4 +1,4 @@ -import {Component, h, Host, Method, Prop, State, Watch} from '@stencil/core'; +import {Component, EventEmitter, h, Host, Method, Prop, State, Watch, Event} from '@stencil/core'; import moment from 'moment'; import {enter, leave, toggle} from 'el-transition' import {registerClickOutside} from "stencil-click-outside"; @@ -19,8 +19,10 @@ export class ElsaWorkflowInstanceJournal { @Prop() serverUrl: string; @Prop() activityDescriptors: Array = []; @Prop() workflowBlueprint: WorkflowBlueprint; + @Event() recordSelected: EventEmitter; @State() isVisible: boolean = true; @State() records: PagedList = {items: [], totalCount: 0}; + @State() selectedRecordId?: string; el: HTMLElement; @@ -54,6 +56,18 @@ export class ElsaWorkflowInstanceJournal { await this.workflowInstanceIdChangedHandler(this.workflowInstanceId); } + getEventColor(eventName: string) { + const map = { + 'Executing': 'blue', + 'Executed': 'green', + 'Faulted': 'rose', + 'Warning': 'yellow', + 'Information': 'blue', + }; + + return map[eventName] || 'gray'; + } + onCloseClick() { this.hide(); } @@ -62,12 +76,18 @@ export class ElsaWorkflowInstanceJournal { this.show(); } + onRecordClick(record: WorkflowExecutionLogRecord) { + this.selectedRecordId = record.id; + this.recordSelected.emit(record); + } + render() { const records = this.records; const items = records.items; const activityDescriptors = this.activityDescriptors; const workflowBlueprint = this.workflowBlueprint; const activityBlueprints: Array = workflowBlueprint.activities || []; + const selectedRecordId = this.selectedRecordId; const renderRecord = (record: WorkflowExecutionLogRecord, index: number) => { const isLastItem = index == items.length - 1; @@ -80,6 +100,9 @@ export class ElsaWorkflowInstanceJournal { const activityDescriptor = activityDescriptors.find(x => x.type === activityType); const activityBlueprint = activityBlueprints.find(x => x.id === record.activityId) || {name: null, displayName: null}; const activityName = activityBlueprint.displayName || activityBlueprint.name || activityDescriptor.displayName || activityDescriptor.type; + const eventName = record.eventName; + const eventColor = this.getEventColor(eventName); + const recordClass = record.id === selectedRecordId ? 'border-blue-600' : 'hover:bg-gray-100 border-transparent'; const deltaTimeText = !!deltaTime ? deltaTime.asHours() > 1 ? `${deltaTime.asHours()} h` @@ -92,7 +115,7 @@ export class ElsaWorkflowInstanceJournal { return (
  • -
    +
    this.onRecordClick(record)} class={`${recordClass} border-2 cursor-pointer p-4 rounded`}>
    {isLastItem ? undefined :
    @@ -112,9 +135,12 @@ export class ElsaWorkflowInstanceJournal {
    - - {record.eventName} - + + + + {eventName} +
    {currentTimestamp.format('DD-MM-YYYY HH:mm:ss')} diff --git a/src/designer/elsa-workflows-studio/src/components/screens/workflow-instance-viewer/elsa-workflow-instance-viewer-screen/elsa-workflow-instance-viewer-screen.tsx b/src/designer/elsa-workflows-studio/src/components/screens/workflow-instance-viewer/elsa-workflow-instance-viewer-screen/elsa-workflow-instance-viewer-screen.tsx index 3c9095508..2875d4937 100644 --- a/src/designer/elsa-workflows-studio/src/components/screens/workflow-instance-viewer/elsa-workflow-instance-viewer-screen/elsa-workflow-instance-viewer-screen.tsx +++ b/src/designer/elsa-workflows-studio/src/components/screens/workflow-instance-viewer/elsa-workflow-instance-viewer-screen/elsa-workflow-instance-viewer-screen.tsx @@ -7,7 +7,7 @@ import { ActivityModel, Connection, ConnectionModel, EventTypes, SyntaxNames, - WorkflowBlueprint, + WorkflowBlueprint, WorkflowExecutionLogRecord, WorkflowInstance, WorkflowModel, WorkflowPersistenceBehavior, @@ -32,6 +32,7 @@ export class ElsaWorkflowInstanceViewerScreen { @State() workflowInstance: WorkflowInstance; @State() workflowBlueprint: WorkflowBlueprint; @State() workflowModel: WorkflowModel; + @State() selectedActivityId?: string; el: HTMLElement; designer: HTMLElsaDesignerTreeElement; @@ -157,12 +158,20 @@ export class ElsaWorkflowInstanceViewerScreen { eventBus.emit(EventTypes.ShowWorkflowSettings); } + onRecordSelected(e: CustomEvent) { + this.selectedActivityId = e.detail.activityId; + } + render() { const descriptors: Array = state.activityDescriptors; return ( this.el = el}> {this.renderCanvas()} - + this.onRecordSelected(e)}/> ); } @@ -170,7 +179,7 @@ export class ElsaWorkflowInstanceViewerScreen { renderCanvas() { return (
    - this.designer = el}/> + this.designer = el} selectedActivityId={this.selectedActivityId}/>
    ); }