[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.default
object is locked and cannot be updated. -
dashboard.default
is 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
dashboard
inanalytics_dashboard.vue
toinitialDashboard
. This will become the original / immutable copy and remove any instances of code handlingdashboard.default
. - Update
customizable_dashboard.vue
to make itsdashboard
a 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
getDashboardConfig
that takes in a hydrated dashboard object and returns a dehydrated* dashboard configuration that will pass the schema. - Update the code view in
customizable_dashboard.vue
to show the computed result ofgetDashboardConfig(dashboard)
. - Update
saveEdit
incustomizable_dashboard.vue
to emit thedashboard
. - Update
saveDashboard
inanalytics_dashboard.vue
to 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
initialDashboard
to update. That way new changes can be tracked again.
- Note: Updating the cache will trigger
- Update
dashboard_api.js
to 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.