maxmustermann/kibana
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

[Fleet][Logs UI] Prevent double loading of entries in <LogStream /> component. (#102980)

Browse source 
* Use better loading indicator for `useLogSource`

* Use clearer name for the loading entries flag

* Reuse query object if its value persists
This commit is contained in:
Alejandro Fernández Gómez 2021-06-24 15:06:07 +02:00 committed by GitHub
parent 9b56549c6c
commit 1ef5a6aa05
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 13 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
x-pack/plugins/infra/public/components/log_stream/log_stream.tsx
View file

@ -112,7 +112,7 @@ Read more at https://github.com/elastic/kibana/blob/master/src/plugins/kibana_re
const {
derivedIndexPattern,
isLoadingSourceConfiguration,
isLoading: isLoadingSource,
loadSource,
sourceConfiguration,
} = useLogSource({
@ -138,7 +138,7 @@ Read more at https://github.com/elastic/kibana/blob/master/src/plugins/kibana_re
hasMoreAfter,
hasMoreBefore,
isLoadingMore,
isReloading,
isReloading: isLoadingEntries,
} = useLogStream({
sourceId,
startTimestamp,
@ -198,7 +198,7 @@ Read more at https://github.com/elastic/kibana/blob/master/src/plugins/kibana_re
items={streamItems}
scale="medium"
wrap={true}
isReloading={isLoadingSourceConfiguration || isReloading}
isReloading={isLoadingSource || isLoadingEntries}
isLoadingMore={isLoadingMore}
hasMoreBeforeStart={hasMoreBefore}
hasMoreAfterEnd={hasMoreAfter}

13
x-pack/plugins/infra/public/containers/logs/log_stream/index.ts
View file

@ -5,8 +5,9 @@
* 2.0.
*/
import { isEqual } from 'lodash';
import createContainer from 'constate';
import { useCallback, useEffect, useMemo, useState } from 'react';
import { useCallback, useEffect, useMemo, useState, useRef } from 'react';
import usePrevious from 'react-use/lib/usePrevious';
import useSetState from 'react-use/lib/useSetState';
import { esQuery } from '../../../../../../../src/plugins/data/public';
@ -65,6 +66,12 @@ export function useLogStream({
const prevStartTimestamp = usePrevious(startTimestamp);
const prevEndTimestamp = usePrevious(endTimestamp);
const cachedQuery = useRef(query);
if (!isEqual(query, cachedQuery)) {
cachedQuery.current = query;
}
useEffect(() => {
if (prevStartTimestamp && prevStartTimestamp > startTimestamp) {
setState({ hasMoreBefore: true });
@ -82,10 +89,10 @@ export function useLogStream({
sourceId,
startTimestamp,
endTimestamp,
query,
query: cachedQuery.current,
columnOverrides: columns,
}),
[columns, endTimestamp, query, sourceId, startTimestamp]
[columns, endTimestamp, cachedQuery, sourceId, startTimestamp]
);
const {