feat(18150): Manual grouping of nodes in the workspace to create new contexts for metrics

[vanch3d]

See https://hivemq.kanbanize.com/ctrl_board/57/cards/18150/details/

This PR is the last step in the "metrics" initiative. It allows users to manually select adapters in the workspace and group them in an identifiable "entity" connected to the Edge.

Each group is a node exactly like the adapters or the bridges and reacts similarly: clicking on it will open a property panel, this time containing info related to all the adapters included.

Adapters within a group can still be accessed and manipulated. In particular, each adapter still has its link to the Edge

However, the group can be "collapsed", resulting in individual adapters' links being "combined" in a single, summarised, link.

Clicking on the link's observability icon opens a side panel, similar to the other links. This time, however, metrics from all the grouped adapters are available for selection and visualisation in one of the charts.

Grouping adapters will allow users

• to visualise the various adapters connected to the Edge in a more meaningful way (for example by grouping adapters that are located on the same site)
• to create a context where a subset of metrics can be aggregated and visualised on their own

Features

• The workspace is now persisted into an internal "store" associated with localStorage. The layout of the graph and the groups (topology) will be all maintained across sessions
• The metrics editor now shows multiple sets of metrics when available
• The Workspace canvas contains a "group" command (in the top-left corner) that appears once at least two adapters are selected (use the shift+drag paradigm). While many nodes might be selected, the new group will only include adapters that are not already in a group
• Groups have a custom "toolbar" on their top, once selected. It contains the "collapse/expand" and the "ungroup" commands
• When ungrouping adapters, a confirmation will be required to prevent non-cancelable operation
• The "Topology Graph: Layout" and its clunky grouping has been removed from the "Workspace Configuration" panel

Out-of-scope

• When grouped or ungrouped, the adapters' initial position is not very elegant. See https://hivemq.kanbanize.com/ctrl_board/57/cards/18204/details/
• metadata of the groups (description, background colour) are not yet editable. See https://hivemq.kanbanize.com/ctrl_board/57/cards/18214/details/
• charts are not allowing multiple metrics as series
  , see https://hivemq.kanbanize.com/ctrl_board/57/cards/18215/details/

Before

After

[simon622]

Unable to change a group name. When I create a group, it is always called "Untitled Group". This is very helpful.

I seem to be able to create arbitrary connections between group box and nodes which doesn't seem correct - by clicking and holding between the connector point at the bottom of a grouping box and dragging to the HiveMQ edge entity.

It wasn't entirely clear how to go about creating groupings in the first place. I have to experiment with various key presses to make a group appear. It we are adding this as function, it should be clear how to create these things to add value.

[vanch3d]

Unable to change a group name. When I create a group, it is always called "Untitled Group". This is very helpful.

A feature to edit the metadata of a group will be covered in another PR. See https://hivemq.kanbanize.com/ctrl_board/57/cards/18214/details/

I seem to be able to create arbitrary connections between group box and nodes which doesn't seem correct - by clicking and holding between the connector point at the bottom of a grouping box and dragging to the HiveMQ edge entity.

Ah, that's a bug with the canvas editor. Will fix.

It wasn't entirely clear how to go about creating groupings in the first place. I have to experiment with various key presses to make a group appear. It we are adding this as function, it should be clear how to create these things to add value.

This is an issue to address very quickly. Either with documentation that starts covering the UI, or (and?) some tour-like functionality to introduce users to the UX:

Will be covered in another PR, see https://hivemq.kanbanize.com/ctrl_board/57/cards/18236/details/

[simon622]

Seems like all the points will be covered in upcoming work units