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 all 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
Original file line number Diff line number Diff line change
Expand Up @@ -4,23 +4,5 @@
* you may not use this file except in compliance with the Elastic License.
*/

import { useContext } from 'react';
import createContainer from 'constate';
import { ReduxStateContext } from '../../../utils/redux_context';
import { logFilterSelectors as logFilterReduxSelectors } from '../../../store/local/selectors';

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

export interface LogFilterStateParams {
filterQuery: string | null;
}

export const logFilterInitialState = {
filterQuery: null,
};

export const LogFilterState = createContainer(useLogFilterState);
export * from './log_filter_state';
export * from './with_log_filter_url_state';
Original file line number Diff line number Diff line change
@@ -0,0 +1,101 @@
/*
* 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 { useState, useMemo } from 'react';
import createContainer from 'constate';
import { IIndexPattern } from 'src/plugins/data/public';
import { esKuery } from '../../../../../../../../src/plugins/data/public';
import { convertKueryToElasticSearchQuery } from '../../../utils/kuery';

export interface KueryFilterQuery {
kind: 'kuery';
expression: string;
}

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

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

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

export type LogFilterStateParams = Omit<LogFilterInternalStateParams, 'filterQuery'> & {
filterQuery: SerializedFilterQuery['serializedQuery'] | null;
filterQueryAsKuery: SerializedFilterQuery['query'] | null;
isFilterQueryDraftValid: boolean;
};
export interface LogFilterCallbacks {
setLogFilterQueryDraft: (expression: string) => void;
applyLogFilterQuery: (expression: string) => void;
}

export const useLogFilterState: (props: {
indexPattern: IIndexPattern;
}) => LogFilterStateParams & LogFilterCallbacks = ({ indexPattern }) => {
const [state, setState] = useState(logFilterInitialState);
const { filterQuery, filterQueryDraft } = state;

const setLogFilterQueryDraft = useMemo(() => {
const setDraft = (payload: KueryFilterQuery) =>
setState(prevState => ({ ...prevState, filterQueryDraft: payload }));
return (expression: string) =>
setDraft({
kind: 'kuery',
expression,
});
}, []);
const applyLogFilterQuery = useMemo(() => {
const applyQuery = (payload: SerializedFilterQuery) =>
setState(prevState => ({
...prevState,
filterQueryDraft: payload.query,
filterQuery: payload,
}));
return (expression: string) =>
applyQuery({
query: {
kind: 'kuery',
expression,
},
serializedQuery: convertKueryToElasticSearchQuery(expression, indexPattern),
});
}, [indexPattern]);

const isFilterQueryDraftValid = useMemo(() => {
if (filterQueryDraft?.kind === 'kuery') {
try {
esKuery.fromKueryExpression(filterQueryDraft.expression);
} catch (err) {
return false;
}
}

return true;
}, [filterQueryDraft]);

const serializedFilterQuery = useMemo(() => (filterQuery ? filterQuery.serializedQuery : null), [
filterQuery,
]);

return {
...state,
filterQueryAsKuery: state.filterQuery ? state.filterQuery.query : null,
filterQuery: serializedFilterQuery,
isFilterQueryDraftValid,
setLogFilterQueryDraft,
applyLogFilterQuery,
};
};

export const LogFilterState = createContainer(useLogFilterState);
weltenwort marked this conversation as resolved.
Show resolved Hide resolved
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
/*
* 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 = () => {
Zacqary marked this conversation as resolved.
Show resolved Hide resolved
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,
});
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, setFilterQuery]);

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 { filterQuery } = useContext(LogFilterState.Context);

const { buckets, start, end } = useLogSummary(
sourceId,
Expand Down
100 changes: 0 additions & 100 deletions x-pack/legacy/plugins/infra/public/containers/logs/with_log_filter.tsx

This file was deleted.

Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import compose from 'lodash/fp/compose';
import React from 'react';
import { match as RouteMatch, Redirect, RouteComponentProps } from 'react-router-dom';

import { replaceLogFilterInQueryString } from '../../containers/logs/with_log_filter';
import { replaceLogFilterInQueryString } from '../../containers/logs/log_filter';
import { replaceLogPositionInQueryString } from '../../containers/logs/with_log_position';
import { replaceSourceIdInQueryString } from '../../containers/source_id';
import { getFilterFromLocation, getTimeFromLocation } from './query_params';
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import React from 'react';
import { Redirect, RouteComponentProps } from 'react-router-dom';

import { LoadingPage } from '../../components/loading_page';
import { replaceLogFilterInQueryString } from '../../containers/logs/with_log_filter';
import { replaceLogFilterInQueryString } from '../../containers/logs/log_filter';
import { replaceLogPositionInQueryString } from '../../containers/logs/with_log_position';
import { replaceSourceIdInQueryString } from '../../containers/source_id';
import { InfraNodeType, SourceConfigurationFields } from '../../graphql/types';
Expand Down
Loading