[Observability] Make Alerts page use shared Kibana time range #115192

miltonhultgren · 2021-10-15T13:44:54Z

Summary

This PR does two things:

Migrates the AlertsPage to use a stateContainer (https://github.com/elastic/kibana/tree/master/src/plugins/kibana_utils/docs/state_containers) which sync the state to the URL using URL state storage (https://github.com/elastic/kibana/tree/master/src/plugins/kibana_utils/docs/state_sync)
Changes the AlertsPage to use the time range set in the data plugins timefilter service, and to push the selected time range into the timefilter service

Note: I'm still working on adding new E2E tests to test the new URL state and the timefilter service syncing.
We can consider merging this before FF and I can add those tests in a follow up PR.

Checklist

Unit or functional tests were updated or added to match the most common scenarios

…astic#111348)

miltonhultgren · 2021-10-18T09:29:39Z

@elasticmachine merge upstream

…ility

elasticmachine · 2021-10-18T12:18:30Z

Pinging @elastic/logs-metrics-ui (Team:logs-metrics-ui)

Kerry350 · 2021-10-18T15:36:04Z

Functionality works well and as expected 👌

I'll take a look through the code now.

One question: I see the # are still in the URL, I think at one point you were talking with the Kibana app services team about the stateContainers usage. What was the verdict there?

Kerry350

LGTM 👍

Hopefully this can serve as a blueprint to using the stateContainer and stateStorage elsewhere (we've talked about it for logs code, for sure).

Kerry350 · 2021-10-18T16:06:54Z

x-pack/plugins/observability/public/pages/alerts/index.tsx

+      timefilterService.setTime(dateRange);
+      setRangeFrom(dateRange.from);
+      setRangeTo(dateRange.to);
+      setKuery(query);


Much cleaner 👍

Kerry350 · 2021-10-18T16:10:24Z

x-pack/plugins/observability/public/pages/alerts/state_container/state_container.tsx

+
+type AlertsPageStateContainer = typeof alertsPageStateContainer;
+
+const { Provider, useContainer } = createStateContainerReactHelpers<AlertsPageStateContainer>();


Nice 👍

(It's my first time reviewing the state container in a real world example, so it's nice to see there's some helpers and so on)

Kerry350 · 2021-10-18T16:13:41Z

...lugins/observability/public/pages/alerts/state_container/use_alerts_page_state_container.tsx

+  const timefilterService = useTimefilterService();
+
+  useEffect(() => {
+    const urlStateStorage = createKbnUrlStateStorage({ history, useHash: false });


Asked my question before seeing this 😅

So we shouldn't see the hash?

This part is a bit confusing. The URL state storage helper offers to options: store the state plainly in the URL (Rison encoded) OR store it into sessionStorage but store the key of the session storage entry in the URL (the key is a hash).

This is still different from the sessionStorage helper which only stores the state into session storage but does not update the URL.

The # (hash) that gets added to the URL is added regardless which is causing issues in the tests and is a blocker right now. We need to decide how to work around that.
This message gives some hints on what might be required to fix that:
https://elastic.slack.com/archives/CFFQ7RP9B/p1634211896180000?thread_ts=1634207518.178700&cid=CFFQ7RP9B

So I see 3 paths:

Don't adopt the state container right now and just solve the issue in the ticket with the timefilter service (and create a ticket to follow up on the state containers to support history state as well)

Modify the FTR helpers to support this weird mix

Modify the state container to support history state

@Kerry350

...lugins/observability/public/pages/alerts/state_container/use_alerts_page_state_container.tsx

miltonhultgren · 2021-10-19T09:56:57Z

@Kerry350
After talking to Felix it seems it should be fairly easy to change the URL state storage to not use the hash (#), I'll spend today on that and hopefully have that working and tests passing by EOD :)

…lerts-timeframe-with-observability

miltonhultgren · 2021-10-19T12:55:23Z

@Dosant Can you have a look at the changes I made in src/plugins/kibana_utils/public/state_sync/state_sync_state_storage/create_kbn_url_state_storage.ts?

I still need to update the tests for those changes, but pushing this to get feedback from my team on some other things :)

miltonhultgren · 2021-10-19T13:46:30Z

...kibana_utils/public/state_sync/state_sync_state_storage/create_kbn_url_state_storage.test.ts

@@ -191,6 +191,25 @@ describe('KbnUrlStateStorage', () => {
    });
  });

+  describe('useHashQuery: true', () => {


I'm not sure which other tests need to be mirrored from the default false case, or if there are some other cases to test, please advice :) @Dosant

If it isn't too much burden, let's mirror KbnUrlStateStorage > useHash: false 🙏

…lerts-timeframe-with-observability

Kerry350

Added a couple of small nitpicks on the tests, feel free to ignore if you want. You mentioned they felt a bit messy, but they look good, great job 👍

I'm still waiting for Kibana to build right now to test the functionality again ⏳

x-pack/test/observability_functional/apps/observability/alerts/shared_time_range.ts

Kerry350

Beautiful! Hash be gone 🎉

Synchronisation all seems to work as expected.

Thanks for persevering with these changes and getting this over the line with the improved behaviour.

Dosant

I tested, didn't find any issues without # in the URL. thanks for this improvement 👍

Dosant · 2021-10-20T13:04:57Z

...kibana_utils/public/state_sync/state_sync_state_storage/create_kbn_url_state_storage.test.ts

@@ -191,6 +191,25 @@ describe('KbnUrlStateStorage', () => {
    });
  });

+  describe('useHashQuery: true', () => {


If it isn't too much burden, let's mirror KbnUrlStateStorage > useHash: false 🙏

Dosant · 2021-10-20T13:52:21Z

x-pack/plugins/observability/public/pages/alerts/index.tsx

-        ...history.location,
-        search: nextSearchParams.toString(),
-      });
+      timefilterService.setTime(dateRange);


it is also possible to subscribe to state container changes and update global time there. This way timefilterService will stay in sync with state container even if dateRange is updated from other places

Good to know, there are some business requirements around defaults on page load that prevents us from doing that in this case though!

kibanamachine · 2021-10-20T16:37:00Z

💚 Build Succeeded

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
`observability`	377	380	+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
`kibanaUtils`	413	414	+1

Async chunks

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

id	before	after	diff
`observability`	383.9KB	384.8KB	+920.0B

Page load bundle

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

id	before	after	diff
`kibanaUtils`	72.0KB	72.1KB	+102.0B

Unknown metric groups

API count

id	before	after	diff
`kibanaUtils`	606	607	+1

History

💛 Build #163204 was flaky 6e739e7
💛 Build #163138 was flaky a39dc0a
💛 Build #163130 was flaky efcb409
💛 Build #162699 was flaky 0cb1071
💔 Build #162667 failed 82465d3

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

cc @miltonhultgren

kibanamachine · 2021-10-21T07:17:32Z

💔 Backport failed

The backport operation could not be completed due to the following error:
There are no branches to backport to. Aborting.

The backport PRs will be merged automatically after passing CI.

To backport manually run:
node scripts/backport --pr 115192

mgiota · 2021-10-21T07:26:56Z

@miltonhultgren Backport failed for this PR. Could you have a look?

kibanamachine · 2021-10-25T07:23:22Z

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

weltenwort · 2021-10-25T09:08:00Z

I think the idea is to not backport this since it's a new feature.

kibanamachine · 2021-10-26T07:33:21Z

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

kibanamachine · 2021-10-27T07:43:21Z

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

@miltonhultgren

Backport @miltonhultgren's changes to add the `useHashQuery` param to `createKbnUrlStateStorage` Co-authored-by: Milton Hultgren <milton.hultgren@elastic.co>

@miltonhultgren

…117568) * [Fleet] Fix agent logs not reading query from URL (#117286) * Don't use hash for agent logs url state * revert core app services change * Cherrypick changes from PR #115192 Backport @miltonhultgren's changes to add the `useHashQuery` param to `createKbnUrlStateStorage` Co-authored-by: Milton Hultgren <milton.hultgren@elastic.co> Co-authored-by: Mark Hopkin <mark.hopkin@elastic.co> Co-authored-by: Milton Hultgren <milton.hultgren@elastic.co>

[Observability] Make Alerts page respect timefilter service range (el…

12c16d4

…astic#111348)

Merge branch 'master' into 111348-sync-alerts-timeframe-with-observab…

030f306

…ility

miltonhultgren self-assigned this Oct 18, 2021

miltonhultgren marked this pull request as ready for review October 18, 2021 12:18

Kerry350 self-requested a review October 18, 2021 12:37

miltonhultgren added release_note:enhancement and removed release_note:skip Skip the PR/issue when compiling release notes labels Oct 18, 2021

miltonhultgren changed the title ~~[Observability] Make Alerts page respect timefilter service range~~ [Observability] Make Alerts page use shared Kibana time range Oct 18, 2021

Kerry350 approved these changes Oct 18, 2021

View reviewed changes

miltonhultgren commented Oct 19, 2021

View reviewed changes

...lugins/observability/public/pages/alerts/state_container/use_alerts_page_state_container.tsx Show resolved Hide resolved

miltonhultgren commented Oct 19, 2021

View reviewed changes

...lugins/observability/public/pages/alerts/state_container/use_alerts_page_state_container.tsx Show resolved Hide resolved

miltonhultgren added 2 commits October 19, 2021 13:01

Merge branch 'master' of github.com:elastic/kibana into 111348-sync-a…

1e0886f

…lerts-timeframe-with-observability

[Observability] Add useHashQuery option in UrlStateStorage

82465d3

Remove unused

caab094

miltonhultgren requested a review from a team as a code owner October 19, 2021 13:28

miltonhultgren requested a review from Dosant October 19, 2021 13:31

Add test for createKbnUrlStateStorage change

0cb1071

miltonhultgren commented Oct 19, 2021

View reviewed changes

Add time range test

d823e14

miltonhultgren added 2 commits October 20, 2021 10:22

Merge branch 'master' of github.com:elastic/kibana into 111348-sync-a…

efcb409

…lerts-timeframe-with-observability

Add code comments

a39dc0a

Kerry350 reviewed Oct 20, 2021

View reviewed changes

x-pack/test/observability_functional/apps/observability/alerts/shared_time_range.ts Outdated Show resolved Hide resolved

x-pack/test/observability_functional/apps/observability/alerts/shared_time_range.ts Outdated Show resolved Hide resolved

Kerry350 approved these changes Oct 20, 2021

View reviewed changes

Clean up tests

6e739e7

Dosant approved these changes Oct 20, 2021

View reviewed changes

Extend createKbnUrlStateStorage tests

77cdca7

miltonhultgren removed the v7.16.0 label Oct 21, 2021

miltonhultgren merged commit 331e76b into elastic:master Oct 21, 2021

miltonhultgren removed the auto-backport Deprecated - use backport:version if exact versions are needed label Oct 21, 2021

kibanamachine added the backport missing Added to PRs automatically when the are determined to be missing a backport. label Oct 25, 2021

weltenwort added backport:skip This commit does not require backporting and removed backport missing Added to PRs automatically when the are determined to be missing a backport. labels Oct 27, 2021

KOTungseth added the Feature:Logs UI Logs UI feature label Oct 27, 2021

jasonrhodes mentioned this pull request Nov 3, 2021

Preserve time range when navigating from observability alerts page #101418

Closed

mgiota mentioned this pull request Feb 11, 2022

Alerts in overview page #125337

Merged

mgiota mentioned this pull request Oct 17, 2023

feat(slo): store search state in url #168528

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Observability] Make Alerts page use shared Kibana time range #115192

[Observability] Make Alerts page use shared Kibana time range #115192

miltonhultgren commented Oct 15, 2021 •

edited

Loading

miltonhultgren commented Oct 18, 2021

elasticmachine commented Oct 18, 2021

Kerry350 commented Oct 18, 2021

Kerry350 left a comment

Kerry350 Oct 18, 2021

Kerry350 Oct 18, 2021

Kerry350 Oct 18, 2021

miltonhultgren Oct 19, 2021 •

edited

Loading

miltonhultgren commented Oct 19, 2021

miltonhultgren commented Oct 19, 2021

miltonhultgren Oct 19, 2021

Dosant Oct 20, 2021

Kerry350 left a comment

Kerry350 left a comment

Dosant left a comment

Dosant Oct 20, 2021

Dosant Oct 20, 2021

miltonhultgren Oct 20, 2021

kibanamachine commented Oct 20, 2021

API count

kibanamachine commented Oct 21, 2021

mgiota commented Oct 21, 2021

kibanamachine commented Oct 25, 2021

weltenwort commented Oct 25, 2021

kibanamachine commented Oct 26, 2021

kibanamachine commented Oct 27, 2021


		type AlertsPageStateContainer = typeof alertsPageStateContainer;

		const { Provider, useContainer } = createStateContainerReactHelpers<AlertsPageStateContainer>();

[Observability] Make Alerts page use shared Kibana time range #115192

[Observability] Make Alerts page use shared Kibana time range #115192

Conversation

miltonhultgren commented Oct 15, 2021 • edited Loading

Summary

Checklist

miltonhultgren commented Oct 18, 2021

elasticmachine commented Oct 18, 2021

Kerry350 commented Oct 18, 2021

Kerry350 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

miltonhultgren Oct 19, 2021 • edited Loading

Choose a reason for hiding this comment

miltonhultgren commented Oct 19, 2021

miltonhultgren commented Oct 19, 2021

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Kerry350 left a comment

Choose a reason for hiding this comment

Kerry350 left a comment

Choose a reason for hiding this comment

Dosant left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kibanamachine commented Oct 20, 2021

💚 Build Succeeded

Metrics [docs]

Module Count

Public APIs missing comments

Async chunks

Page load bundle

API count

History

kibanamachine commented Oct 21, 2021

💔 Backport failed

mgiota commented Oct 21, 2021

kibanamachine commented Oct 25, 2021

weltenwort commented Oct 25, 2021

kibanamachine commented Oct 26, 2021

kibanamachine commented Oct 27, 2021

miltonhultgren commented Oct 15, 2021 •

edited

Loading

miltonhultgren Oct 19, 2021 •

edited

Loading