Design: Drill from one Metrics chart to another chart, dashboard, or any URL
Note - this issue was promoted into an epic
On our metrics dashboard we would like to provide the ability to drill from one chart to another chart, dashboard, or any URL.
User flow
As a user, I would like to be able to drill from my chart to another chart, dashboard, or a related third party URL.
WIP Proposal
MVC
- For discoverability, when there are links set up for the chart, we should show pointing hover cursor on hover within the chart
- Users can attach related links to their chart in the dashboard.yml file, they'll need to provide the Title and URL fields for each link.
- When no links are defined, there will be no menu upon clicking on the chart. The cursor in that case should remain in its default state instead of the hover/pointer cursor.
- Clicking on a chart will present the user with a pop-up menu with links once they have been set up.
- When at least one link is set up, we'll show the option to "manage links" which takes the user to the .yml file where the user can edit it. If possible, we should take the user the specific place in the file where they can define links for that chart.
- All links open in the same tab, with an option to right click and "open in a new tab"
- We should retain the time range currently selected on the dashboard and the environment selection when drilling into charts and dashboards
- In the MVC, we won't show links in embedded charts.
| Once the links have been defined, they show up in that menu |  |
| This is what they look like on hover |  |
2nd Iteration
- When no links are defined, the chart menu pop-up will have an option to add links. That menu option will take the user to the .yml file so they can edit it. If possible, we should take the user the specific place in the file where they can define links for the chart.
- Chart and dashboard links open in the same tab, all other links open in a new tab. There's always an option to right-click and force open the link in a new tab.
- Chart links should work in embedded charts.
- We should differentiate between chart links, dashboard links, internal GitLab links and external links. It could look something like this. Note: Icons need some more consideration.
| Empty state | Add link option |
|---|---|
| User clicks on a chart to bring out the pop-up menu |  |
| The "add.." link leads the user to the .yml file where they can set up the links |  |
| 2nd iteration links design |
|---|
 |
3rd iteration
Permission levels
Only users with developer and above permissions will be able to add links to charts. Links can be viewed with any permissions level.
Open questions
- Would the users like to see some type of affordance on the chart itself that that chart contains attached links? Would it be helpful in any way?
- Should we allow the users to reference data variables like series name, labels and values? In Grafana you can even type CMD+Space, CTRL+Space, or $ to open variable suggestions. It's a useful feature, but will our average user need this?
Out of scope
The configuration flow via UI is not a part of this MVC, users should be able to configure this through the dashboard.yml file.
Edited by 🤖 GitLab Bot 🤖