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

[ObxUx][Infra] Alerts section: show alerts count and close the section if there are no alerts #175989

Closed
jennypavlova opened this issue Jan 31, 2024 · 0 comments · Fixed by #175716
Assignees
Labels
Feature:Metrics UI Metrics UI feature Feature:ObsHosts Hosts feature within Observability Team:obs-ux-infra_services Observability Infrastructure & Services User Experience Team

Comments

@jennypavlova
Copy link
Member

jennypavlova commented Jan 31, 2024

Follow up: #175558

Summary

In this issue, we should Investigate a way to get the alerts to count from the alerts widget and show it in the alerts section (some ideas around onLoaded returning the alerts count information).
The idea is to show a message (f.e. No active alerts found) in case there are no active alerts and close the alerts section by default. If there are active alerts we should show the alerts section in an open state:

  • No active alerts (default state):
    Image
  • Active alerts (default state):
    Image

Technical details

Currently, inside the AlertSummaryWidget we don't have a way to get the alerts count (We can get them using the useAlertsCount hook but then we will make another HTTP request which we are trying to avoid) Part of the investigation here will include getting the alerts count from the widget and use it in the alerts section (Check if onLoaded can provide it as suggested).

More background details in the discussion and this draft PR's commit
The flow:

Screen.Recording.2024-01-31.at.17.56.19.mov

1 - Open the flyout
2 - The alert widget starts to load - the alerts section is open at this point.
3 - When the widget finishes loading, we will have a callback for the onLoaded that will control the open/closed state based on the counter.
4 - Collapse or keep the section expanded

❓ For the closed section when there are alerts we can still show how many alerts are available in addition to getting closer to the idea in the epic

Investigate whether the AlertSummaryWidget can provide the counter information via an event handler after the component has loaded

AC

  • When the user opens the hosts details (flyout page):
    • Host with no active alerts: the alerts section should be closed by default showing a message (f.e. No active alerts found)
    • Host with active alerts: the alerts section should be open by default (showing section content)
      • An addition can be to show the active alerts count when the section is closed (next to the title)
@botelastic botelastic bot added the needs-team Issues missing a team label label Jan 31, 2024
@jennypavlova jennypavlova added Feature:Metrics UI Metrics UI feature Team:obs-ux-infra_services Observability Infrastructure & Services User Experience Team and removed needs-team Issues missing a team label labels Jan 31, 2024
@jennypavlova jennypavlova self-assigned this Feb 1, 2024
@crespocarlos crespocarlos added the Feature:ObsHosts Hosts feature within Observability label Feb 8, 2024
jennypavlova added a commit that referenced this issue Feb 9, 2024
Closes #175989

## Summary

This PR is a follow-up to
#175558. It adds the active
alerts count next to the alert section title (this will happen after the
alerts widget is loaded) following the rules:

Default behaviour
No alerts at all ==> Collapse and say 'No active alerts'
No active alerts ==> Collapse and say 'No active alerts'
Active alerts ==> Expand fully

Collapsed
No alerts at all ==> Say 'No active alerts'
No active alerts ==> Say 'No active alerts'
Active alerts ==> say "X active alerts"


It adds a change in the `AlertSummaryWidget` to make it possible to get
the alerts count after the widget is loaded using a new prop.

This PR also changes the alerts tab active alert count badge color on
the hosts view to keep it consistent:

| Before | After |
| ------ | ------ |
| <img width="242" alt="image"
src="https://github.com/elastic/kibana/assets/14139027/85beec43-6522-4d58-a808-d3f7ec3e0759">
| <img width="263" alt="image"
src="https://github.com/elastic/kibana/assets/14139027/43983493-3270-471a-8788-40ce38bed334">
|

## Testing
- Open hosts view and select a host with active alerts (flyout or full
page)
   - The alerts section should be expanded showing the alerts widget
<img width="1920" alt="image"
src="https://github.com/elastic/kibana/assets/14139027/f851c914-96cf-475f-bab3-dddc485405ec">fd1a21035a5f)
   - Collapse the alerts section by clicking on the title or the button:
<img width="1917" alt="image"
src="https://github.com/elastic/kibana/assets/14139027/e23e09ed-a781-4961-b592-6f13f539c316">
- Open hosts view and select a host without active alerts (flyout or
full page)
- The alerts section should be collapsed showing the message 'No active
alerts'

![Image](https://github.com/elastic/obs-infraobs-team/assets/14139027/7077d3b3-c020-4be5-a3da-b46dda0d3ae0)


https://github.com/elastic/kibana/assets/14139027/4058ed69-95f5-4b4c-8925-6680ac3791c1
CoenWarmer pushed a commit to CoenWarmer/kibana that referenced this issue Feb 15, 2024
…175716)

Closes elastic#175989

## Summary

This PR is a follow-up to
elastic#175558. It adds the active
alerts count next to the alert section title (this will happen after the
alerts widget is loaded) following the rules:

Default behaviour
No alerts at all ==> Collapse and say 'No active alerts'
No active alerts ==> Collapse and say 'No active alerts'
Active alerts ==> Expand fully

Collapsed
No alerts at all ==> Say 'No active alerts'
No active alerts ==> Say 'No active alerts'
Active alerts ==> say "X active alerts"


It adds a change in the `AlertSummaryWidget` to make it possible to get
the alerts count after the widget is loaded using a new prop.

This PR also changes the alerts tab active alert count badge color on
the hosts view to keep it consistent:

