Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Synthetics] Dashboard embeddables design review #190853

Closed
6 tasks
andreadelrio opened this issue Aug 20, 2024 · 3 comments · Fixed by #197188
Closed
6 tasks

[Synthetics] Dashboard embeddables design review #190853

andreadelrio opened this issue Aug 20, 2024 · 3 comments · Fixed by #197188
Assignees
@shahzad31
Labels
bug Fixes for quality problems that affect the customer experience enhancement New value added to drive a business result Team:obs-ux-management Observability Management User Experience Team

Comments

@andreadelrio
Copy link
Contributor

andreadelrio commented Aug 20, 2024 •
edited
Loading

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.
Frame 5

Creation - Create new panel type flyout

Frame 8
  • 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.
Frame 1321315073 Frame 7
  • 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
@andreadelrio andreadelrio added bug Fixes for quality problems that affect the customer experience enhancement New value added to drive a business result labels Aug 20, 2024
@botelastic botelastic bot added the needs-team Issues missing a team label label Aug 20, 2024
@andreadelrio andreadelrio added the Team:obs-ux-management Observability Management User Experience Team label Aug 20, 2024
@elasticmachine
Copy link
Contributor

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

@botelastic botelastic bot removed the needs-team Issues missing a team label label Aug 20, 2024
@shahzad31 shahzad31 assigned shahzad31 and unassigned shahzad31 Aug 27, 2024
@shahzad31 shahzad31 mentioned this issue Sep 4, 2024
Merged
shahzad31 added a commit that referenced this issue Sep 5, 2024
@shahzad31
[Dashboard] Fix add panels order of items !! (#192082)
fabe07d 
## Summary

Fixes part of #190853 !!

Combines synthetics and SLO embeddables under common observability group
!!

### After
<img width="1728" alt="image"
src="https://github.com/user-attachments/assets/5cc629c5-de10-4304-ad6e-da114a7927b6">

### Before
<img width="1716" alt="image"
src="https://github.com/user-attachments/assets/9ed35068-46fd-4e50-80f7-de67529f8c79">
@jasonrhodes
Copy link
Member

@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
Copy link
Contributor

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

@shahzad31 shahzad31 mentioned this issue Oct 22, 2024
Merged
shahzad31 added a commit that referenced this issue Oct 23, 2024
@shahzad31 @kdelemme
[Synthetics] Fixes embedded components styles !! (#197188)
d6465c7 
## Summary

Fixes #190853

Fixes embedded components styles !!

Hide multiple titles 

### After

<img width="1728" alt="image"
src="https://github.com/user-attachments/assets/dbb5ab2e-1649-4eba-a43f-3ee1e679544a">

### Before
<img width="1251" alt="image"
src="https://github.com/user-attachments/assets/22561ca8-a145-4aa7-83e4-fe37b74e4412">

---------

Co-authored-by: Kevin Delemme <kdelemme@gmail.com>
kibanamachine pushed a commit to kibanamachine/kibana that referenced this issue Oct 23, 2024
@shahzad31
[Synthetics] Fixes embedded components styles !! (elastic#197188)
1c1fad3 
## Summary

Fixes elastic#190853

Fixes embedded components styles !!

Hide multiple titles

### After

<img width="1728" alt="image"
src="https://github.com/user-attachments/assets/dbb5ab2e-1649-4eba-a43f-3ee1e679544a">

### Before
<img width="1251" alt="image"
src="https://github.com/user-attachments/assets/22561ca8-a145-4aa7-83e4-fe37b74e4412">

---------

Co-authored-by: Kevin Delemme <kdelemme@gmail.com>
(cherry picked from commit d6465c7)
shahzad31 added a commit to shahzad31/kibana that referenced this issue Oct 30, 2024
@shahzad31
[Synthetics] Fixes embedded components styles !! (elastic#197188)
63f60e0 
## Summary

Fixes elastic#190853

Fixes embedded components styles !!

Hide multiple titles

### After

<img width="1728" alt="image"
src="https://github.com/user-attachments/assets/dbb5ab2e-1649-4eba-a43f-3ee1e679544a">

### Before
<img width="1251" alt="image"
src="https://github.com/user-attachments/assets/22561ca8-a145-4aa7-83e4-fe37b74e4412">

---------

Co-authored-by: Kevin Delemme <kdelemme@gmail.com>
(cherry picked from commit d6465c7)
shahzad31 added a commit that referenced this issue Oct 30, 2024
@shahzad31
[8.16] [Synthetics] Fixes embedded components styles !! (#197188) (#1…
623c445 
…98286)

# Backport

This will backport the following commits from `main` to `8.16`:
- [[Synthetics] Fixes embedded components styles !!
(#197188)](#197188)

<!--- Backport version: 8.9.8 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT
[{"author":{"name":"Shahzad","email":"shahzad31comp@gmail.com"},"sourceCommit":{"committedDate":"2024-10-23T16:34:53Z","message":"[Synthetics]
Fixes embedded components styles !! (#197188)\n\n## Summary\r\n\r\nFixes
https://github.com/elastic/kibana/issues/190853\r\n\r\nFixes embedded
components styles !!\r\n\r\nHide multiple titles \r\n\r\n###
After\r\n\r\n<img width=\"1728\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/dbb5ab2e-1649-4eba-a43f-3ee1e679544a\">\r\n\r\n###
Before\r\n<img width=\"1251\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/22561ca8-a145-4aa7-83e4-fe37b74e4412\">\r\n\r\n---------\r\n\r\nCo-authored-by:
Kevin Delemme
<kdelemme@gmail.com>","sha":"d6465c749a554b485d390df4ae8f9628f4aa3661","branchLabelMapping":{"^v9.0.0$":"main","^v8.17.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","v9.0.0","backport:prev-minor","ci:project-deploy-observability","Team:obs-ux-management","v8.16.0","v8.17.0"],"number":197188,"url":"https://github.com/elastic/kibana/pull/197188","mergeCommit":{"message":"[Synthetics]
Fixes embedded components styles !! (#197188)\n\n## Summary\r\n\r\nFixes
https://github.com/elastic/kibana/issues/190853\r\n\r\nFixes embedded
components styles !!\r\n\r\nHide multiple titles \r\n\r\n###
After\r\n\r\n<img width=\"1728\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/dbb5ab2e-1649-4eba-a43f-3ee1e679544a\">\r\n\r\n###
Before\r\n<img width=\"1251\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/22561ca8-a145-4aa7-83e4-fe37b74e4412\">\r\n\r\n---------\r\n\r\nCo-authored-by:
Kevin Delemme
<kdelemme@gmail.com>","sha":"d6465c749a554b485d390df4ae8f9628f4aa3661"}},"sourceBranch":"main","suggestedTargetBranches":["8.16"],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","labelRegex":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/197188","number":197188,"mergeCommit":{"message":"[Synthetics]
Fixes embedded components styles !! (#197188)\n\n## Summary\r\n\r\nFixes
https://github.com/elastic/kibana/issues/190853\r\n\r\nFixes embedded
components styles !!\r\n\r\nHide multiple titles \r\n\r\n###
After\r\n\r\n<img width=\"1728\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/dbb5ab2e-1649-4eba-a43f-3ee1e679544a\">\r\n\r\n###
Before\r\n<img width=\"1251\"
alt=\"image\"\r\nsrc=\"https://github.com/user-attachments/assets/22561ca8-a145-4aa7-83e4-fe37b74e4412\">\r\n\r\n---------\r\n\r\nCo-authored-by:
Kevin Delemme
<kdelemme@gmail.com>","sha":"d6465c749a554b485d390df4ae8f9628f4aa3661"}},{"branch":"8.16","label":"v8.16.0","labelRegex":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"8.x","label":"v8.17.0","labelRegex":"^v8.17.0$","isSourceBranch":false,"url":"https://github.com/elastic/kibana/pull/197499","number":197499,"state":"MERGED","mergeCommit":{"sha":"b4142f2a9f0dc3d31abd43c3234b8d778c72b19f","message":"[8.x]
[Synthetics] Fixes embedded components styles !! (#197188)
(#197499)\n\n# Backport\n\nThis will backport the following commits from
`main` to `8.x`:\n- [[Synthetics] Fixes embedded components styles
!!\n(#197188)](https://github.com/elastic/kibana/pull/197188)\n\n<!---
Backport version: 9.4.3 -->\n\n### Questions ?\nPlease refer to the
[Backport
tool\ndocumentation](https://github.com/sqren/backport)\n\n<!--BACKPORT\n[{\"author\":{\"name\":\"Shahzad\",\"email\":\"shahzad31comp@gmail.com\"},\"sourceCommit\":{\"committedDate\":\"2024-10-23T16:34:53Z\",\"message\":\"[Synthetics]\nFixes
embedded components styles !! (#197188)\\n\\n##
Summary\\r\\n\\r\\nFixes\nhttps://github.com//issues/190853\\r\\n\\r\\nFixes
embedded\ncomponents styles !!\\r\\n\\r\\nHide multiple titles
\\r\\n\\r\\n###\nAfter\\r\\n\\r\\n<img
width=\\\"1728\\\"\nalt=\\\"image\\\"\\r\\nsrc=\\\"https://github.com/user-attachments/assets/dbb5ab2e-1649-4eba-a43f-3ee1e679544a\\\">\\r\\n\\r\\n###\nBefore\\r\\n<img
width=\\\"1251\\\"\nalt=\\\"image\\\"\\r\\nsrc=\\\"https://github.com/user-attachments/assets/22561ca8-a145-4aa7-83e4-fe37b74e4412\\\">\\r\\n\\r\\n---------\\r\\n\\r\\nCo-authored-by:\nKevin
Delemme\n<kdelemme@gmail.com>\",\"sha\":\"d6465c749a554b485d390df4ae8f9628f4aa3661\",\"branchLabelMapping\":{\"^v9.0.0$\":\"main\",\"^v8.17.0$\":\"8.x\",\"^v(\\\\d+).(\\\\d+).\\\\d+$\":\"$1.$2\"}},\"sourcePullRequest\":{\"labels\":[\"release_note:skip\",\"v9.0.0\",\"backport:prev-minor\",\"ci:project-deploy-observability\",\"Team:obs-ux-management\"],\"title\":\"[Synthetics]\nFixes
embedded components
styles\n!!\",\"number\":197188,\"url\":\"https://github.com/elastic/kibana/pull/197188\",\"mergeCommit\":{\"message\":\"[Synthetics]\nFixes
embedded components styles !! (#197188)\\n\\n##
Summary\\r\\n\\r\\nFixes\nhttps://github.com//issues/190853\\r\\n\\r\\nFixes
embedded\ncomponents styles !!\\r\\n\\r\\nHide multiple titles
\\r\\n\\r\\n###\nAfter\\r\\n\\r\\n<img
width=\\\"1728\\\"\nalt=\\\"image\\\"\\r\\nsrc=\\\"https://github.com/user-attachments/assets/dbb5ab2e-1649-4eba-a43f-3ee1e679544a\\\">\\r\\n\\r\\n###\nBefore\\r\\n<img
width=\\\"1251\\\"\nalt=\\\"image\\\"\\r\\nsrc=\\\"https://github.com/user-attachments/assets/22561ca8-a145-4aa7-83e4-fe37b74e4412\\\">\\r\\n\\r\\n---------\\r\\n\\r\\nCo-authored-by:\nKevin
Delemme\n<kdelemme@gmail.com>\",\"sha\":\"d6465c749a554b485d390df4ae8f9628f4aa3661\"}},\"sourceBranch\":\"main\",\"suggestedTargetBranches\":[],\"targetPullRequestStates\":[{\"branch\":\"main\",\"label\":\"v9.0.0\",\"branchLabelMappingKey\":\"^v9.0.0$\",\"isSourceBranch\":true,\"state\":\"MERGED\",\"url\":\"https://github.com/elastic/kibana/pull/197188\",\"number\":197188,\"mergeCommit\":{\"message\":\"[Synthetics]\nFixes
embedded components styles !! (#197188)\\n\\n##
Summary\\r\\n\\r\\nFixes\nhttps://github.com//issues/190853\\r\\n\\r\\nFixes
embedded\ncomponents styles !!\\r\\n\\r\\nHide multiple titles
\\r\\n\\r\\n###\nAfter\\r\\n\\r\\n<img
width=\\\"1728\\\"\nalt=\\\"image\\\"\\r\\nsrc=\\\"https://github.com/user-attachments/assets/dbb5ab2e-1649-4eba-a43f-3ee1e679544a\\\">\\r\\n\\r\\n###\nBefore\\r\\n<img
width=\\\"1251\\\"\nalt=\\\"image\\\"\\r\\nsrc=\\\"https://github.com/user-attachments/assets/22561ca8-a145-4aa7-83e4-fe37b74e4412\\\">\\r\\n\\r\\n---------\\r\\n\\r\\nCo-authored-by:\nKevin
Delemme\n<kdelemme@gmail.com>\",\"sha\":\"d6465c749a554b485d390df4ae8f9628f4aa3661\"}}]}]\nBACKPORT-->\n\nCo-authored-by:
Shahzad <shahzad31comp@gmail.com>"}}]}] BACKPORT-->
@Erikg346 Erikg346 mentioned this issue Oct 31, 2024
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@shahzad31 shahzad31

Labels
bug Fixes for quality problems that affect the customer experience enhancement New value added to drive a business result Team:obs-ux-management Observability Management User Experience Team
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

[Synthetics] Fixes embedded components styles !! shahzad31/kibana
4 participants
@jasonrhodes @shahzad31 @andreadelrio @elasticmachine