An Introduction to Dashboard 2

Up until now node-red dashboards have all been based on the dashboards nodes in the node-red-dashboard module.

This was a third party module and was based on a version of angular (V1) which is no longer maintained.

The project is now deemed to be on Life support -see here



Flowfuse the company are developing a new set of dashboard nodes to replace most of the existing dashboard nodes.

These dashboard nodes are installed by installing the module @flowfuse/node-red-dashboard module

This module can be installed alongside the existing dashboard nodes and installs under the header dashboard2 as show below:

dashboard2-nodes

The old dashboard nodes are now commonly referred to as dashboard1 nodes.

As of January 2024 the developers of dashboard 2 have stated that version 1.0 is stable and that it can be used to build dashboards.

Dashboard 1 and Dashboard 2 Frameworks

Dashboard 1 was based on the angular framework whereas dashboard2 uses the VUE framework.

These frameworks are very different.

Dashboard1 vs Dashboard2 Layout

Dashboard 1 had a single page called UI by default. This page could be divided into tabs and groups.

UI>tabs>groups>nodes

To view the dashboard page you simply go to

host:1880/ui

dashboard-1-ui

Dashboard 2 has a multiple pages called page1,page2 etc by default.

The page is divided into groups and nodes:

base>page1>groups>nodes

base>page2>groups>nodes

etc

To view the dashboard page you simply go to (example only)

host:1880/dashboard/page3

view-dashboad-2-ui

Working Notes

I have been upgrading a few of my old flows from dashboard 1 to dashboard 2 as part of my learning process.

The nodes e.g chart node are very similar and should be a straightforward swap. The template node is quite different due to the new framework.

Looping

One of the common things is looping in the template node using ng-repeat .This is replaced by the v-for command as shown in the screen shot below:

dashboard2-template-loops

Note: the dashboard 1 flow uses the broker[‘display_icon_fill’] whereas the dashboard 2 uses broker.display_icon_fill. They are the same and I could have used the same format in both templates.

Feeding the template widget from a template node.

This is a very common design pattern shown below:

template-node-widget

In dashboard 1 the template widget code looked likeĀ  this:

<div ng-bind-html="msg.payload"></div>
in dashboard 2 it looks like this:
<div v-html="msg.payload"></div>

 

What should You Do ? (May 2024)

A migration plan is being developed see here. so that eventually you should be able to change out the old dashboard 1 nodes with the new dashboard 2 nodes with minimum of effort.

However as this is not currently the case I am currently leaving my existing flows as they are and moving to dashboard 2 nodes for new flows.

References:

 

Click to rate this post!
[Total: 1 Average: 4]

Leave a Reply

Your email address will not be published. Required fields are marked *