| Before | After |
| ------ | ------ |
| <img width="242" alt="image"
src="https://github.com/elastic/kibana/assets/14139027/85beec43-6522-4d58-a808-d3f7ec3e0759">
| <img width="263" alt="image"
src="https://github.com/elastic/kibana/assets/14139027/43983493-3270-471a-8788-40ce38bed334">
|

## Testing
- Open hosts view and select a host with active alerts (flyout or full
page)
   - The alerts section should be expanded showing the alerts widget
<img width="1920" alt="image"
src="https://github.com/elastic/kibana/assets/14139027/f851c914-96cf-475f-bab3-dddc485405ec">fd1a21035a5f)
   - Collapse the alerts section by clicking on the title or the button:
<img width="1917" alt="image"
src="https://github.com/elastic/kibana/assets/14139027/e23e09ed-a781-4961-b592-6f13f539c316">
- Open hosts view and select a host without active alerts (flyout or
full page)
- The alerts section should be collapsed showing the message 'No active
alerts'

![Image](https://github.com/elastic/obs-infraobs-team/assets/14139027/7077d3b3-c020-4be5-a3da-b46dda0d3ae0)


https://github.com/elastic/kibana/assets/14139027/4058ed69-95f5-4b4c-8925-6680ac3791c1
CoenWarmer pushed a commit to CoenWarmer/kibana that referenced this issue Feb 15, 2024
…175716)

Closes elastic#175989

## Summary

This PR is a follow-up to
elastic#175558. It adds the active
alerts count next to the alert section title (this will happen after the
alerts widget is loaded) following the rules:

Default behaviour
No alerts at all ==> Collapse and say 'No active alerts'
No active alerts ==> Collapse and say 'No active alerts'
Active alerts ==> Expand fully

Collapsed
No alerts at all ==> Say 'No active alerts'
No active alerts ==> Say 'No active alerts'
Active alerts ==> say "X active alerts"


It adds a change in the `AlertSummaryWidget` to make it possible to get
the alerts count after the widget is loaded using a new prop.

This PR also changes the alerts tab active alert count badge color on
the hosts view to keep it consistent:

| Before | After |
| ------ | ------ |
| <img width="242" alt="image"
src="https://github.com/elastic/kibana/assets/14139027/85beec43-6522-4d58-a808-d3f7ec3e0759">
| <img width="263" alt="image"
src="https://github.com/elastic/kibana/assets/14139027/43983493-3270-471a-8788-40ce38bed334">
|

## Testing
- Open hosts view and select a host with active alerts (flyout or full
page)
   - The alerts section should be expanded showing the alerts widget
<img width="1920" alt="image"
src="https://github.com/elastic/kibana/assets/14139027/f851c914-96cf-475f-bab3-dddc485405ec">fd1a21035a5f)
   - Collapse the alerts section by clicking on the title or the button:
<img width="1917" alt="image"
src="https://github.com/elastic/kibana/assets/14139027/e23e09ed-a781-4961-b592-6f13f539c316">
- Open hosts view and select a host without active alerts (flyout or
full page)
- The alerts section should be collapsed showing the message 'No active
alerts'

![Image](https://github.com/elastic/obs-infraobs-team/assets/14139027/7077d3b3-c020-4be5-a3da-b46dda0d3ae0)


https://github.com/elastic/kibana/assets/14139027/4058ed69-95f5-4b4c-8925-6680ac3791c1
fkanout pushed a commit to fkanout/kibana that referenced this issue Mar 4, 2024
…175716)

Closes elastic#175989

## Summary

This PR is a follow-up to
elastic#175558. It adds the active
alerts count next to the alert section title (this will happen after the
alerts widget is loaded) following the rules:

Default behaviour
No alerts at all ==> Collapse and say 'No active alerts'
No active alerts ==> Collapse and say 'No active alerts'
Active alerts ==> Expand fully

Collapsed
No alerts at all ==> Say 'No active alerts'
No active alerts ==> Say 'No active alerts'
Active alerts ==> say "X active alerts"


It adds a change in the `AlertSummaryWidget` to make it possible to get
the alerts count after the widget is loaded using a new prop.

This PR also changes the alerts tab active alert count badge color on
the hosts view to keep it consistent:

| Before | After |
| ------ | ------ |
| <img width="242" alt="image"
src="https://github.com/elastic/kibana/assets/14139027/85beec43-6522-4d58-a808-d3f7ec3e0759">
| <img width="263" alt="image"
src="https://github.com/elastic/kibana/assets/14139027/43983493-3270-471a-8788-40ce38bed334">
|

## Testing
- Open hosts view and select a host with active alerts (flyout or full
page)
   - The alerts section should be expanded showing the alerts widget
<img width="1920" alt="image"
src="https://github.com/elastic/kibana/assets/14139027/f851c914-96cf-475f-bab3-dddc485405ec">fd1a21035a5f)
   - Collapse the alerts section by clicking on the title or the button:
<img width="1917" alt="image"
src="https://github.com/elastic/kibana/assets/14139027/e23e09ed-a781-4961-b592-6f13f539c316">
- Open hosts view and select a host without active alerts (flyout or
full page)
- The alerts section should be collapsed showing the message 'No active
alerts'

![Image](https://github.com/elastic/obs-infraobs-team/assets/14139027/7077d3b3-c020-4be5-a3da-b46dda0d3ae0)


https://github.com/elastic/kibana/assets/14139027/4058ed69-95f5-4b4c-8925-6680ac3791c1
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Feature:Metrics UI Metrics UI feature Feature:ObsHosts Hosts feature within Observability Team:obs-ux-infra_services Observability Infrastructure & Services User Experience Team
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants