[PoC] feat(UI): Implementation of multi columns dashboarding system

[Thebarda]

Description

This is a Proof of Concept

https://user-images.githubusercontent.com/12515407/195647574-977245d2-894a-4de3-bbb0-a1535ff832db.mov

This PoC evaluates the complexity of developing a multi columns dashboarding system.

Here are the features supported by this PoC:

• Add a system of 3 columns (will be updated to 12 columns soon)
• Add a button to add a widget
• Add a button to remove a widget
• Add a button to duplicate a widget with the same content
• Create a simple and interactive widget with dynamic import (Module Federation)
• Create a complex widget that displays a service's performance graph with dynamic import (Module Federation)
• Handle responsiveness following screen size using breakpoints

How to test it?

• Go to centreon/www/widgets/centreon-text-widget then run npm run build
• Go to centreon/www/widgets/centreon-performance-graph then run npm run build
• In the dev ecosystem, check out to custom-views-nightly
• Start the dev ecosystem
• Go to "Home > Custom views (nightly)"
• Play with available widgets :)

About performances:

Here is a screenshot when dragging a widget without moving other widgets

Dragging a widget that moves widgets around

Resizing the window to change the global layout

Type of change

• [ ] Patch fixing an issue (non-breaking change)
• [ ] New functionality (non-breaking change)
• [ ] Breaking change (patch or feature) that might cause side effects breaking part of the Software

Target serie

• [ ] 21.04.x
• [ ] 21.10.x
• [ ] 22.04.x
• [ ] 22.10.x (master)

How this pull request can be tested ?

Please describe the procedure to verify that the goal of the PR is matched. Provide clear instructions so that it can be correctly tested.

Any relevant details of the configuration to perform the test should be added.

Checklist

Community contributors & Centreon team

• [ ] I have followed the coding style guidelines provided by Centreon
• [ ] I have commented my code, especially new classes, functions or any legacy code modified. (docblock)
• [ ] I have commented my code, especially hard-to-understand areas of the PR.
• [ ] I have rebased my development branch on the base branch (master, maintenance).

[sonarqube-decoration[bot]]

SonarQube Quality Gate

0 Bugs
0 Vulnerabilities
0 Security Hotspots
141 Code Smells

0.0% Coverage
0.0% Duplication