Move URL state to hook
This commit is contained in:
parent
a03f395b52
commit
4e04aa061d
|
@ -5,4 +5,4 @@
|
|||
*/
|
||||
|
||||
export * from './log_filter_state';
|
||||
export * from './with_log_filter_url_state';
|
||||
export * from './use_log_filter_url_state';
|
||||
|
|
|
@ -0,0 +1,44 @@
|
|||
/*
|
||||
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
|
||||
* or more contributor license agreements. Licensed under the Elastic License;
|
||||
* you may not use this file except in compliance with the Elastic License.
|
||||
*/
|
||||
|
||||
import { useContext, useEffect } from 'react';
|
||||
import * as rt from 'io-ts';
|
||||
import { LogFilterState } from './log_filter_state';
|
||||
import { replaceStateKeyInQueryString } from '../../../utils/url_state';
|
||||
import { useUrlState } from '../../../utils/use_url_state';
|
||||
import { getEncodeDecodeFromRT } from '../../../utils/validate_url_rt';
|
||||
|
||||
const logFilterRT = rt.union([
|
||||
rt.type({
|
||||
kind: rt.literal('kuery'),
|
||||
expression: rt.string,
|
||||
}),
|
||||
rt.undefined,
|
||||
]);
|
||||
type LogFilterUrlState = rt.TypeOf<typeof logFilterRT>;
|
||||
|
||||
const LOG_FILTER_URL_STATE_KEY = 'logFilter';
|
||||
|
||||
export const useLogFilterUrlState = () => {
|
||||
const { filterQueryAsKuery, applyLogFilterQuery } = useContext(LogFilterState.Context);
|
||||
const [logFilterUrlState, setLogFilterUrlState] = useUrlState({
|
||||
defaultState: filterQueryAsKuery,
|
||||
urlStateKey: LOG_FILTER_URL_STATE_KEY,
|
||||
writeDefaultState: true,
|
||||
...getEncodeDecodeFromRT(logFilterRT),
|
||||
});
|
||||
|
||||
/* eslint-disable react-hooks/exhaustive-deps */
|
||||
useEffect(() => applyLogFilterQuery(logFilterUrlState.expression), [logFilterUrlState]);
|
||||
useEffect(() => setLogFilterUrlState(filterQueryAsKuery), [filterQueryAsKuery]);
|
||||
/* eslint-enable react-hooks/exhaustive-deps */
|
||||
};
|
||||
|
||||
export const replaceLogFilterInQueryString = (expression: string) =>
|
||||
replaceStateKeyInQueryString<LogFilterUrlState>('logFilter', {
|
||||
kind: 'kuery',
|
||||
expression,
|
||||
});
|
|
@ -1,46 +0,0 @@
|
|||
/*
|
||||
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
|
||||
* 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, { useContext } from 'react';
|
||||
import { LogFilterState, LogFilterStateParams } from './log_filter_state';
|
||||
import { replaceStateKeyInQueryString, UrlStateContainer } from '../../../utils/url_state';
|
||||
|
||||
type LogFilterUrlState = LogFilterStateParams['filterQueryAsKuery'];
|
||||
|
||||
export const WithLogFilterUrlState: React.FC = () => {
|
||||
const { filterQueryAsKuery, applyLogFilterQuery } = useContext(LogFilterState.Context);
|
||||
return (
|
||||
<UrlStateContainer
|
||||
urlState={filterQueryAsKuery}
|
||||
urlStateKey="logFilter"
|
||||
mapToUrlState={mapToFilterQuery}
|
||||
onChange={urlState => {
|
||||
if (urlState) {
|
||||
applyLogFilterQuery(urlState.expression);
|
||||
}
|
||||
}}
|
||||
onInitialize={urlState => {
|
||||
if (urlState) {
|
||||
applyLogFilterQuery(urlState.expression);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const mapToFilterQuery = (value: any): LogFilterUrlState | undefined =>
|
||||
value?.kind === 'kuery' && typeof value.expression === 'string'
|
||||
? {
|
||||
kind: value.kind,
|
||||
expression: value.expression,
|
||||
}
|
||||
: undefined;
|
||||
|
||||
export const replaceLogFilterInQueryString = (expression: string) =>
|
||||
replaceStateKeyInQueryString<LogFilterUrlState>('logFilter', {
|
||||
kind: 'kuery',
|
||||
expression,
|
||||
});
|
|
@ -15,7 +15,7 @@ import { PageContent } from '../../../components/page';
|
|||
|
||||
import { WithSummary } from '../../../containers/logs/log_summary';
|
||||
import { LogViewConfiguration } from '../../../containers/logs/log_view_configuration';
|
||||
import { LogFilterState } from '../../../containers/logs/log_filter';
|
||||
import { LogFilterState, useLogFilterUrlState } from '../../../containers/logs/log_filter';
|
||||
import {
|
||||
LogFlyout as LogFlyoutState,
|
||||
WithFlyoutOptionsUrlState,
|
||||
|
@ -42,6 +42,9 @@ export const LogsPageLogsContent: React.FunctionComponent = () => {
|
|||
flyoutItem,
|
||||
isLoading,
|
||||
} = useContext(LogFlyoutState.Context);
|
||||
|
||||
useLogFilterUrlState();
|
||||
|
||||
const { logSummaryHighlights } = useContext(LogHighlightsState.Context);
|
||||
const { applyLogFilterQuery } = useContext(LogFilterState.Context);
|
||||
return (
|
||||
|
|
|
@ -10,7 +10,7 @@ import { LogFlyout } from '../../../containers/logs/log_flyout';
|
|||
import { LogViewConfiguration } from '../../../containers/logs/log_view_configuration';
|
||||
import { LogHighlightsState } from '../../../containers/logs/log_highlights/log_highlights';
|
||||
import { LogPositionState } from '../../../containers/logs/log_position';
|
||||
import { LogFilterState, WithLogFilterUrlState } from '../../../containers/logs/log_filter';
|
||||
import { LogFilterState } from '../../../containers/logs/log_filter';
|
||||
import { LogEntriesState } from '../../../containers/logs/log_entries';
|
||||
|
||||
import { Source } from '../../../containers/source';
|
||||
|
@ -19,10 +19,7 @@ const LogFilterStateProvider: React.FC = ({ children }) => {
|
|||
const { createDerivedIndexPattern } = useContext(Source.Context);
|
||||
const derivedIndexPattern = createDerivedIndexPattern('logs');
|
||||
return (
|
||||
<LogFilterState.Provider indexPattern={derivedIndexPattern}>
|
||||
<WithLogFilterUrlState />
|
||||
{children}
|
||||
</LogFilterState.Provider>
|
||||
<LogFilterState.Provider indexPattern={derivedIndexPattern}>{children}</LogFilterState.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
16
x-pack/legacy/plugins/infra/public/utils/validate_url_rt.ts
Normal file
16
x-pack/legacy/plugins/infra/public/utils/validate_url_rt.ts
Normal file
|
@ -0,0 +1,16 @@
|
|||
/*
|
||||
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
|
||||
* or more contributor license agreements. Licensed under the Elastic License;
|
||||
* you may not use this file except in compliance with the Elastic License.
|
||||
*/
|
||||
|
||||
import { fold } from 'fp-ts/lib/Either';
|
||||
import { constant, identity } from 'fp-ts/lib/function';
|
||||
import { pipe } from 'fp-ts/lib/pipeable';
|
||||
import * as rt from 'io-ts';
|
||||
|
||||
export const getEncodeDecodeFromRT = (typeRT: rt.Type<any>) => ({
|
||||
encodeUrlState: typeRT.encode,
|
||||
decodeUrlState: (value: unknown) =>
|
||||
pipe(typeRT.decode(value), fold(constant(undefined), identity)),
|
||||
});
|
Loading…
Reference in a new issue