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

[AO] Improve loading state of metric threshold preview chart #152438

Closed
Tracked by #145117
maryam-saeidi opened this issue Mar 1, 2023 · 1 comment · Fixed by #153045
Closed
Tracked by #145117

[AO] Improve loading state of metric threshold preview chart #152438

maryam-saeidi opened this issue Mar 1, 2023 · 1 comment · Fixed by #153045
Assignees
Labels
chore Team: Actionable Observability - DEPRECATED For Observability Alerting and SLOs use "Team:obs-ux-management", for AIops "Team:obs-knowledge" v8.8.0

Comments

@maryam-saeidi
Copy link
Member

📝 Summary

At the moment, while loading the metric threshold preview chart, first we see no date, then Loading keyword, and then the chart as shown below:

Screen.Recording.2023-03-01.at.11.58.08.mov

In this ticket, we want to improve this by using a loader and not showing no data at the start.

✅ Acceptance Criteria

  • Use eui loader for preview loading state
  • Not showing no data when we first start loading data.
@maryam-saeidi maryam-saeidi added chore Team: Actionable Observability - DEPRECATED For Observability Alerting and SLOs use "Team:obs-ux-management", for AIops "Team:obs-knowledge" v8.8.0 labels Mar 1, 2023
@elasticmachine
Copy link
Contributor

Pinging @elastic/actionable-observability (Team: Actionable Observability)

@maryam-saeidi maryam-saeidi self-assigned this Mar 1, 2023
maryam-saeidi added a commit that referenced this issue Mar 22, 2023
Resolves #152438

## 📝 Summary

In this PR, I used react query to improve the loading of preview and
metric explorer charts. Also, I used the `EuiLoadingChart` instead of
showing a text.

### Before


https://user-images.githubusercontent.com/12370520/224107429-16bd6f1c-a1b7-429c-b56e-e2201f7d767c.mov


### After


https://user-images.githubusercontent.com/12370520/224107649-c8b5c9a3-d371-405d-a0eb-8c1151047437.mov


## 🧪 How to test
- Open a metric threshold/ inventory rule creation flyout and check the
preview charts
  - They should work as before
- Check the metric explorer page charts
- Adding a filter, changing the time range, or adding a group should
work as before
 


https://user-images.githubusercontent.com/12370520/224105438-0ffbd1e4-464f-4438-9894-939f5768c4f4.mov
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
chore Team: Actionable Observability - DEPRECATED For Observability Alerting and SLOs use "Team:obs-ux-management", for AIops "Team:obs-knowledge" v8.8.0
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants