From 5bd8d47ed5c4fadbc4ee545b37106bddbd921273 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?G=C3=BCrkan=20G=C3=BCran?= Date: Tue, 6 Jun 2023 01:42:59 +0200 Subject: [PATCH] Implemented instances functionality on workflow definition browser --- .../components/browser.tsx | 8 ++- .../plugins/workflow-definitions-plugin.tsx | 56 ++++++++++++++++++- .../workflow-instances/components/browser.tsx | 8 ++- .../src/modules/workflow-instances/plugin.tsx | 3 - 4 files changed, 68 insertions(+), 7 deletions(-) diff --git a/src/designer/designer_packages/elsa-workflows-designer/src/modules/workflow-definitions/components/browser.tsx b/src/designer/designer_packages/elsa-workflows-designer/src/modules/workflow-definitions/components/browser.tsx index 4bd3aca3d..987de96b6 100644 --- a/src/designer/designer_packages/elsa-workflows-designer/src/modules/workflow-definitions/components/browser.tsx +++ b/src/designer/designer_packages/elsa-workflows-designer/src/modules/workflow-definitions/components/browser.tsx @@ -33,6 +33,7 @@ export class WorkflowDefinitionBrowser { } @Event() workflowDefinitionSelected: EventEmitter; + @Event() workflowInstancesSelected: EventEmitter; @Event() public newWorkflowDefinitionSelected: EventEmitter; @State() private workflowDefinitions: PagedList = {items: [], totalCount: 0}; @State() private publishedWorkflowDefinitions: PagedList = {items: [], totalCount: 0}; @@ -133,6 +134,11 @@ export class WorkflowDefinitionBrowser { this.workflowDefinitionSelected.emit(workflowDefinition); }; + private onWorkflowInstancesClick = async (e: MouseEvent, workflowDefinition: WorkflowDefinitionSummary) => { + e.preventDefault(); + this.workflowInstancesSelected.emit(workflowDefinition); + }; + private async loadWorkflowDefinitions() { // TODO: Load only json-based workflow definitions for now. @@ -303,7 +309,7 @@ export class WorkflowDefinitionBrowser { diff --git a/src/designer/designer_packages/elsa-workflows-designer/src/modules/workflow-definitions/plugins/workflow-definitions-plugin.tsx b/src/designer/designer_packages/elsa-workflows-designer/src/modules/workflow-definitions/plugins/workflow-definitions-plugin.tsx index f66a2c6fb..63e3f567c 100644 --- a/src/designer/designer_packages/elsa-workflows-designer/src/modules/workflow-definitions/plugins/workflow-definitions-plugin.tsx +++ b/src/designer/designer_packages/elsa-workflows-designer/src/modules/workflow-definitions/plugins/workflow-definitions-plugin.tsx @@ -1,7 +1,7 @@ import 'reflect-metadata'; import {h} from "@stencil/core"; import {Container, Service} from "typedi"; -import {ActivityDescriptor, Plugin} from "../../../models"; +import {ActivityDescriptor, Plugin, WorkflowInstance, WorkflowInstanceSummary} from "../../../models"; import newButtonItemStore from "../../../data/new-button-item-store"; import {Flowchart} from "../../flowchart/models"; import {generateUniqueActivityName} from '../../../utils/generate-activity-name'; @@ -21,6 +21,8 @@ import {DropdownButtonItem} from "../../../components/shared/dropdown-button/mod import {NotificationDisplayType} from "../../notifications/models"; import {WorkflowDefinitionEditorInstance} from "../services/editor-instance"; import {WorkflowDefinitionEditorService} from "../services/editor-service"; +import { WorkflowInstanceViewerService } from '../../workflow-instances/services/viewer-service'; +import { WorkflowInstancesApi } from '../../workflow-instances/services/workflow-instances-api'; const FlowchartTypeName = 'Elsa.Flowchart'; @@ -36,6 +38,8 @@ export class WorkflowDefinitionsPlugin implements Plugin { private workflowDefinitionBrowserInstance: ModalDialogInstance; private inputControlRegistry: InputControlRegistry; private workflowDefinitionEditorInstance: WorkflowDefinitionEditorInstance; + private readonly workflowInstancesApi: WorkflowInstancesApi; + private workflowInstanceBrowserInstance: ModalDialogInstance; constructor() { this.eventBus = Container.get(EventBus); @@ -45,6 +49,7 @@ export class WorkflowDefinitionsPlugin implements Plugin { this.modalDialogService = Container.get(ModalDialogService); this.activityDescriptorManager = Container.get(ActivityDescriptorManager); this.inputControlRegistry = Container.get(InputControlRegistry) + this.workflowInstancesApi = Container.get(WorkflowInstancesApi); const newMenuItems: Array = [{ order: 0, @@ -150,6 +155,7 @@ export class WorkflowDefinitionsPlugin implements Plugin { this.workflowDefinitionBrowserInstance = this.modalDialogService.show(() => , {actions}) } @@ -161,6 +167,18 @@ export class WorkflowDefinitionsPlugin implements Plugin { this.modalDialogService.hide(this.workflowDefinitionBrowserInstance); } + private onWorkflowInstancesSelected = async (e: CustomEvent) => { + const definitionId = e.detail.definitionId; + const version = e.detail.version; + const workflow = await this.api.get({definitionId, versionOptions:{version}}); + + this.workflowInstanceBrowserInstance = this.modalDialogService.show(() => + , + {actions: [DefaultModalActions.Close()], size: 'tw-max-w-screen-2xl'}); + } + public publishCurrentWorkflow = async (args: PublishClickedArgs) => { return this.onPublishClicked(new CustomEvent('PublishClickedArgs', {detail: args})); } @@ -224,4 +242,40 @@ export class WorkflowDefinitionsPlugin implements Plugin { }); }); } + + private onWorkflowInstanceSelected = async (e: CustomEvent) => { + const definitionId = e.detail.definitionId; + const instanceId = e.detail.id; + const version = e.detail.version; + + await this.api.get({definitionId, versionOptions: {version}, includeCompositeRoot: true}) + .then(async (workflowDefinition) => { + await this.workflowInstancesApi.get({id: instanceId}).then((workflowInstance) => { + this.showWorkflowInstanceViewer(workflowDefinition, workflowInstance); + this.modalDialogService.hide(this.workflowInstanceBrowserInstance); + this.modalDialogService.hide(this.workflowDefinitionBrowserInstance); + }).catch(() => { + NotificationService.createNotification({ + title: 'Error', + id: uuid(), + text:
Could not load workflow instance {instanceId} information
, + type: NotificationDisplayType.Error + }); + this.modalDialogService.hide(this.workflowInstanceBrowserInstance); + }); + }).catch(() => { + NotificationService.createNotification({ + title: 'Error', + id: uuid(), + text:
Could not load workflow {definitionId} information
, + type: NotificationDisplayType.Error + }); + this.modalDialogService.hide(this.workflowInstanceBrowserInstance); + }); + } + + private showWorkflowInstanceViewer = (workflowDefinition: WorkflowDefinition, workflowInstance: WorkflowInstance) => { + const service = Container.get(WorkflowInstanceViewerService); + service.show(workflowDefinition, workflowInstance); + }; } diff --git a/src/designer/designer_packages/elsa-workflows-designer/src/modules/workflow-instances/components/browser.tsx b/src/designer/designer_packages/elsa-workflows-designer/src/modules/workflow-instances/components/browser.tsx index 6fce21072..277e9eedd 100644 --- a/src/designer/designer_packages/elsa-workflows-designer/src/modules/workflow-instances/components/browser.tsx +++ b/src/designer/designer_packages/elsa-workflows-designer/src/modules/workflow-instances/components/browser.tsx @@ -1,10 +1,10 @@ -import {Component, Event, EventEmitter, h, Host, Method, State} from '@stencil/core'; +import {Component, Event, EventEmitter, h, Host, Method, Prop, State} from '@stencil/core'; import _ from 'lodash'; import {Search} from "./search"; import {Filter, FilterProps} from "./filter"; import {ListWorkflowInstancesRequest, WorkflowInstancesApi} from "../services/workflow-instances-api"; import {getRequest, persistRequest} from '../services/lookup-persistence'; -import {WorkflowDefinitionSummary} from "../../workflow-definitions/models/entities"; +import {WorkflowDefinition, WorkflowDefinitionSummary} from "../../workflow-definitions/models/entities"; import {OrderBy, OrderDirection, PagedList, VersionOptions, WorkflowInstanceSummary, WorkflowStatus, WorkflowSubStatus} from "../../../models"; import {Container} from "typedi"; import {WorkflowDefinitionsApi} from "../../workflow-definitions/services/api"; @@ -38,6 +38,7 @@ export class WorkflowInstanceBrowser { this.modalDialogService = Container.get(ModalDialogService); } + @Prop() workflowDefinition: WorkflowDefinition; @Event() public workflowInstanceSelected: EventEmitter; @State() private workflowInstances: PagedList = {items: [], totalCount: 0}; @State() private workflows: Array = []; @@ -65,6 +66,9 @@ export class WorkflowInstanceBrowser { this.selectedSubStatus = persistedRequest.subStatus } + if(this.workflowDefinition != null) + this.selectedWorkflowDefinitionId = this.workflowDefinition.definitionId; + await this.loadWorkflowDefinitions(); await this.loadWorkflowInstances(); } diff --git a/src/designer/designer_packages/elsa-workflows-designer/src/modules/workflow-instances/plugin.tsx b/src/designer/designer_packages/elsa-workflows-designer/src/modules/workflow-instances/plugin.tsx index d8579c6af..1db0d80ed 100644 --- a/src/designer/designer_packages/elsa-workflows-designer/src/modules/workflow-instances/plugin.tsx +++ b/src/designer/designer_packages/elsa-workflows-designer/src/modules/workflow-instances/plugin.tsx @@ -17,7 +17,6 @@ import {WorkflowInstanceViewerService} from "./services/viewer-service"; @Service() export class WorkflowInstancesPlugin implements Plugin { - private readonly workflowInstanceViewerService: WorkflowInstanceViewerService; private readonly eventBus: EventBus; private readonly workflowDefinitionsApi: WorkflowDefinitionsApi; private readonly workflowInstancesApi: WorkflowInstancesApi; @@ -25,7 +24,6 @@ export class WorkflowInstancesPlugin implements Plugin { private workflowInstanceBrowserInstance: ModalDialogInstance; constructor() { - this.workflowInstanceViewerService = Container.get(WorkflowInstanceViewerService); this.eventBus = Container.get(EventBus); this.workflowDefinitionsApi = Container.get(WorkflowDefinitionsApi); this.workflowInstancesApi = Container.get(WorkflowInstancesApi); @@ -86,6 +84,5 @@ export class WorkflowInstancesPlugin implements Plugin { }); this.modalDialogService.hide(this.workflowInstanceBrowserInstance); }); - } }