Refactor panels base for clearer separation of concerns
What does this MR do and why?
This MR refactors the panels_base.vue
component for clearer separation of concerns as described in Refactor panels base component for clearer sepa... (#442752 - closed) without making any visual changes. Doing so makes the shared panels_base.vue
component reusable on any dashboard and not just limited to analytics dashboards. It also improves maintainability by splitting what was a very large component into two smaller ones.
The following changes are made:
- Refactored
panels_base.vue
to be agnostic and thus reusable component outside of just analytics dashboards. - Added a new
analytics_panel.vue
component that wrapspanels_base.vue
with all the analytics specific domain logic. - Updated and fixed the panels base component story.
Next-ups:
- Render
analytics_panel.vue
insideanalytics_dashboard.vue
using acustomizable_dashboard.vue
slot for further seperation of concerns.- I opted to not do this here because this MR is already large.
MR acceptance checklist
Please evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.
Screenshots or screen recordings
No visual changes.
Behaviour dashboard.
Before | After |
---|---|
Viz designer
Before | After |
---|---|
Error + empty state
Before | After |
---|---|
How to set up and validate locally
- Enable Product analytics on your GDK by following the instructions.
- Navigate to Project > Analytics > Dashboards and set up product analytics.
- Navigate to Project > Analytics > Dashboards and follow the alert to enable customizable dashboards.
- Navigate to Project > Analytics > Dashboards and create a custom dashboard.
- Navigate to Project > Analytics > Dashboards and use the visualization designer.
To create a visualization error disable your Product analytics provider while querying a product analytics dashboard.
Related to #442752 (closed)