🌊 Reset materialized time range on app load (#222219)

The `useTimefilter` hook that's used throughout the streams UI is
retaining the last resolution of date math to absolute time ranges. This
is helpful to keep the time range stable when switching pages within the
app or making changes on a single page (like testing different grok
patterns) without completely using the current context.

However, it's confusing to move from another app like Discover to the
Streams app because the last resolution might be outdated quite a bit:
* Start in streams with a time range of last 15 mins
* Go to Discover and trigger new searches for 5 mins without changing
the time range - Discover updates the time range on each request (always
resolving "last 15mins")
* Go back to Streams - "last 15mins" still resolves to the last state
from 5 mins ago - if the user has seen a doc in discover, it probably
won't show in the streams UI without the user hitting refresh

This PR improves this user flow by resetting the resolved time range
when loading the streams app - it's kept stable while navigating around
within streams to stay consistent in there but updates once moving away
from the streams UI.

This is not fully solving the issue but it tries to balance the
advantages of the different approaches without too much effort in the
near term. This change does not affect the behavior of Discover or other
apps at all.

---------

Co-authored-by: Thom Heymann <190132+thomheymann@users.noreply.github.com>
This commit is contained in:
Joe Reuter 2025-06-10 15:20:14 +02:00 committed by GitHub
parent 7bb1808d47
commit b3740ae038
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 11 additions and 0 deletions

View file

@ -116,6 +116,10 @@ export class Timefilter {
*/
public getAutoRefreshFetch$ = () => this.autoRefreshLoop.loop$;
public triggerFetch = () => {
this.fetch$.next();
};
public getFetch$ = () => {
return this.fetch$.asObservable();
};

View file

@ -37,6 +37,7 @@ const createSetupContractMock = () => {
enableTimeRangeSelector: jest.fn(),
getBounds: jest.fn(),
calculateBounds: jest.fn(),
triggerFetch: jest.fn(),
createFilter: jest.fn(),
createRelativeFilter: jest.fn(),
getRefreshIntervalDefaults: jest.fn(),

View file

@ -71,6 +71,12 @@ export class StreamsAppPlugin
PageTemplate,
telemetryClient: this.telemetry.getClient(),
};
// Trigger fetch to ensure the time filter has an up-to-date time range when the app mounts.
// This is done to ensure that dynamic time ranges (like "Last 15 minutes") are applied like they
// would be in discover or dashboards.
pluginsStart.data.query.timefilter.timefilter.triggerFetch();
return (
<StreamsApplication
coreStart={coreStart}