Draggable dashboard canvas
### Problem to solve Currently users are unable to arrange the order of charts on the metrics dashboard. We should allow users to do so, in order to allow them to build the arrangement that most makes sense for their use cases. ### Target audience <!--- For whom are we doing this? Include a [persona](https://about.gitlab.com/handbook/marketing/product-marketing/roles-personas/) listed below, if applicable, along with its [label](https://gitlab.com/groups/gitlab-org/-/labels?utf8=%E2%9C%93&subscribed=&search=persona%3A), or define a specific company role, e.g. "Release Manager". Existing personas are: (copy relevant personas out of this comment, and delete any persona that does not apply) - Parker, Product Manager, https://about.gitlab.com/handbook/marketing/product-marketing/roles-personas#parker-product-manager - Delaney, Development Team Lead, https://about.gitlab.com/handbook/marketing/product-marketing/roles-personas#delaney-development-team-lead - Sasha, Software Developer, https://about.gitlab.com/handbook/marketing/product-marketing/roles-personas#sasha-software-developer - Devon, DevOps Engineer, https://about.gitlab.com/handbook/marketing/product-marketing/roles-personas#devon-devops-engineer - Sidney, Systems Administrator, https://about.gitlab.com/handbook/marketing/product-marketing/roles-personas#sidney-systems-administrator - Sam, Security Analyst, https://about.gitlab.com/handbook/marketing/product-marketing/roles-personas#sam-security-analyst --> ### Further details <!-- Include use cases, benefits, and/or goals (contributes to our vision?) --> ### Proposal Allow end users to drag charts around the dashboard to re-arrange them, then save the changes back so that is the default order. ### Design By adding an 'arrange charts' button to the filter bar on the metrics page, we can allow users to re-arrange their charts. This edit mode would be based on an [existing vue drag/drop component](https://jbaysolutions.github.io/vue-grid-layout/examples/06-responsive.html): ![ce_58435-draggable-dashboard-canvas-v4](/uploads/8e7986235a0a7d9a1df7614bfd3e072f/ce_58435-draggable-dashboard-canvas-v4.png) To access functionality beyond just dragging and dropping, we would probably need to create a separate 'edit dashboard flow.' Adding this functionality should probably be part of a separate issue. The latest design, for reference: ![ce_58435-draggable-dashboard-edit-dashboard-flow-v5](/uploads/7b4ca132647e7192856779c0cf46946d/ce_58435-draggable-dashboard-edit-dashboard-flow-v5.png) ### Permissions and Security <!-- What permissions are required to perform the described actions? Are they consistent with the existing permissions as documented for users, groups, and projects as appropriate? Is the proposed behavior consistent between the UI, API, and other access methods (e.g. email replies)? --> ### Documentation <!-- See the Feature Change Documentation Workflow https://docs.gitlab.com/ee/development/documentation/feature-change-workflow.html Add all known Documentation Requirements here, per https://docs.gitlab.com/ee/development/documentation/feature-change-workflow.html#documentation-requirements --> ### What does success look like, and how can we measure that? <!-- Define both the success metrics and acceptance criteria. Note that success metrics indicate the desired business outcomes, while acceptance criteria indicate when the solution is working correctly. If there is no way to measure success, link to an issue that will implement a way to measure this. --> ### Links / references
issue