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] AIOps Log Rate Analysis: styling updates #156605

Open
7 of 14 tasks
alvarezmelissa87 opened this issue May 3, 2023 · 2 comments
Open
7 of 14 tasks

[ML] AIOps Log Rate Analysis: styling updates #156605

alvarezmelissa87 opened this issue May 3, 2023 · 2 comments
Assignees
Labels
Feature:ML/AIOps ML AIOps features: Change Point Detection, Log Pattern Analysis, Log Rate Analysis Meta :ml

Comments

@alvarezmelissa87
Copy link
Contributor

alvarezmelissa87 commented May 3, 2023

Part of #160247.

Log Rate Analysis styling updates meta issue

Link to figma prototype: https://www.figma.com/proto/8FDzXfrCwLTXwFdTrLxBaV/Log-Rate-Spikes?page-id=1%3A171562&node-id=16-114704&viewport=604%2C108%2C0.1&scaling=min-zoom&starting-point-node-id=16%3A114704

Link to design issue: https://github.com/elastic/design-system-team/issues/181

Current:

image

Updated

image

image

Style updates

Additions

  • Add tutorial/tour popovers
@alvarezmelissa87 alvarezmelissa87 added :ml Feature:ML/AIOps ML AIOps features: Change Point Detection, Log Pattern Analysis, Log Rate Analysis v8.9.0 labels May 3, 2023
@elasticmachine
Copy link
Contributor

Pinging @elastic/ml-ui (:ml)

@mdefazio
Copy link
Contributor

mdefazio commented May 3, 2023

Here's the animation included in EuiTour's first screen --> an animation is worth 1000 words.

Update It's now around 400kb. (And loops better now). Image size is 500x275 as it is currently.

EuiTour_movie

alvarezmelissa87 added a commit that referenced this issue May 30, 2023
…g only analysis (#158629)

## Summary

This PR exposes the `ExplainLogRateSpikesContent` shared component so
that it can be used independently of the search bar/datepicker
- The component accepts various external settings including a timerange
and query to run the analysis against.
- The `ExplainLogRateSpikesPage` component now uses the
`ExplainLogRateSpikesContent` component
- The `useData` hook has been simplified - the set up for the search
query has been extracted into a separate hook

<img width="1245" alt="image"
src="https://github.com/elastic/kibana/assets/6446462/30dec4b2-3162-4a39-b598-0dec70993fa7">

This is the first step for the Observability Alert Details Page
Integration.

Style edits:

The component now uses EUI's ResizeableContainer to allow the main
histogram to be sticky.
Also adds some style updates from
#156605


### 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
- [ ] 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)
alvarezmelissa87 added a commit that referenced this issue Jun 15, 2023
## Summary

Related issue: #156605

This PR adds some ELRS style updates:

- adds options prop to allow 'stickyHistogram' - defaults to false for
now - until page restructure work is done to allow for smooth
interaction
- Moves the 'Clear' functionality to 'Reset' button in line with the
progress controls

<img width="1273" alt="image"
src="https://github.com/elastic/kibana/assets/6446462/50bd3512-cad6-498e-b7a2-740a01151004">


### 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
- [ ] 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: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
@walterra walterra changed the title [ML] Explain Log Rate Spikes: styling updates [ML] AIOps Log Rate Analysis: styling updates Aug 9, 2023
@walterra walterra added the Meta label Aug 9, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Feature:ML/AIOps ML AIOps features: Change Point Detection, Log Pattern Analysis, Log Rate Analysis Meta :ml
Projects
None yet
Development

No branches or pull requests

5 participants