[RAM] Add Snooze UI and Unsnooze API by Zacqary · Pull Request #128214 · elastic/kibana

Zacqary · 2022-03-21T22:09:23Z

Summary

Closes #128011

Adds the Snooze UI to the rules list. Also adds the _unsnooze API, necessary for the Cancel Snooze button.

Also handles "muting" as "snooze indefinitely":

Checklist

Delete any items that are not applicable to this PR.

Any text added follows EUI's writing guidelines, uses sentence case text and includes i18n support
Unit or functional tests 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)
Any UI touched in this PR does not create any new axe failures (run axe in browser: FF, Chrome)
This renders correctly on smaller devices using a responsive layout. (You can test this in your browser)

Zacqary · 2022-03-21T22:13:03Z

Not sure how to get the snooze end time to show up on the same line as "Snooze". EUI doesn't seem to like changing the text color in the middle of a context menu item the way it's spec'd out:

Also having trouble getting the EUIButton to be any smaller than 112px, I think there might be some hard-coded EUI minimum size going on, so I compensated by shrinking the number field.

@mdefazio does this look all right or should I keep hacking at EUI to get this to look exactly like the Figma?

mdefazio · 2022-03-22T01:09:13Z

@Zacqary This looks great. Thanks for putting this together. I'm good with having 2 lines in the context menu for snooze time. The sizing of the number input and button also is no issue.

gmmorris · 2022-03-22T11:42:04Z

@elasticmachine merge upstream

…into 128011-snooze-ui

