<!-- triage-serverless v3 PLEASE DO NOT REMOVE THIS SECTION --> *This page may contain information related to upcoming products, features and functionality. It is important to note that the information presented is for informational purposes only, so please do not rely on the information for purchasing or planning purposes. Just like with all projects, the items mentioned on the page are subject to change or delay, and the development, release, and timing of any products, features, or functionality remain at the sole discretion of GitLab Inc.* <!-- triage-serverless v3 PLEASE DO NOT REMOVE THIS SECTION --> ### Problem to solve Users should be able to add new panels easily to the their dashboard, as a way to support them in creating it we will create a live preview of the chart that as the user defines its properties. #### Feature Flag **Note:** :exclamation: This feature is being developed behind FF: `metrics_dashboard_new_panel_page`. ```sh $ rails c > Feature.enable(:metrics_dashboard_new_panel_page) ``` ### Intended users * [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) ### Proposal The first step of the new flow to add a metric to a dashboard is the chart type builder. Here, the user will be able to start a new panel "from scratch" and visualize it. #### Proof of concept https://gitlab.com/gitlab-org/gitlab/-/merge_requests/35727 ### Designs (based on the [design issue](https://gitlab.com/gitlab-org/gitlab/-/issues/212309)) #### MVC1: Preview, copy and paste panel YAML As an MVC the user will be able to preview panel YAML and copy and paste it to the dashboard file. It takes us a good step closer to a proper panel builder by slightly building upon @mrincon's work. I'm just proposing to add some more guiding text, links to the docs and repo, and change the layout slightly. - Clicking on the "Add panel" button in Metrics menu opens the "Add panel" page. Page has a "Back" button that takes you back to Metrics. - From there one can fill out the panel YAML and preview the panel. - We provide a link to panels definition documentation. - One can preview the panel to make sure it's set up as desired and then copy and paste the YAML into a dashboard file by going to their repository from the Add panel page. - The Step 2 area also links to the dashboard YAML definition docs. :arrow_right: [MVC proposal on Figma](https://www.figma.com/file/UMqlZKPqMSrqVLHyoInDaN/Add-Metric-Experience?node-id=336%3A3511) :arrow_left: | | | ------ | | | ### 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 This feature will require 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 If this feature requires changing permissions, this document https://docs.gitlab.com/ee/user/permissions.html must be updated accordingly. --> ### Availability & Testing <!-- This section needs to be retained and filled in during the workflow planning breakdown phase of this feature proposal, if not earlier. What risks does this change pose to our availability? How might it affect the quality of the product? What additional test coverage or changes to tests will be needed? Will it require cross-browser testing? Please list the test areas (unit, integration and end-to-end) that needs to be added or updated to ensure that this feature will work as intended. Please use the list below as guidance. * Unit test changes * Integration test changes * End-to-end test change See the test engineering planning process and reach out to your counterpart Software Engineer in Test for assistance: https://about.gitlab.com/handbook/engineering/quality/test-engineering/#test-planning --> ### 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. --> ### What is the type of buyer? <!-- Which leads to: in which enterprise tier should this feature go? See https://about.gitlab.com/handbook/product/pricing/#four-tiers --> ### Is this a cross-stage feature? <!-- Communicate if this change will affect multiple Stage Groups or product areas. We recommend always start with the assumption that a feature request will have an impact into another Group. Loop in the most relevant PM and Product Designer from that Group to provide strategic support to help align the Group's broader plan and vision, as well as to avoid UX and technical debt. https://about.gitlab.com/handbook/product/#cross-stage-features --> ### Links / references ### Permissions and Security ### Documentation ### Availability & Testing ### What does success look like, and how can we measure that? ### What is the type of buyer? ### Links / references