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

[Actionable Observability] Integrate the shareable alert table in the Overview Page #140024

Conversation

maryam-saeidi
Copy link
Member

@maryam-saeidi maryam-saeidi commented Sep 5, 2022

Resolves #135130

Summary

  • Integrates the shareable alert table to the overview page.

You should be able to see the new table on the overview page and the time filter should be applied to it correctly.

image

Known issue

Fullscreen has an issue that you see in the following screenshot. I will investigate it later and I might create a separate ticket for it. (I've decided to tackle it separately, ticket: #140389)

image

Checklist

@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" release_note:skip Skip the PR/issue when compiling release notes labels Sep 5, 2022
@maryam-saeidi maryam-saeidi force-pushed the 135130-shared-alert-table-overview-page-integration branch from baf3e1e to ab66810 Compare September 5, 2022 14:10
@maryam-saeidi maryam-saeidi marked this pull request as ready for review September 8, 2022 14:58
@maryam-saeidi maryam-saeidi requested review from a team as code owners September 8, 2022 14:58
@elasticmachine
Copy link
Contributor

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

Comment on lines +31 to +43
describe('Without alerts', function () {
it('navigate and open alerts section', async () => {
await observability.overview.common.navigateToOverviewPage();
await PageObjects.header.waitUntilLoadingHasFinished();
await observability.overview.common.openAlertsSectionAndWaitToAppear();
});

it('should show no data message', async () => {
await retry.try(async () => {
await observability.overview.common.getAlertsTableNoDataOrFail();
});
});
});
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If I understand correctly, the first test case navigates to the overview page and asserts the alerts section opens, while the second test case asserts on no data in the alerts table.

But the second test case does not seem to navigate to the overview page.

I might not understand totally how the functional tests are setup, but I think tests should not depend on a state set by another test.
I think the order of execution is not guaranteed, and therefore the 2nd test might run before the first one. And even if the order of execution is guaranteed, if someone adds a new test in between, it might make the next test fail.

I suggest to write the tests as they were alone with all their necessary setup, e.g. navigating to the overview page, waiting for the headers, etc...
In this case we could also just merge the two test cases into one? What do you think?

Also, this might explain why you had some flakiness earlier.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey Kevin,
Thanks for your comment. Indeed tests are related to each other and we cannot change order or insert a step in between without ensuring everything will work fine in the new setup.

This is the expected behavior in functional tests, functional tests are like a narrative of the user's interaction with our system and the test is set up in a way that it will not continue without first making sure previous steps are successful. As a result of this setup, we cannot run one test case in isolation and we need to run the whole test suite.

The flakiness is related to await observability.overview.common.openAlertsSectionAndWaitToAppear(); and I will test another idea to make sure it will not cause any issue in future :)

});
});

describe('With alerts', function () {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I have the same comment as above

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Answered above

Copy link
Contributor

@kdelemme kdelemme left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Overall it looks good to me! 👏🏻
I just left some comments/questions regarding the functional tests

Copy link
Contributor

@formgeist formgeist left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

UX/UI generally looks good. I did find some possible bugs and enhancements.

I found that when moving between alert pages, it will show a bunch of empty items from the previous page - then drop them. If I refresh, it comes back.

CleanShot.2022-09-09.at.13.57.45.mp4

Also opened #140387 to look at fixing the double loading states for the alerts panel.

@maryam-saeidi
Copy link
Member Author

cc @XavierM 👆🏻

Copy link
Contributor

@kdelemme kdelemme left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM!

@XavierM
Copy link
Contributor

XavierM commented Sep 9, 2022

@formgeist Thanks for finding that bug, that bother me too when I saw it. So I created an issue and PR to fix it #140440

For the double loading state, I think we should discuss more because I do not think that it is super easy to fix. The problem is the alert table is a lazy component which it is using react.lazy/suspense to be loaded. We are doing that to avoid exploding out our bundle size. So the first loading state that you see, should only happen one time when the page get loaded with the alert table component and then you should never see it again.

However I do agree, it will be nice to find a cleaner and more elegant solution.

@maryam-saeidi maryam-saeidi requested a review from a team as a code owner September 12, 2022 07:34
@formgeist
Copy link
Contributor

@formgeist Thanks for finding that bug, that bother me too when I saw it. So I created an issue and PR to fix it #140440

Great, thanks for taking a look so quickly!

For the double loading state, I think we should discuss more because I do not think that it is super easy to fix. The problem is the alert table is a lazy component which it is using react.lazy/suspense to be loaded. We are doing that to avoid exploding out our bundle size. So the first loading state that you see, should only happen one time when the page get loaded with the alert table component and then you should never see it again.
However I do agree, it will be nice to find a cleaner and more elegant solution.

OK, makes sense. Let's continue to discuss in #140387

@kibana-ci
Copy link
Collaborator

💚 Build Succeeded

Metrics [docs]

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id before after diff
observability 523.4KB 520.7KB -2.7KB

History

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

Copy link
Contributor

@afgomez afgomez left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

UO changes LGTM!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
backport:skip This commit does not require backporting chore release_note:skip Skip the PR/issue when compiling release notes Team: Actionable Observability - DEPRECATED For Observability Alerting and SLOs use "Team:obs-ux-management", for AIops "Team:obs-knowledge" v8.5.0
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Integrate the shareable alert table in the Overview Page
8 participants