[Synthetics] Dashboard embeddables design review

andreadelrio commented 2 months ago

The following is a design review for the panels Synthetics Stats Overview and Synthetics Monitors available in Dashboards.

[!IMPORTANT]
We now have a document outlining the UX guidelines for adding new panels to Dashboard. Please bookmark it and reference it whenever adding new embeddables to dashboard and let us know if you have any questions. Also please provide any feedback you might have, it is a work in progress and we are open to feedback from other teams.

[!TIP] Please reach out to the Presentation Team for a design review before merging new panels.

Creation - Add panel flyout

Even though a section already exists for Observability under the Add panel flyout, a new section Synthetics was created. This breaks the information architecture of the Add panel flyout. Please always reach out to the Presentation Team to discuss where to place new items in the Add panel flyout. Suggestion: Move the panels to the existing Observability section in the Add panel flyout.

Creation - Create new panel type flyout

[ ] Include a border in the header (<EuiFlyoutHeader hasBorder>)
[ ] The text in the header should be in this format Create {panel type name} and Edit {panel type name}

Panels

When considering the design of the panels, it appears that minimal attention was given to ensuring a polished look within Dashboards. It seems as though an observability panel was directly placed inside a Dashboard panel, resulting in duplicated borders and titles. This falls short of the UI standards we uphold for Dashboards.
[ ] Ensure the panel content doesn't get cutoff in any scenario including no results, no monitors, etc.
[ ] Remove the duplicated border
[ ] Remove the duplicated title, only leave the dashboard panel title which the user can edit. By default you can provide a generic title.
[ ] Could the empty state shown above (i.e. No Monitors) be avoided by using validation in the creation form? So the user can't create the panel if there are no monitors.

Related to #160597, #188807

cc @teresaalvarezsoler @timductive

elasticmachine commented 2 months ago

Pinging @elastic/obs-ux-management-team (Team:obs-ux-management)

jasonrhodes commented 3 weeks ago

@shahzad31 you mentioned the attached PR fixes "part of" this issue, what else still needs to be done? The goal is to get this issue out of "In Progress" on our board. Thanks!

shahzad31 commented 3 weeks ago

@jasonrhodes i will do a follow up PR to handle that hopefully early next week.

elastic / kibana