Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Logs UI] Refactor query bar state to hooks #52656

Merged
merged 25 commits into from
Jan 3, 2020
Merged
Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
25 commits
Select commit Hold shift + click to select a range
ba2c456
[Logs UI] Refactor query bar state to hooks
Zacqary Dec 9, 2019
f91debd
Update typedef
Zacqary Dec 10, 2019
4e5035d
Typecheck fix
Zacqary Dec 10, 2019
2759d2f
Typecheck fix
Zacqary Dec 10, 2019
c16e03c
Simplify log filter state
Zacqary Dec 12, 2019
5798608
Merge remote-tracking branch 'upstream/master' into 50397-refactor-lo…
Zacqary Dec 12, 2019
57b5b18
Remove WithLogFilter HOC and simplify hook further
Zacqary Dec 12, 2019
ede66d8
Rename js to ts
Zacqary Dec 12, 2019
968b5a7
Fix redirect imports
Zacqary Dec 12, 2019
273d4de
Merge remote-tracking branch 'upstream/master' into 50397-refactor-lo…
Zacqary Dec 13, 2019
783f9ab
Merge branch 'master' into 50397-refactor-log-filters
elasticmachine Dec 17, 2019
9c39286
Fix link-to test accuracy
Zacqary Dec 17, 2019
6e5c874
Merge branch '50397-refactor-log-filters' of github.com:Zacqary/kiban…
Zacqary Dec 17, 2019
47ffa99
Fix link-to test
Zacqary Dec 17, 2019
c5e165f
Merge remote-tracking branch 'upstream/master' into 50397-refactor-lo…
Zacqary Dec 19, 2019
ef00491
Simplify destructuring signature
Zacqary Dec 19, 2019
8cb525d
Stylistic fixes
Zacqary Dec 19, 2019
c61f5b1
Move URL state to hook
Zacqary Dec 19, 2019
a7fe3ef
Merge remote-tracking branch 'upstream/master' into 50397-refactor-lo…
Zacqary Dec 20, 2019
43302b3
Fix log filter URL state infinite loop
Zacqary Dec 20, 2019
9063d77
Merge remote-tracking branch 'upstream/master' into 50397-refactor-lo…
Zacqary Dec 23, 2019
94ae628
Revert "Fix log filter URL state infinite loop"
Zacqary Dec 23, 2019
9a7e15d
Revert "Move URL state to hook"
Zacqary Dec 23, 2019
3cbf030
Merge remote-tracking branch 'upstream/master' into 50397-refactor-lo…
Zacqary Dec 26, 2019
ce3a832
Merge branch 'master' into 50397-refactor-log-filters
elasticmachine Jan 3, 2020
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
113 changes: 102 additions & 11 deletions x-pack/legacy/plugins/infra/public/containers/logs/log_filter/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,23 +4,114 @@
* you may not use this file except in compliance with the Elastic License.
*/

import { useContext } from 'react';
import { useReducer, useMemo } from 'react';
import createContainer from 'constate';
import { ReduxStateContext } from '../../../utils/redux_context';
import { logFilterSelectors as logFilterReduxSelectors } from '../../../store/local/selectors';
import { esKuery } from '../../../../../../../../src/plugins/data/public';

export const useLogFilterState = () => {
const { local: state } = useContext(ReduxStateContext);
const filterQuery = logFilterReduxSelectors.selectLogFilterQueryAsJson(state);
return { filterQuery };
};
enum Action {
SetDraftFilterQuery,
ApplyFilterQuery,
}

interface SetDraftQueryAction {
type: Action.SetDraftFilterQuery;
payload: FilterQuery | null;
}

interface ApplyFilterQueryAction {
type: Action.ApplyFilterQuery;
payload: SerializedFilterQuery;
}

type ActionObj = SetDraftQueryAction | ApplyFilterQueryAction;

