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.

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

[ML] Single metric viewer embeddable - UX improvements #182042

Open
6 tasks
Tracked by #178375
andreadelrio opened this issue Apr 29, 2024 · 1 comment
Open
6 tasks
Tracked by #178375

[ML] Single metric viewer embeddable - UX improvements #182042

andreadelrio opened this issue Apr 29, 2024 · 1 comment
Assignees
Labels
Feature:Anomaly Detection ML anomaly detection :ml Team:ML Team label for ML (also use :ml) v8.15.0

Comments

@andreadelrio
Copy link
Contributor

The following is a design review for the Single metric viewer embeddable in Dashboard. Related to #180544.

Note

This review does not go in depth into the job creation flow as defined by the ML team.

a) As detailed in the Best practices for teams adding new panels to Dashboards, ideally users wouldn't have to leave the dashboard application to create an embeddable. There are limitations that prevent us from doing that in this case. Given that, here's how we could improve the current flyout for the No jobs exists scenario:

Flyout

Tasks

b) The use of a radio button to select table rows seems like an anti-pattern and it is particularly odd when there's only one job available. Same goes for the use of a dismissable EuiBadge to display the selection and allow users to remove it.
Screenshot 2024-04-29 at 11 22 1. Suggestions:

Tasks

Screen Recording 2024-04-29 at 2 58 02 PM

c) Unlike our other panels, the chart from this embeddable has a hardcoded static height i.e. if you make the chart really tall on the Dashboard, there's just blank space underneath. If the height of the panel is too small it just cuts off pieces of the chart.
image

Tasks

@andreadelrio andreadelrio added the Team:ML Team label for ML (also use :ml) label Apr 29, 2024
@elasticmachine
Copy link
Contributor

Pinging @elastic/ml-ui (:ml)

@peteharverson peteharverson added the Feature:Anomaly Detection ML anomaly detection label Apr 30, 2024
alvarezmelissa87 added a commit that referenced this issue May 14, 2024
…o flyout (#182756)

## Summary

Part of #182042
This PR also fixes the issue in the swimlane embeddable that fails to
close the flyout if navigating into the main dashboards page.

Related meta issue: #181272
Item: `#181272


<img width="1293" alt="image"
src="https://github.com/elastic/kibana/assets/6446462/c003f620-1f06-4716-b001-5a186fd1b7c6">


### Checklist

Delete any items that are not applicable to this PR.

- [ ] Any text added follows [EUI's writing
guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses
sentence case text and includes [i18n
support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md)
- [ ]
[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)
was added for features that require explanation or tutorials
- [ ] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios
- [ ] [Flaky Test
Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was
used on any tests changed
- [ ] Any UI touched in this PR is usable by keyboard only (learn more
about [keyboard accessibility](https://webaim.org/techniques/keyboard/))
- [ ] Any UI touched in this PR does not create any new axe failures
(run axe in browser:
[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),
[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))
- [ ] If a plugin configuration key changed, check if it needs to be
allowlisted in the cloud and added to the [docker
list](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker)
- [ ] This renders correctly on smaller devices using a responsive
layout. (You can test this [in your
browser](https://www.browserstack.com/guide/responsive-testing-on-local-server))
- [ ] This was checked for [cross-browser
compatibility](https://www.elastic.co/support/matrix#matrix_browsers)

---------

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Feature:Anomaly Detection ML anomaly detection :ml Team:ML Team label for ML (also use :ml) v8.15.0
Projects
None yet
Development

No branches or pull requests

4 participants