Design: Improve the "Add metric" experience
Problem to solve
- 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) #39454 (closed)
- There's no way to add an alert when adding a metric
Add metric modal |
---|
Intended users
User experience goal
I want to quickly and easily add a new metric to my dashboard.
Related Issues
Issues that are addressed as part of this design exploration:
Issues that are related and need to be taken into consideration:
- The "Duplicate dashboard" commit modal experience
- Commit UI for arranging charts
- Metric dashboard terminology
Proposal
➕ "Add metric" as part of the "Add panel" flow
Based on the Metric dashboard terminology and object structure and hierarchy 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
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.
Mid-term Vision: Preview and add panel YAML
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. There are a few small changes in the design that Miguel pointed out will be necessary, like adding a dropdown for the user to choose a dashboard and a panel group, for example.
Seems like quite a bit of backend work will be required to make it happen.
Long-term Vision: Complete panel builder
The long-term vision includes allowing our users to set up everything for their panel using the UI, including metrics and alerts.
I was hoping that we could include adding alerts to a panel in the first couple iterations, for example we could surface an "Add alert" button in the chart preview page. However, seems like adding alerts to metric during the "Add panel" flow isn't as straightforward since technically the metric hasn't been created yet and now we support adding alerts to existing metrics. This will require both further technical and design exploration.
❓ Open questions
- What are the required fields in that panel code and which are optional?
- Can we prefill the input with some basic structure? How much effort will it be?
- Is there a way to validate the syntax here when user clicks "Update preview"?
- It'd be great to prefill the commit and branch names with some default text. How much effort would it be to generate those based on the panel title?
- Can user add alerts by adding them to the panel YAML? Could be a good MVC to allow users to add alerts at the same time as creating a metric panel.
- When the user commits changes we show different confirmation messages depending on whether they committed to master or a new branch. Is there some other info that's be useful to surface in those messages, like a commit number or a link to view the panel (if committed to master)?
Permissions and Security
Documentation
These changes will require Metrics docs updates.
Availability & Testing
Next Steps
-
Discuss the long-term direction and iterate on the wireframes -
Discuss the possible MVC iteration -
Solution validation for MVC -
Create follow-up issues