export interface LogFilterStateParams {
filterQuery: string | null;
export interface KueryFilterQuery {
kind: 'kuery';
expression: string;
}

export const logFilterInitialState = {
export type FilterQuery = KueryFilterQuery;

export interface SerializedFilterQuery {
query: FilterQuery;
serializedQuery: string;
}

interface LogFilterBaseStateParams {
filterQuery: SerializedFilterQuery | null;
filterQueryDraft: KueryFilterQuery | null;
}

export const logFilterInitialState: LogFilterBaseStateParams = {
filterQuery: null,
filterQueryDraft: null,
};

interface LogFilterDerivatives {
isFilterQueryDraftValid: boolean;
filterQueryAsJson: SerializedFilterQuery['serializedQuery'] | null;
filterQuery: FilterQuery | null;
}

export type LogFilterStateParams = Omit<LogFilterBaseStateParams, 'filterQuery'> &
LogFilterDerivatives;

export interface LogFilterCallbacks {
setLogFilterQueryDraft: (payload: FilterQuery) => void;
applyLogFilterQuery: (payload: SerializedFilterQuery) => void;
}

const getDerivatives = (state: LogFilterBaseStateParams) => ({
get isFilterQueryDraftValid() {
const { filterQueryDraft } = state;
if (filterQueryDraft && filterQueryDraft.kind === 'kuery') {
try {
esKuery.fromKueryExpression(filterQueryDraft.expression);
} catch (err) {
return false;
}
}

return true;
},
get filterQueryAsJson() {
Zacqary marked this conversation as resolved.
Show resolved Hide resolved
const { filterQuery } = state;
return filterQuery ? filterQuery.serializedQuery : null;
},
get filterQuery() {
const { filterQuery } = state;
return filterQuery ? filterQuery.query : null;
},
});

export const useLogFilterState: () => [LogFilterStateParams, LogFilterCallbacks] = () => {
const [state, dispatch] = useReducer(logFilterStateReducer, logFilterInitialState);
Zacqary marked this conversation as resolved.
Show resolved Hide resolved

const callbacks = useMemo(
() => ({
setLogFilterQueryDraft: (payload: FilterQuery) =>
dispatch({ type: Action.SetDraftFilterQuery, payload }),

applyLogFilterQuery: (payload: SerializedFilterQuery) =>
dispatch({ type: Action.ApplyFilterQuery, payload }),
}),
[]
);

const derivatives = useMemo(() => getDerivatives(state), [state]);

return [{ ...state, ...derivatives }, callbacks];
Zacqary marked this conversation as resolved.
Show resolved Hide resolved
};

const logFilterStateReducer = (prevState: LogFilterBaseStateParams, action: ActionObj) => {
switch (action.type) {
case Action.SetDraftFilterQuery:
return { ...prevState, filterQueryDraft: action.payload };
case Action.ApplyFilterQuery:
return { ...prevState, filterQueryDraft: action.payload.query, filterQuery: action.payload };
default:
throw new Error();
}
};

export const LogFilterState = createContainer(useLogFilterState);
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@
import React, { useEffect, useContext } from 'react';

import { TimeKey } from '../../../../common/time';
import { withLogFilter } from '../with_log_filter';
import { withLogPosition } from '../with_log_position';
import { LogHighlightsState } from './log_highlights';

Expand Down Expand Up @@ -35,21 +34,8 @@ export const LogHighlightsPositionBridge = withLogPosition(
}
);

export const LogHighlightsFilterQueryBridge = withLogFilter(
({ serializedFilterQuery }: { serializedFilterQuery: string | null }) => {
const { setFilterQuery } = useContext(LogHighlightsState.Context);

useEffect(() => {
setFilterQuery(serializedFilterQuery);
}, [serializedFilterQuery]);

return null;
}
);

export const LogHighlightsBridge = ({ indexPattern }: { indexPattern: any }) => (
export const LogHighlightsBridge = () => (
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I guess we can get rid of this component altogether

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In #50398 we can get rid of it, the log position state still needs the bridge right now though

<>
<LogHighlightsPositionBridge />
<LogHighlightsFilterQueryBridge indexPattern={indexPattern} />
</>
);
Original file line number Diff line number Diff line change
Expand Up @@ -7,31 +7,30 @@
import { useContext } from 'react';
import { connect } from 'react-redux';

import { logFilterSelectors, logPositionSelectors, State } from '../../../store';
import { logPositionSelectors, State } from '../../../store';
import { RendererFunction } from '../../../utils/typed_react';
import { Source } from '../../source';
import { LogViewConfiguration } from '../log_view_configuration';
import { LogSummaryBuckets, useLogSummary } from './log_summary';
import { LogFilterState } from '../log_filter';

export const WithSummary = connect((state: State) => ({
visibleMidpointTime: logPositionSelectors.selectVisibleMidpointOrTargetTime(state),
filterQuery: logFilterSelectors.selectLogFilterQueryAsJson(state),
}))(
({
children,
filterQuery,
visibleMidpointTime,
}: {
children: RendererFunction<{
buckets: LogSummaryBuckets;
start: number | null;
end: number | null;
}>;
filterQuery: string | null;
visibleMidpointTime: number | null;
}) => {
const { intervalSize } = useContext(LogViewConfiguration.Context);
const { sourceId } = useContext(Source.Context);
const [{ filterQueryAsJson: filterQuery }] = useContext(LogFilterState.Context);

const { buckets, start, end } = useLogSummary(
sourceId,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,64 +4,59 @@
* you may not use this file except in compliance with the Elastic License.
*/

import React from 'react';
import { connect } from 'react-redux';

import React, { useContext } from 'react';
import { IIndexPattern } from 'src/plugins/data/public';
import { logFilterActions, logFilterSelectors, State } from '../../store';
import { FilterQuery } from '../../store/local/log_filter';
import { LogFilterState, LogFilterStateParams, FilterQuery } from './log_filter';

import { convertKueryToElasticSearchQuery } from '../../utils/kuery';
import { asChildFunctionRenderer } from '../../utils/typed_react';
import { bindPlainActionCreators } from '../../utils/typed_redux';
import { RendererFunction } from '../../utils/typed_react';
import { replaceStateKeyInQueryString, UrlStateContainer } from '../../utils/url_state';

interface WithLogFilterProps {
indexPattern: IIndexPattern;
children: RendererFunction<
LogFilterStateParams & {
applyFilterQuery: (query: FilterQuery) => void;
applyFilterQueryFromKueryExpression: (expression: string) => void;
setFilterQueryDraft: (expression: FilterQuery) => void;
setFilterQueryDraftFromKueryExpression: (expression: string) => void;
}
>;
}

export const withLogFilter = connect(
(state: State) => ({
filterQuery: logFilterSelectors.selectLogFilterQuery(state),
serializedFilterQuery: logFilterSelectors.selectLogFilterQueryAsJson(state),
filterQueryDraft: logFilterSelectors.selectLogFilterQueryDraft(state),
isFilterQueryDraftValid: logFilterSelectors.selectIsLogFilterQueryDraftValid(state),
}),
(dispatch, ownProps: WithLogFilterProps) =>
bindPlainActionCreators({
applyFilterQuery: (query: FilterQuery) =>
logFilterActions.applyLogFilterQuery({
query,
serializedQuery: convertKueryToElasticSearchQuery(
query.expression,
ownProps.indexPattern
),
}),
applyFilterQueryFromKueryExpression: (expression: string) =>
logFilterActions.applyLogFilterQuery({
query: {
kind: 'kuery',
expression,
},
serializedQuery: convertKueryToElasticSearchQuery(expression, ownProps.indexPattern),
}),
setFilterQueryDraft: logFilterActions.setLogFilterQueryDraft,
setFilterQueryDraftFromKueryExpression: (expression: string) =>
logFilterActions.setLogFilterQueryDraft({
export const WithLogFilter: React.FC<WithLogFilterProps> = ({ children, indexPattern }) => {
Zacqary marked this conversation as resolved.
Show resolved Hide resolved
const [logFilterState, logFilterCallbacks] = useContext(LogFilterState.Context);
return children({
...logFilterState,
applyFilterQuery: (query: FilterQuery) =>
logFilterCallbacks.applyLogFilterQuery({
query,
serializedQuery: convertKueryToElasticSearchQuery(query.expression, indexPattern),
}),
applyFilterQueryFromKueryExpression: (expression: string) =>
logFilterCallbacks.applyLogFilterQuery({
query: {
kind: 'kuery',
expression,
}),
})(dispatch)
);

export const WithLogFilter = asChildFunctionRenderer(withLogFilter);
},
serializedQuery: convertKueryToElasticSearchQuery(expression, indexPattern),
}),
setFilterQueryDraft: logFilterCallbacks.setLogFilterQueryDraft,
setFilterQueryDraftFromKueryExpression: (expression: string) =>
logFilterCallbacks.setLogFilterQueryDraft({
kind: 'kuery',
expression,
}),
});
};

/**
* Url State
*/

type LogFilterUrlState = ReturnType<typeof logFilterSelectors.selectLogFilterQuery>;
type LogFilterUrlState = LogFilterStateParams['filterQuery'];

type WithLogFilterUrlStateProps = WithLogFilterProps;
type WithLogFilterUrlStateProps = Omit<WithLogFilterProps, 'children'>;

export const WithLogFilterUrlState: React.FC<WithLogFilterUrlStateProps> = ({ indexPattern }) => (
<WithLogFilter indexPattern={indexPattern}>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ export const LogsPageLogsContent: React.FunctionComponent = () => {
const derivedIndexPattern = createDerivedIndexPattern('logs');
return (
<>
<LogHighlightsBridge indexPattern={derivedIndexPattern} />
<LogHighlightsBridge />
<WithLogFilterUrlState indexPattern={derivedIndexPattern} />
<WithLogPositionUrlState />
<WithLogMinimapUrlState />
Expand Down Expand Up @@ -132,12 +132,7 @@ export const LogsPageLogsContent: React.FunctionComponent = () => {
<WithSummary>
{({ buckets }) => (
<WithLogPosition>
{({
isAutoReloading,
jumpToTargetPosition,
visibleMidpointTime,
visibleTimeInterval,
}) => (
{({ jumpToTargetPosition, visibleMidpointTime, visibleTimeInterval }) => (
<WithStreamItems>
{({ isReloading }) => (
<LogMinimap
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ const LogEntriesStateProvider: React.FC = ({ children }) => {
const { timeKey, pagesBeforeStart, pagesAfterEnd, isAutoReloading } = useContext(
LogPositionState.Context
);
const { filterQuery } = useContext(LogFilterState.Context);
const [{ filterQueryAsJson: filterQuery }] = useContext(LogFilterState.Context);
const entriesProps = {
timeKey,
pagesBeforeStart,
Expand All @@ -35,7 +35,7 @@ const LogEntriesStateProvider: React.FC = ({ children }) => {
const LogHighlightsStateProvider: React.FC = ({ children }) => {
const { sourceId, version } = useContext(Source.Context);
const [{ entriesStart, entriesEnd }] = useContext(LogEntriesState.Context);
const { filterQuery } = useContext(LogFilterState.Context);
const [{ filterQueryAsJson: filterQuery }] = useContext(LogFilterState.Context);
const highlightsProps = {
sourceId,
sourceVersion: version,
Expand Down
1 change: 0 additions & 1 deletion x-pack/legacy/plugins/infra/public/store/actions.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@
*/

export {
logFilterActions,
logPositionActions,
waffleFilterActions,
waffleTimeActions,
Expand Down
1 change: 0 additions & 1 deletion x-pack/legacy/plugins/infra/public/store/local/actions.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@
* you may not use this file except in compliance with the Elastic License.
*/

export { logFilterActions } from './log_filter';
export { logPositionActions } from './log_position';
export { waffleFilterActions } from './waffle_filter';
export { waffleTimeActions } from './waffle_time';
Expand Down

This file was deleted.

11 changes: 0 additions & 11 deletions x-pack/legacy/plugins/infra/public/store/local/log_filter/index.ts

This file was deleted.

Loading