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

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

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