Skip to content

[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):

  1. dashboard.default object is locked and cannot be updated.
  2. 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 3️⃣

  1. Rename the dashboard in analytics_dashboard.vue to initialDashboard. This will become the original / immutable copy and remove any instances of code handling dashboard.default.
  2. Update customizable_dashboard.vue to make its dashboard a mutable deep clone of the initialDashboard.
    • Note: We can use then compare these two objects to track changes in the future.
  3. Add a new utility method getDashboardConfig that takes in a hydrated dashboard object and returns a dehydrated* dashboard configuration that will pass the schema.
  4. Update the code view in customizable_dashboard.vue to show the computed result of getDashboardConfig(dashboard).
  5. Update saveEdit in customizable_dashboard.vue to emit the dashboard.
  6. Update saveDashboard in analytics_dashboard.vue to save getDashboardConfig(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.
  7. Update dashboard_api.js to save dashboards to .gitlab/analytics/dashboards/[SLUG]/[SLUG].yaml
  8. Update all specs

* Dehydrated meaning that panel.visualization object should be replaced with the panel.visualization.slug string.

Edited by Jiaan Louw