Zacqary · 2022-03-22T17:45:20Z


 describe('snoozeAlertRoute', () => {
-  beforeAll(() => {
-    jest.useFakeTimers('modern');


So it turns out Jest fake timers doesn't actually work for mocking the output of Date or moment several imports deep. We just didn't realize this because the snooze_rule test isn't actually validating that the snooze date is in the future.

I was able to use jest.spyOn to mock Date.now() for the dropdown UI tests, but I haven't been able to find a reliable solution to mock new Date() or moment() with no arguments. We can work around this by using new Date(Date.now() or moment(Date.now()) in any code where we want to test against the current date.

I'd love to help figure out a way, but I don't know if I understand the problem. Can you elaborate more on what you're trying to do and what's not working?

There's code in the snooze API that uses Moment to determine if the snoozeEndTime is in the future:

moment().isBefore(snoozeEndTime);

And also in the new RuleStatusDropdown to determine how far in the future snoozeEndTime is:

moment(item.snoozeEndTime).fromNow(true)

We thought that using jest.useFakeTimers would enable us to change the return result of new Date() and Date.now(). For example, in this test we called jest.setSystemTime(new Date(2020, 3, 1)) to set the value of now to March 2020 (which, now that I think about it, oh god, why would anyone want to make anything permanently March 2020, oh no oh no oh no).

Turns out, this did not actually work as expected. It seems like Jest's fake timers system only applies to Date() called within the Jest tests themselves, and not to any modules that the tests import.

We didn't realize that this was broken because snooze_rule.test.ts isn't actually testing the part of the snooze API that tries to check if the snooze end time is in the future. But we thought that maybe it was.

It appears that moment.fromNow() uses Date.now() to determine the value of now, as opposed to moment([no arguments]) which uses new Date(). jest.spyOn allows us to mock the value of global.Date.now throughout all imports, but mocking global.Date requires you to mock the entire Date object and there's no easy way to just override the constructor.

So therefore, we can work around that limitation by doing something like:

moment(Date.now()).isBefore(snoozeEndTime);

in any code that we need to test.

elasticmachine · 2022-03-22T17:56:37Z

Pinging @elastic/response-ops (Team:ResponseOps)

Zacqary · 2022-03-22T21:55:52Z

@mdefazio Wanted to make sure we're expecting that selecting "Enabled" from the context menu will also cancel the snooze? Or do we only want the Cancel Snooze button to do this?

mgiota · 2022-03-22T22:33:35Z

        name: i18n.translate(
-          'xpack.triggersActionsUI.sections.rulesList.rulesListTable.columns.statusTitle',
-          { defaultMessage: 'Status' }
+          'xpack.triggersActionsUI.sections.rulesList.rulesListTable.columns.lastResponseTitle',


@Zacqary Make sure to update also the current status filter to be called Last response. I refer to this component https://github.com/elastic/kibana/blob/main/x-pack/plugins/triggers_actions_ui/public/application/sections/rules_list/components/rule_status_filter.tsx

A new Status filter needs to be created as well, but I would start with renaming current one to last response.

jportner

Platform security privilege changes look fine, though I have a couple of concerns below.

jportner · 2022-03-22T22:41:10Z

+  private async unsnoozeWithOCC({ id }: { id: string }) {
+    const { attributes, version } = await this.unsecuredSavedObjectsClient.get<RawRule>(
+      'alert',
+      id
+    );
+
+    try {
+      await this.authorization.ensureAuthorized({
+        ruleTypeId: attributes.alertTypeId,
+        consumer: attributes.consumer,
+        operation: WriteOperations.Unsnooze,
+        entity: AlertingAuthorizationEntity.Rule,
+      });


I haven't tested this, but it appears that the authorization check will never occur if: 1. the user tries to unsnooze an alert, and 2. the alert is not found. In that case it will throw a 404 error before the authZ check occurs (and thus, it will never get audited). At least that's what it appears to be doing.

It looks like the rest of the rules client functions the same way, too. Can you confirm? CC @XavierM

mdefazio · 2022-03-23T01:49:16Z

Wanted to make sure we're expecting that selecting "Enabled" from the context menu will also cancel the snooze? Or do we only want the Cancel Snooze button to do this?

Yes, switching to 'Enabled' should also cancel the snooze.

Mentioning again here, the design issue has been updated with mockups for the rule detail view. This replaces the previous Stack rule Enable/Mute switches for this UI. The functionality of this badge should not change. I've moved it to the left in the new layout so we can keep the snooze timing in the same place. Also, since this uses an EUIBadge as does the rule type descriptor, I think it makes sense to group these closer instead of different sides of the header.

chrisronline

Made a first pass and it looks great! Some questions and thoughts

chrisronline · 2022-03-23T17:42:46Z

+        const rulesClient = context.alerting.getRulesClient();
+        const params = req.params;
+        try {
+          await rulesClient.unsnooze({ ...params });


Just for my own information, we feel comfortable spreading the parameters here because the schema should ensure there isn't anything extra in the object?

I think so. This is how all the other routes do it.

chrisronline · 2022-03-23T18:00:34Z

+      updatedBy: await this.getUserName(),
+      updatedAt: new Date().toISOString(),
+    });
+    const updateOptions = { version };


We don't seem to pass this in when update the rule from the task runner - why is this different here?

No idea I'm just copypasting from what the snooze method does, and that was in turn copypasted from the muteAll method, so I assume it does something for some reason

chrisronline · 2022-03-23T18:45:22Z

+const INDEFINITELY = i18n.translate(
+  'xpack.triggersActionsUI.sections.rulesList.remainingSnoozeIndefinite',
+  { defaultMessage: 'Indefinitely' }
+);


Is it possible to make these files smaller in the future? Like move some of these into a lib folder (which also makes it easier to unit test)?

chrisronline · 2022-03-23T18:58:02Z

+}: ComponentOpts) => {
+  const [isEnabled, setIsEnabled] = useState<boolean>(item.enabled);
+  const [isSnoozed, setIsSnoozed] = useState<boolean>(isItemSnoozed(item));
+  useEffect(() => {


Do we need to listen for this? I think the entire component will re-render when the items change, or what's the use case here?

This is necessary because we store isEnabled and isSnooze in state to prevent the loading spinner from flickering before switching a status. Consequently we have to manually listen for any outside updates of the item.

Here's a recording of what it looks like if we don't use these useState/useEffect combos and just relied on an item prop update to re-render the dropdown:

Hmm so it sounds like we're doing this to make the UI for responsive - in that we update the UI right after the user interaction while simultaneously sending the request to the server? That's the goal here? And without the useState/useEffect, we have to wait for the server to respond with the updated SO and if that takes a small amount of time (500ms to 1s) we see this weird flickering of the loading icon, then the updated value?

No the server has already responded with the updated SO, the wait time is just from React. Keeping things in useState/useEffect gives us control over when things are rendered.

Note that this same code already existed in the previous switch control.

Okay we can defer to discuss this in the future as it's not a new patttern!

chrisronline · 2022-03-23T19:07:04Z

+    [setIntervalUnit]
+  );
+
+  const onApply1h = useCallback(() => applySnooze(1, 'h'), [applySnooze]);


It feels weird to hard code it like this - is it possible to define the commonly used time frames in some constant at the top and then build out the UI from that list?

From an i18n perspective, that could work if we were okay with Moment.js converting 1h to an hour instead of 1 hour but I don't think we are? Unfortunately I'm not sure how to customize Moment's humanize function to use 1 instead of an (or equivalent, depending on locale; fr uses une minute for example).

If we're okay with changing the language then this would work but otherwise we're constrained by i18n.

jportner

Thank you!

kibana-ci · 2022-03-24T03:09:54Z

💚 Build Succeeded

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
`triggersActionsUi`	335	338	+3

Public APIs missing comments

Total count of every public API that lacks a comment. Target amount is 0. Run node scripts/build_api_docs --plugin [yourplugin] --stats comments for more detailed information.

id	before	after	diff
`triggersActionsUi`	273	281	+8

Async chunks

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

id	before	after	diff
`triggersActionsUi`	663.2KB	670.5KB	+7.3KB

Page load bundle

Size of the bundles that are downloaded on every page load. Target size is below 100kb

id	before	after	diff
`triggersActionsUi`	96.6KB	97.0KB	+435.0B

Unknown metric groups

API count

id	before	after	diff
`triggersActionsUi`	285	295	+10

History

💔 Build #33259 failed 764ea77
💔 Build #32847 failed 7e0412e
💔 Build #32822 failed 49c052f
💔 Build #32788 failed 5c9a9dd
💔 Build #32773 failed 91e06d8

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

chrisronline

LGTM!

kibanamachine · 2022-03-28T17:06:18Z

Friendly reminder: Looks like this PR hasn’t been backported yet.
To create backports run node scripts/backport --pr 128214 or prevent reminders by adding the backport:skip label.

kibanamachine · 2022-03-29T17:16:18Z

Friendly reminder: Looks like this PR hasn’t been backported yet.
To create backports run node scripts/backport --pr 128214 or prevent reminders by adding the backport:skip label.

kibanamachine · 2022-03-30T17:26:18Z

Friendly reminder: Looks like this PR hasn’t been backported yet.
To create backports run node scripts/backport --pr 128214 or prevent reminders by adding the backport:skip label.

Add Snooze UI and Unsnooze API

2b7f9cc

Zacqary added release_note:enhancement Team:ResponseOps Platform ResponseOps team (formerly the Cases and Alerting teams) t// Feature:Alerting/RulesManagement Issues related to the Rules Management UX v8.2.0 labels Mar 21, 2022

gmmorris added the ci:deploy-cloud label Mar 22, 2022

Merge branch 'main' into 128011-snooze-ui

665612a

XavierM reviewed Mar 22, 2022

View reviewed changes

Comment thread x-pack/plugins/alerting/server/rules_client/rules_client.ts Outdated

XavierM reviewed Mar 22, 2022

View reviewed changes

Comment thread x-pack/plugins/alerting/server/rules_client/rules_client.ts

Zacqary added 5 commits March 22, 2022 11:06

Merge remote-tracking branch 'upstream/main' into 128011-snooze-ui

98c69ee

Merge branch '128011-snooze-ui' of https://github.com/Zacqary/kibana …

c577df4

…into 128011-snooze-ui

Add unsnooze writeoperation

cd531cd

Add unsnooze API tests

f35b0a4

Add UI tests

e0038d6

Zacqary commented Mar 22, 2022

View reviewed changes

Zacqary marked this pull request as ready for review March 22, 2022 17:48

Zacqary requested review from a team as code owners March 22, 2022 17:48

Zacqary added 2 commits March 22, 2022 13:04

Add tooltip and enable canceling snooze when clicking Enabled

68819ff

Fix rulesClient mock

91e06d8

Zacqary enabled auto-merge (squash) March 22, 2022 18:36

Zacqary added 2 commits March 22, 2022 14:12

Fix unsnooze_rule test

5c9a9dd

Fix rules list tests

49c052f

XavierM mentioned this pull request Mar 22, 2022

[Actionable Observability] rules page read permissions & snoozed status & no data screen #128108

Merged

Add indefinite snooze

7e0412e

mgiota reviewed Mar 22, 2022

View reviewed changes

jportner reviewed Mar 22, 2022

View reviewed changes

chrisronline reviewed Mar 23, 2022

View reviewed changes

Zacqary added 2 commits March 23, 2022 15:04

Fix tests

d487bab

Update audit events

764ea77

Zacqary requested a review from jportner March 23, 2022 20:49

jportner approved these changes Mar 23, 2022

View reviewed changes

Merge remote-tracking branch 'upstream/main' into 128011-snooze-ui

c97e339

Zacqary requested review from XavierM and chrisronline March 24, 2022 16:00

chrisronline approved these changes Mar 24, 2022

View reviewed changes

Zacqary merged commit d102213 into elastic:main Mar 24, 2022

kibanamachine added the backport missing Added to PRs automatically when the are determined to be missing a backport. label Mar 28, 2022

ymao1 mentioned this pull request Mar 28, 2022

[RAM] Snooze UI should respect user roles #128672

Closed

spalger added the backport:skip This PR does not require backporting label Mar 30, 2022

kibanamachine removed the backport missing Added to PRs automatically when the are determined to be missing a backport. label Mar 30, 2022

tylersmalley added ci:cloud-deploy Create or update a Cloud deployment and removed ci:deploy-cloud labels Aug 17, 2022

Conversation

Zacqary commented Mar 21, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Checklist

Uh oh!

Zacqary commented Mar 21, 2022

Uh oh!

mdefazio commented Mar 22, 2022

Uh oh!

gmmorris commented Mar 22, 2022

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Zacqary Mar 24, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

elasticmachine commented Mar 22, 2022

Uh oh!

Zacqary commented Mar 22, 2022

Uh oh!

mgiota Mar 22, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jportner left a comment

Choose a reason for hiding this comment

Uh oh!

jportner Mar 22, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

mdefazio commented Mar 23, 2022

Uh oh!

chrisronline left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jportner left a comment

Choose a reason for hiding this comment

Uh oh!

kibana-ci commented Mar 24, 2022

💚 Build Succeeded

Metrics [docs]

Module Count

Public APIs missing comments

Async chunks

Page load bundle

API count

Zacqary commented Mar 21, 2022 •

edited

Loading

Zacqary Mar 24, 2022 •

edited

Loading

mgiota Mar 22, 2022 •

edited

Loading

jportner Mar 22, 2022 •

edited

Loading