Implemented instances functionality on workflow definition browser

This commit is contained in:
Gürkan Güran 2023-06-06 01:42:59 +02:00
parent 645f9d81d9
commit 5bd8d47ed5
4 changed files with 68 additions and 7 deletions

View file

@ -33,6 +33,7 @@ export class WorkflowDefinitionBrowser {
}
@Event() workflowDefinitionSelected: EventEmitter<WorkflowDefinitionSummary>;
@Event() workflowInstancesSelected: EventEmitter<WorkflowDefinitionSummary>;
@Event() public newWorkflowDefinitionSelected: EventEmitter;
@State() private workflowDefinitions: PagedList<WorkflowDefinitionSummary> = {items: [], totalCount: 0};
@State() private publishedWorkflowDefinitions: PagedList<WorkflowDefinitionSummary> = {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 {
<td>
<div class="tw-flex tw-items-center tw-space-x-3 lg:tw-pl-2">
<a href="#" class="tw-truncate hover:tw-text-gray-600">
<a onClick={e => this.onWorkflowInstancesClick(e, workflowDefinition)} href="#" class="tw-truncate hover:tw-text-gray-600">
Instances
</a>
</div>

View file

@ -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<DropdownButtonItem> = [{
order: 0,
@ -150,6 +155,7 @@ export class WorkflowDefinitionsPlugin implements Plugin {
this.workflowDefinitionBrowserInstance = this.modalDialogService.show(() =>
<elsa-workflow-definition-browser onWorkflowDefinitionSelected={this.onWorkflowDefinitionSelected}
onWorkflowInstancesSelected={this.onWorkflowInstancesSelected}
onNewWorkflowDefinitionSelected={this.onNewWorkflowDefinitionSelected}/>,
{actions})
}
@ -161,6 +167,18 @@ export class WorkflowDefinitionsPlugin implements Plugin {
this.modalDialogService.hide(this.workflowDefinitionBrowserInstance);
}
private onWorkflowInstancesSelected = async (e: CustomEvent<WorkflowDefinitionSummary>) => {
const definitionId = e.detail.definitionId;
const version = e.detail.version;
const workflow = await this.api.get({definitionId, versionOptions:{version}});
this.workflowInstanceBrowserInstance = this.modalDialogService.show(() =>
<elsa-workflow-instance-browser
workflowDefinition={workflow}
onWorkflowInstanceSelected={this.onWorkflowInstanceSelected}/>,
{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<WorkflowInstanceSummary>) => {
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: <div>Could not load workflow instance {instanceId} information</div>,
type: NotificationDisplayType.Error
});
this.modalDialogService.hide(this.workflowInstanceBrowserInstance);
});
}).catch(() => {
NotificationService.createNotification({
title: 'Error',
id: uuid(),
text: <div>Could not load workflow {definitionId} information</div>,
type: NotificationDisplayType.Error
});
this.modalDialogService.hide(this.workflowInstanceBrowserInstance);
});
}
private showWorkflowInstanceViewer = (workflowDefinition: WorkflowDefinition, workflowInstance: WorkflowInstance) => {
const service = Container.get(WorkflowInstanceViewerService);
service.show(workflowDefinition, workflowInstance);
};
}

View file

@ -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<WorkflowInstanceSummary>;
@State() private workflowInstances: PagedList<WorkflowInstanceSummary> = {items: [], totalCount: 0};
@State() private workflows: Array<WorkflowDefinitionSummary> = [];
@ -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();
}

View file

@ -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);
});
}
}