[Dashboard designer] Save dehydrated dashboard object to the correct location
Problem to solve
Currently the dashboard_api.js saves dashboards to .gitlab/analytics/dashboards/ using the commit API. This is no longer the correct location and it should be .gitlab/analytics/dashboards/[DASHBOARD]/[DASHBOARD].yaml as is documented.
Currently the backend returns a hydrated dashboard configurations which includes visualization configurations. We only want to save the dehydrated configuration, thus we need Include original visualization reference in ana... (#413791 - closed) before this can be implemented. The switchover to GraphQL has introduced several issues with the current analytics_dashboard.vue implementation that we need to solve (in no particular order):
-
dashboard.defaultobject is locked and cannot be updated. -
dashboard.defaultis fully hydrated and thus cannot be used to save to the dashboard configuration file.
Proposed solution
Update the dashboard designer to save dashboards to the correct location. All jitsu compatible code can be removed or ignored.
Alternatively save dashboards using a new GraphQL resource that's managed by the backend. This could also be a follow-up for later.
Implementation plan
frontend
- Rename the
dashboardinanalytics_dashboard.vuetoinitialDashboard. This will become the original / immutable copy and remove any instances of code handlingdashboard.default. - Update
customizable_dashboard.vueto make itsdashboarda mutable deep clone of theinitialDashboard.- Note: We can use then compare these two objects to track changes in the future.
- Add a new utility method
getDashboardConfigthat takes in a hydrated dashboard object and returns a dehydrated* dashboard configuration that will pass the schema. - Update the code view in
customizable_dashboard.vueto show the computed result ofgetDashboardConfig(dashboard). - Update
saveEditincustomizable_dashboard.vueto emit thedashboard. - Update
saveDashboardinanalytics_dashboard.vueto savegetDashboardConfig(dashboard)and update the local apollo cache with the new hydrated dashboard object if the configuration was successfully saved.- Note: Updating the cache will trigger
initialDashboardto update. That way new changes can be tracked again.
- Note: Updating the cache will trigger
- Update
dashboard_api.jsto save dashboards to.gitlab/analytics/dashboards/[SLUG]/[SLUG].yaml - Update all specs
* Dehydrated meaning that panel.visualization object should be replaced with the panel.visualization.slug string.