[Logs UI] Fix log stream data fetching (#93201)

* Use ReplaySubject and amend date comparisons

* Assess date range expressions separately

* Only add dataset filter to view in stream links if one exists
This commit is contained in:
Kerry Gallagher 2021-03-04 19:50:14 +00:00 committed by GitHub
parent 6ab3fc0107
commit e45718d0ff
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 30 additions and 14 deletions

View file

@ -21,6 +21,7 @@ interface DateRange {
startTimestamp: number;
endTimestamp: number;
timestampsLastUpdate: number;
lastCompleteDateRangeExpressionUpdate: number;
}
interface VisiblePositions {
@ -46,6 +47,7 @@ export interface LogPositionStateParams {
startTimestamp: number | null;
endTimestamp: number | null;
timestampsLastUpdate: number;
lastCompleteDateRangeExpressionUpdate: number;
}
export interface LogPositionCallbacks {
@ -121,6 +123,7 @@ export const useLogPositionState: () => LogPositionStateParams & LogPositionCall
startTimestamp: datemathToEpochMillis(DEFAULT_DATE_RANGE.startDateExpression)!,
endTimestamp: datemathToEpochMillis(DEFAULT_DATE_RANGE.endDateExpression, 'up')!,
timestampsLastUpdate: Date.now(),
lastCompleteDateRangeExpressionUpdate: Date.now(),
});
useEffect(() => {
@ -171,12 +174,18 @@ export const useLogPositionState: () => LogPositionStateParams & LogPositionCall
jumpToTargetPosition(null);
}
setDateRange({
setDateRange((prevState) => ({
...newDateRange,
startTimestamp: nextStartTimestamp,
endTimestamp: nextEndTimestamp,
timestampsLastUpdate: Date.now(),
});
// NOTE: Complete refers to the last time an update was requested with both expressions. These require a full refresh (unless streaming). Timerange expansion
// and pagination however do not.
lastCompleteDateRangeExpressionUpdate:
'startDateExpression' in newDateRange && 'endDateExpression' in newDateRange
? Date.now()
: prevState.lastCompleteDateRangeExpressionUpdate,
}));
},
[setDateRange, dateRange, targetPosition]
);

View file

@ -6,7 +6,7 @@
*/
import { useCallback } from 'react';
import { combineLatest, Observable, Subject } from 'rxjs';
import { combineLatest, Observable, ReplaySubject } from 'rxjs';
import { last, map, startWith, switchMap } from 'rxjs/operators';
import { LogSourceColumnConfiguration } from '../../../../common/http_api/log_sources';
import { LogEntryCursor } from '../../../../common/log_entry';
@ -53,7 +53,7 @@ export const useFetchLogEntriesAround = ({
type LogEntriesAfterRequest = NonNullable<ReturnType<typeof fetchLogEntriesAfter>>;
const logEntriesAroundSearchRequests$ = useObservable(
() => new Subject<[LogEntriesBeforeRequest, Observable<LogEntriesAfterRequest>]>(),
() => new ReplaySubject<[LogEntriesBeforeRequest, Observable<LogEntriesAfterRequest>]>(),
[]
);

View file

@ -111,10 +111,14 @@ export const LogEntryExampleMessage: React.FunctionComponent<Props> = ({
flyoutOptions: encode({
surroundingLogsId: id,
}),
logFilter: encode({
expression: `${partitionField}: ${dataset}`,
kind: 'kuery',
}),
...(dataset
? {
logFilter: encode({
expression: `${partitionField}: ${dataset}`,
kind: 'kuery',
}),
}
: {}),
},
});

View file

@ -60,6 +60,7 @@ export const LogsPageLogsContent: React.FunctionComponent = () => {
startDateExpression,
endDateExpression,
updateDateRange,
lastCompleteDateRangeExpressionUpdate,
} = useContext(LogPositionState.Context);
const { filterQuery, applyLogFilterQuery } = useContext(LogFilterState.Context);
@ -81,16 +82,16 @@ export const LogsPageLogsContent: React.FunctionComponent = () => {
const prevStartTimestamp = usePrevious(startTimestamp);
const prevEndTimestamp = usePrevious(endTimestamp);
const prevFilterQuery = usePrevious(filterQuery);
const prevLastCompleteDateRangeExpressionUpdate = usePrevious(
lastCompleteDateRangeExpressionUpdate
);
// Refetch entries if...
useEffect(() => {
const isFirstLoad = !prevStartTimestamp || !prevEndTimestamp;
const newDateRangeDoesNotOverlap =
(prevStartTimestamp != null &&
startTimestamp != null &&
prevStartTimestamp < startTimestamp) ||
(prevEndTimestamp != null && endTimestamp != null && prevEndTimestamp > endTimestamp);
const completeDateRangeExpressionHasChanged =
lastCompleteDateRangeExpressionUpdate !== prevLastCompleteDateRangeExpressionUpdate;
const isCenterPointOutsideLoadedRange =
targetPosition != null &&
@ -101,7 +102,7 @@ export const LogsPageLogsContent: React.FunctionComponent = () => {
if (
isFirstLoad ||
newDateRangeDoesNotOverlap ||
completeDateRangeExpressionHasChanged ||
isCenterPointOutsideLoadedRange ||
hasQueryChanged
) {
@ -124,6 +125,8 @@ export const LogsPageLogsContent: React.FunctionComponent = () => {
bottomCursor,
filterQuery,
prevFilterQuery,
lastCompleteDateRangeExpressionUpdate,
prevLastCompleteDateRangeExpressionUpdate,
]);
const { logSummaryHighlights, currentHighlightKey, logEntryHighlightsById } = useContext(