Blog Posts BPMN DMN

Deploying Dashbuilder Dashboards

Blog: Drools & jBPM Blog

Dashbuilder files are plain YAML which makes it easy to author dashboards using the online editor. The next natural step is to publish this dashboard for public access and this is what we cover in this article!

Image Generated usign DALLE-2

What is Dashbuilder after all?

Dashbuilder is a web application that can run dashboards in different modes:

EDITOR: In this mode Dashbuilder receives the content dynamically and renders it. It is used embedded in editors;

CLIENT: This is the mode that should be used for deployment. Basically you provide your YAML files and configure the path to it in file setup.js. If you map multiple YAML files then Dashbuilder will prompt users to select a dashboard.

In Client mode the requirement is to have the dashbuilder static bundle, which is inside the @kie-tools/dashbuilder-client package. But how do you make it available? Let’s explore some alternatives!

Deploying to Openshift

It is possible to easily deploy to Openshift using the following articles written by my colleagues:

Dashbuilder NPM project

For using NPM with Dashbuilder you need to create a new npm project, then add the dependency “@kie-tools/dashbuilder-client”:

npm init

npm i @kie-tools/dashbuilder-client

npm install

The dashbuilder bundle will be available in node_modules/@kie-tools/dashbuilder-client/dist/. You can use scripts or webpack to build the final bundle that should include your setup.js and the YAML files. Here’s a sample package.json

{

 "name": "dashbuilder-webapp",

 "version": "0.0.0",

 "description": "Dashbuilder WebApp",

 "scripts": {

   "bootstrap": "npm install",

   "clean": "rm -rf dist/",

   "copy:dashbuilder": "cp -r node_modules/@kie-tools/dashbuilder-client/dist/* dist/",

   "copy:sources": "cp -r static/* dist",

   "build": "npm run clean && mkdir dist/ && npm run copy:dashbuilder && npm run copy:sources",

   "server": "npm run build && cd dist && http-server -p 8000"

 },

 "devDependencies": {

   "@kie-tools/dashbuilder-client": "^0.26.0",

   "http-server": "^14.1.1"

 }

}

Using the package.json from above will allow you to run the following commands:

The static content from dist  is ready to be deployed in some web server. Let’s explore how to do it with Github Pages.

Using GitHubPages

To deploy to Github Pages, you need to build the project from the last step and commit the dist content to a Github repository with a branch called gh-pages. Your dashboards will be available in https://{github username}.github.io/{repository name}

Here’s a template project so you can get started:

https://github.com/jesuino/dashbuilder-webapp-project-template

To use the template above just click on button “Use this template” (make sure to mark “Include all branches”). Then you can either edit the files and push changes to Github and the project will be automatically built and available in https://{github username}.github.io/{repository name}. 

To use a rich YAML editor you can use Serverless Logic Web Tools:

You can see these steps also in the video below

The post Deploying Dashbuilder Dashboards appeared first on KIE Community.

Leave a Comment

Get the BPI Web Feed

Using the HTML code below, you can display this Business Process Incubator page content with the current filter and sorting inside your web site for FREE.

Copy/Paste this code in your website html code:

<iframe src="https://www.businessprocessincubator.com/content/deploying-dashbuilder-dashboards/?feed=html" frameborder="0" scrolling="auto" width="100%" height="700">

Customizing your BPI Web Feed

You can click on the Get the BPI Web Feed link on any of our page to create the best possible feed for your site. Here are a few tips to customize your BPI Web Feed.

Customizing the Content Filter
On any page, you can add filter criteria using the MORE FILTERS interface:

Customizing the Content Filter

Customizing the Content Sorting
Clicking on the sorting options will also change the way your BPI Web Feed will be ordered on your site:

Get the BPI Web Feed

Some integration examples

BPMN.org

XPDL.org

×