UI for QBP Business Process Simulator
npm install bimp-uiBIMP is a graphical user interface for QBP Business Process Simulator simulation service.
BIMP provides a simple yet complete front end user interface to:
- Upload and parse business process models in standard BPMN 2.0 format
- Collect simulation scenario specific data from user for the business process models
- Run the simulation scenario
- Show and visualize the simulation results e.g. waiting times, resource utilization and etc
- Show a heatmap of process element weights based on several measures
- Save scenario
- Save simulation results as into BPMN, as MXML logs or as CSV file
BIMP backend runs on QBP Business Process Simulator backend. BIMP by default uses limited account in the backend simulation service and large-scale simulation cannot be conducted. Contact info@qbp-simulator.com for more information about full access.
The easiest way to use BIMP is to build it and run it.
Steps:
- run the following commands to generate the package bundle and sample app into ./dist folder
``
npm install
npm run build
- See ./dist/ folder for the sample app and dependencies. index.html is the entry point to the application that initializes BIMP.
- See "Configuration options" for bimpConfig configuration object in app.js.
The NPM package includes the source code of the BIMP UI - thus you need the development dependencies like TypeScript and bundler that supports SASS files for styling.
Or you can use BIMP in npm package. See notes below about a few manual dependencies that are needed.
Install BIMP from npm:
`
npm install --save bimp-ui
Assuming you have a HTML element with id 'root-container' on your page somewhere. E.g.
.`
import * as Bimp from 'bimp-ui'
import 'bimp-ui/bimp-ui.sass'
window.addEventListener('DOMContentLoaded', function () {
Bimp.init('root-container', bimpConfig);
}, true);
`
Make sure you have SASS loader configured for your project. We can recommend Parcel bundler for simple out of box bundling.
See "Configuration options" for bimpConfig configuration object.
You can set the files to initialize Bimp with by passing in an argument to init function:
`
// initial set of files to be loaded. Name - file name, contents - file BPMN content
var initialFiles = [
{
name: 'file1.bpmn',
contents: ' },
{
name: 'file2.bpmn',
contents: ' }
];
Bimp.init('root-container', bimpConfig, initialFiles);
To get file contents back from Bimp then you can use the following function. First you can specify a boolean
value in the first argument if you want to include simulation results as well or only scenario information:
`
var files = Bimp.getUpdatedFiles(includeResults);
files.forEach(f => {
console.log(f.name);
console.log(f.contents);
}
If you want to start start simulation programmatically, then after BPMN files have been loaded, call:
`
Bimp.startSimulation(mxmlLog);
The first parameters is a boolean indicating whether MXML logs should be created.
To get state of the application (page, simulation status and etc), call:
`
var state = Bimp.getState();
Import BimpApp React component:
`
import { BimpApp } from 'bimp-ui'
Use in your own React component and pass in the configuration object and optionally a pre-uploaded files:
`
const MyComponent = () => {
return (
initialFiles={initialFiles}
/>
);
}
`
var bimpConfig = {
// Protocol for Simulation Service
protocol: "http://",
// Hostname and port where RESTful Simulation Service is hosted
host: "www.qbp-simulator.com:8080", // or: window.location.hostname + ":8080"
// Path to the Simulation endpoint in the service
url: "/qbp-simulator/rest/Simulation",
// Credentials for basic auth, if applicable
basicAuth: {
username: "limited",
password: "limited"
},
// If Service supports token based auth and Bearer token, then provide it in the the jwtAuth key
// jwtAuth: {
// token: "JWT TOKEN TO BE PASSED TO THE SERVICE"
// }
// Relative path prefix to BPMN and Heatmap viewer files (bpmnViewer.html and heatmapViewer.html) to be opened when requested.
linkPrefix: ""
};
`
BIMP UI is written in Typescript and built on React framework.
To create the bundles run:
`
npm install
npm run build
Simulation scenario is embedded to the BPMN file following schema: QBPSchema.xsd
QBP Business Process Simulator RESTful service API schema is defined in: ApiSchema201212.xsd
Schema definition files need to be generated when either of the schema is changed.
This can be done by doing the following:
run npm script: npm run xsdgen`
Copyright (c) 2017 Madis Abel
info@qbp-simulator.com