grafana
Re-design probe selection when creating / editing checks
What would you like to be added: To reevaluate and update the design for selecting probes when creating and editing checks. Currently the multi-select pattern doesn't help a huge amount for visibility of what is available or help group the probes in any meaningful way.
It would be ideal if we could find a way to display all of the probes simultaneously and also in a way where they are organised by region and/or cloud provider.
Why is this needed: Users may want to pick probes based on their region and/or cloud provider. At the moment they have to go back and forth to different parts of the app and documentation to gather all of that information.
Additional context Issue for the synthetic-monitoring-api to provide the cloud provider information in the probes list endpoint.
I feel I said this before, we can probably take a hint from the metrics explore interface, where the UI presents the existing labels to narrow down the search.
Selecting some labels narrows the list of displayed metrics to the ones where those labels exist.
We might to something along those lines for probes: all of them have region, and optionally they also have labels.
Tangentially related, there's an old idea about "probe groups", where the user is able to select probes based on predefined groups. Maybe an option is to be able to select probes based on labels. The problem is that the users cannot add labels to public probes, that's the reason why the idea of probe groups (which are editable by the user) exists.
https://docs.google.com/document/d/1IUeg5nwEpJU0C8M29ChE4WYU7Z5IVV1G0QgUqcECcDI/edit#heading=h.5sybau7waq2q
Hello team, I've created two proposals to test and improve the probe selection process. Please review them and share your feedback.
-
The first proposal leverages the existing select menu component, presenting probes in a list format. I’ve incorporated region-based grouping and added details like country and cloud provider. A visual indicator has been implemented to signify online status instead of text. Private groups now have their own dedicated section for easier identification. Furthermore, a promotional card for Private Sales has been added.
-
The second proposal uses checkbox groups. While it makes the UI look cluttered, it does allow users to quickly see which probes are available.
Thank you, Maja! These are really great proposals 🚀🚀🚀 I think both significantly improve the probe selection screen compared to what we have today.
At first, I was leaning toward the first option since it felt easier to use and less cluttered, as you mentioned. However, after looking again, I’m starting to think the second option might be better. I like the grouping in the dropdown for separating private and public probes by region, but showing everything at a glance in the second proposal provides a clearer view of all the available regions, which is valuable information when deciding which locations to choose IMO. Also, the dropdown could get tricky to navigate if there are a lot of private probes alongside the public ones.
In the second option, we might consider setting a limit on how many probe locations we show within each region before scrolling kicks in, to keep the list manageable and prevent the Frequency slider from being pushed too far down, but I think having all the different regions visible at once really enhances the experience.
It might also be useful to include "Add all" / "Remove all" buttons in the second option as well to help users quickly select or deselect all probes across all regions.
I’m looking forward to hearing what others think!
❤ Second one ❤
- It provides useful and important information at a glance without having any other interaction (like clicking into the select in the first one)
- It follows a common convention that we've seen in competitors' products
- I can see this potentially being a reusable component in other areas of the application if needed (less so for the first one)
Getting into some of the details of the design. I am not sure about moving the execution calculation to the top of the page. That usage calculation is affected by all of the inputs on this step, so after adding probes, adding frequency, clicking full metrics if desired. you would have to scroll back to the top to see what it comes out as.
It is worth noting that in phase 2 of the check creation flow to reduce the feedback loop we are considering bringing in a fixed right-orientated sidebar of some sort, so the usage calculation could move to there at some point in the future to remain visible at all times (if your screen is large enough...).
I don't mind frequency moving above the probe selection, which would address Vika's point above about it being a bit lost if a user had many probes and had to scroll. Frequency is probably more of a priority for people than working out which probes they want to add, too.
In regards to the private probe section being separated, it might be worth thinking how we can integrate them (but not necessarily...) Private probes can be assigned regions which match the same as public ones (it is also possible they don't have a region or the customer has added a separate region per probe so the UI might become a horrible mess if it followed the same presentation as the public probes [which would be the customer's own doing and possibly up to them to address]). It might be worth seeing if we have the data on what region input users typically use when setting up private probes?
The private probes also won't show what Country they are in, the Cloud Provider they use (as we don't know or ask and/or they are running it on their own infrastructure anyway) nor would we be able to add the 'New' badge or similar flair to them.