<!-- The first four sections: "Problem to solve", "Intended users", "User experience goal", and "Proposal", are strongly recommended, while the rest of the sections can be filled out during the problem validation or breakdown phase. However, keep in mind that providing complete and relevant information early helps our product team validate the problem and start working on a solution. --> ### Problem to solve Currently, users can add a metric to a Default (OOTB) dashboard using Metrics UI. There are several problems with the current experience: - Our users can't visualize what the metric will look like - Can't add multiple metrics at a time - Can't choose a visualization type - Can't create a panel that's not a metric visualization - Have to type in the full query (it doesn't auto complete) https://gitlab.com/gitlab-org/gitlab/-/issues/39454 - There's no way to add an alert when adding a metric | Add metric modal | | ------ | |  | :exclamation: Finally, there's no way to add a new metric/ new panel to a custom dashboard. <!-- What problem do we solve? Try to define the who/what/why of the opportunity as a user story. For example, "As a (who), I want (what), so I can (why/value)." --> ### Intended users * [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) <!-- Who will use this feature? If known, include any of the following: types of users (e.g. Developer), personas, or specific company roles (e.g. Release Manager). It's okay to write "Unknown" and fill this field in later. Personas are described at https://about.gitlab.com/handbook/marketing/product-marketing/roles-personas/ * [Cameron (Compliance Manager)](https://about.gitlab.com/handbook/marketing/product-marketing/roles-personas/#cameron-compliance-manager) * [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) * [Presley (Product Designer)](https://about.gitlab.com/handbook/marketing/product-marketing/roles-personas/#presley-product-designer) * [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) * [Rachel (Release Manager)](https://about.gitlab.com/handbook/marketing/product-marketing/roles-personas/#rachel-release-manager) * [Alex (Security Operations Engineer)](https://about.gitlab.com/handbook/marketing/product-marketing/roles-personas/#alex-security-operations-engineer) * [Simone (Software Engineer in Test)](https://about.gitlab.com/handbook/marketing/product-marketing/roles-personas/#simone-software-engineer-in-test) * [Allison (Application Ops)](https://about.gitlab.com/handbook/marketing/product-marketing/roles-personas/#allison-application-ops) * [Priyanka (Platform Engineer)](https://about.gitlab.com/handbook/marketing/product-marketing/roles-personas/#priyanka-platform-engineer) * [Dana (Data Analyst)](https://about.gitlab.com/handbook/marketing/product-marketing/roles-personas/#dana-data-analyst) --> ### User experience goal I want to quickly and easily add a new metric to my dashboard. <!-- What is the single user experience workflow this problem addresses? For example, "The user should be able to use the UI/API/.gitlab-ci.yml with GitLab to <perform a specific task>" https://about.gitlab.com/handbook/engineering/ux/ux-research-training/user-story-mapping/ --> ## Proposal :point_up: *Since we're planning to deprecate "Add metric" in OOTB dashboards, this exploration focuses on the "Add panel" flow only in custom dashboards.* Over the long term, the goal will be to provide exactly the same experience for adding a panel to an OOTB dashboard as for a custom dashboard. #### :heavy_plus_sign: "Add metric" as part of the "Add panel" flow Based on the [Metric dashboard terminology and object structure and hierarchy](https://gitlab.com/gitlab-org/monitor/apm/-/issues/33) a panel is the main building block of the Metrics dashboard. Panels can contain different types of visualizations. Furthermore, not all panels will be visualizations of metrics. For instance, we already support markdown blocks. In the future, we may support other non-metric types panels. Panels can also contain multiple metrics, and each metric can have an alert set up. The current "Add metric" experience doesn't allow you to easily add multiple metrics or corresponding metric alerts. In order to streamline the process for adding metrics and alerts, I propose to create an `Add panel` flow where our users will be able to define all aspects of their new panel, or edit the existing panel. #### MVC: Preview, copy and paste panel YAML (released in 13.3) 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. :arrow_right: [MVC prototype on Figma](https://www.figma.com/proto/UMqlZKPqMSrqVLHyoInDaN/Add-Metric-Experience?node-id=227%3A9757&viewport=1935%2C14%2C0.10232006013393402&scaling=min-zoom) :arrow_left: | | | ------ | |  | #### Mid-term Vision: Preview and add panel YAML (awaiting further demand) :arrow_right: [Mid-term vision mock-ups on Figma](https://www.figma.com/proto/UMqlZKPqMSrqVLHyoInDaN/Add-Metric-Experience?node-id=201%3A98&viewport=420%2C496%2C0.031515564769506454&scaling=min-zoom) :arrow_left: In the next iterations we will build upon the MVC to allow the user to commit their new panel YAML into a dashboard of choice by going through our standard commit flow. #### Long-term Vision: Complete panel builder (awaiting further demand) :arrow_right: [Wireframes on Figma](https://www.figma.com/proto/UMqlZKPqMSrqVLHyoInDaN/Add-Metric-Experience?node-id=115%3A552&viewport=366%2C311%2C0.040612317621707916&scaling=min-zoom) :arrow_left: The long-term vision includes allowing our users to set up everything for their panel using the UI, including metrics and alerts. This will require both further technical and design exploration. ### Documentation These changes will require Metrics docs updates. <!-- See the Feature Change Documentation Workflow https://docs.gitlab.com/ee/development/documentation/workflow.html#for-a-product-change * Add all known Documentation Requirements in this section. See https://docs.gitlab.com/ee/development/documentation/feature-change-workflow.html#documentation-requirements * If this feature requires changing permissions, update the permissions document. See https://docs.gitlab.com/ee/user/permissions.html --> ### Next Steps - [x] Discuss the long-term direction and iterate on the wireframes - [x] Discuss the possible MVC1 iteration - [x] Solution validation for MVC1 - [x] MVC1 implementation - [x] Create follow-up issues ### Next iterations & Follow-up Issues Further iterations: * [Design: MVC2 of Add Panel to Metrics](https://gitlab.com/gitlab-org/gitlab/-/issues/228661) * [Design: Complete Panel Builder in Metrics](https://gitlab.com/gitlab-org/gitlab/-/issues/228662) Follow-up issues that came out of this design effort: * [Make Metrics dashboard actions more discoverable](https://gitlab.com/gitlab-org/gitlab/-/issues/235982) * [Make Metrics dashboard header more prominent](https://gitlab.com/gitlab-org/gitlab/-/issues/235141) * [Panel preview in "Add panel" page should update automatically](https://gitlab.com/gitlab-org/gitlab/-/issues/237889) * [Allow to create a new panel group or select no group when adding a new panel](https://gitlab.com/gitlab-org/gitlab/-/issues/237892) * [Add a link to "Edit panel" in new panel merge requests](https://gitlab.com/gitlab-org/gitlab/-/issues/237894) <!-- Include use cases, benefits, goals, or any other details that will help us understand the problem better. -->