feat(15311): Add metrics charting to the links in the worspace

[vanch3d]

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

This PR is the first step of an initiative to add basic observability to the Edge web application. It extends the existing Metrics visualisation by adding two sets of features:

• an extended list of configurable visual charts for the existing metrics
• the operationalisation of the "connectors" in the Workspace to provide context for the selection and visualisation of the metrics

Charts are reusing the existing pattern designed for the basic metric Stat, i.e. the selection of one of the available metrics for visualisation. This time, the users are allowed to choose one of the available chart types for visualisation. For this PR, we are adding support for Line Chart and Bar Chart visualisation.

While metrics Stat was available in the side panel opened by clicking on one of the "nodes" (adapter or bridge), this PR exploits the connector between the nodes and the edge by reifying that connection and providing a full "observability" panel designated to the flow of data going through it. It allows us to provide a strong context to the available metrics (only those related to the nodes connected by the connectors) but also interesting extensibility with dynamic grouping of nodes.

The expected UX is as follows:

• users click on the "observability" button on a connector
• the side panel opens, with the default metric(s) already configured
• By clicking on the "configuration" option, users have access to a dual selector.
• First users select, among a defined list of options, the metric to display
• Then, the users select one of the visualisation charts for rendering
• By clicking on the "add to panel", the metric is now visualised on the panel
• Multiple charts can be added but without a repeat of an already configured metric
• existing metrics/charts can be removed from the panel or resized across one or two columns. They cannot be re-ordered
• the metric name used in a chart can be copied to the clipboard

Out-of-scope

• the UX for the configuration needs to be refactored. See https://hivemq.kanbanize.com/ctrl_board/57/cards/17951/details/
• metrics IDs are not enough for identifying the metrics. They should come with their own metadata (name, description, categories, ...). See https://hivemq.kanbanize.com/ctrl_board/57/cards/17793/details/
• Persistence of the configured panels can be easily handled in localStorage. This will be done in a subsequent ticket. See https://hivemq.kanbanize.com/ctrl_board/57/cards/18003/details/
• The selection of multiple metrics for a chart will be done in a subsequent ticket, utilising the dynamic grouping of entities in the workspace. See https://hivemq.kanbanize.com/ctrl_board/67/cards/17477/details/
• computation and persistence of "samples" for the configured metrics need to be considered at a different scope (both frontend and backend). See https://hivemq.kanbanize.com/ctrl_board/57/cards/17964/details/

Before

After

[simon622]

Looks good. Question - I struggled to initially figure out that graphs were only available by clicking on the icon on the connectors versus the node of the object itself. I was wondering why we have decided to break up the functionality, when it seems like the component could be reusable on the main flyout (since we already have counters, just not the graphs)?

[simon622]

The question RE: the different visual approach has been answered, and we have exciting new features coming that require this.