Move creation of state container to render-time in order to initialize state from URL correctly (#87955)
This commit is contained in:
parent
2d7a3cedef
commit
44ccf285e5
|
@ -36,6 +36,7 @@ export const DEFAULT_LOGS_STATE: AgentLogsState = {
|
|||
query: '',
|
||||
};
|
||||
|
||||
export const STATE_STORAGE_KEY = '_q';
|
||||
export const STATE_DATASET_FIELD = 'datasets';
|
||||
|
||||
export const AGENT_LOG_LEVELS = {
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
* or more contributor license agreements. Licensed under the Elastic License;
|
||||
* you may not use this file except in compliance with the Elastic License.
|
||||
*/
|
||||
import React, { memo, useEffect, useState } from 'react';
|
||||
import React, { memo, useEffect, useState, useMemo } from 'react';
|
||||
import {
|
||||
createStateContainer,
|
||||
syncState,
|
||||
|
@ -12,12 +12,14 @@ import {
|
|||
PureTransition,
|
||||
getStateFromKbnUrl,
|
||||
} from '../../../../../../../../../../../src/plugins/kibana_utils/public';
|
||||
import { DEFAULT_LOGS_STATE } from './constants';
|
||||
import { DEFAULT_LOGS_STATE, STATE_STORAGE_KEY } from './constants';
|
||||
import { AgentLogsUI, AgentLogsProps, AgentLogsState, AgentLogsUrlStateHelper } from './agent_logs';
|
||||
|
||||
const stateStorageKey = '_q';
|
||||
|
||||
const stateContainer = createStateContainer<
|
||||
export const AgentLogs: React.FunctionComponent<Pick<AgentLogsProps, 'agent'>> = memo(
|
||||
({ agent }) => {
|
||||
const stateContainer = useMemo(
|
||||
() =>
|
||||
createStateContainer<
|
||||
AgentLogsState,
|
||||
{
|
||||
update: PureTransition<AgentLogsState, [Partial<AgentLogsState>]>;
|
||||
|
@ -25,25 +27,29 @@ const stateContainer = createStateContainer<
|
|||
>(
|
||||
{
|
||||
...DEFAULT_LOGS_STATE,
|
||||
...getStateFromKbnUrl<AgentLogsState>(stateStorageKey, window.location.href),
|
||||
...getStateFromKbnUrl<AgentLogsState>(STATE_STORAGE_KEY, window.location.href),
|
||||
},
|
||||
{
|
||||
update: (state) => (updatedState) => ({ ...state, ...updatedState }),
|
||||
}
|
||||
),
|
||||
[]
|
||||
);
|
||||
|
||||
const AgentLogsConnected = AgentLogsUrlStateHelper.connect<AgentLogsProps, 'state'>((state) => ({
|
||||
const AgentLogsConnected = useMemo(
|
||||
() =>
|
||||
AgentLogsUrlStateHelper.connect<AgentLogsProps, 'state'>((state) => ({
|
||||
state: state || DEFAULT_LOGS_STATE,
|
||||
}))(AgentLogsUI);
|
||||
}))(AgentLogsUI),
|
||||
[]
|
||||
);
|
||||
|
||||
export const AgentLogs: React.FunctionComponent<Pick<AgentLogsProps, 'agent'>> = memo(
|
||||
({ agent }) => {
|
||||
const [isSyncReady, setIsSyncReady] = useState<boolean>(false);
|
||||
|
||||
useEffect(() => {
|
||||
const stateStorage = createKbnUrlStateStorage();
|
||||
const { start, stop } = syncState({
|
||||
storageKey: stateStorageKey,
|
||||
storageKey: STATE_STORAGE_KEY,
|
||||
stateContainer: stateContainer as INullableBaseStateContainer<AgentLogsState>,
|
||||
stateStorage,
|
||||
});
|
||||
|
@ -54,7 +60,7 @@ export const AgentLogs: React.FunctionComponent<Pick<AgentLogsProps, 'agent'>> =
|
|||
stop();
|
||||
stateContainer.set(DEFAULT_LOGS_STATE);
|
||||
};
|
||||
}, []);
|
||||
}, [stateContainer]);
|
||||
|
||||
return (
|
||||
<AgentLogsUrlStateHelper.Provider value={stateContainer}>
|
||||
|
|
Loading…
Reference in a new issue