From 3cb85d407027a118103ff02c90747673529f1af1 Mon Sep 17 00:00:00 2001 From: Shahzad Date: Wed, 5 Feb 2020 13:53:34 +0100 Subject: [PATCH] [Uptime] Kuery Bar Filters break overview page (#56793) * update filter * fix status panel not using filter group --- .../components/connected/charts/ping_histogram.tsx | 9 +++++---- .../connected/charts/snapshot_container.tsx | 11 +++++++---- .../connected/pages/overview_container.ts | 11 ++++++++++- .../uptime/public/hooks/update_kuery_string.ts | 14 -------------- .../plugins/uptime/public/pages/overview.tsx | 14 ++++++++++++-- .../plugins/uptime/public/state/selectors/index.ts | 7 ++++++- 6 files changed, 40 insertions(+), 26 deletions(-) diff --git a/x-pack/legacy/plugins/uptime/public/components/connected/charts/ping_histogram.tsx b/x-pack/legacy/plugins/uptime/public/components/connected/charts/ping_histogram.tsx index cbdd921a36e81b..50f91be4ff09f3 100644 --- a/x-pack/legacy/plugins/uptime/public/components/connected/charts/ping_histogram.tsx +++ b/x-pack/legacy/plugins/uptime/public/components/connected/charts/ping_histogram.tsx @@ -19,7 +19,7 @@ import { useUrlParams } from '../../../hooks'; type Props = ResponsiveWrapperProps & Pick & - DispatchProps & { lastRefresh: number; monitorId?: string }; + DispatchProps & { lastRefresh: number; monitorId?: string; esKuery?: string }; const PingHistogramContainer: React.FC = ({ data, @@ -28,6 +28,7 @@ const PingHistogramContainer: React.FC = ({ lastRefresh, height, loading, + esKuery, }) => { const [getUrlParams] = useUrlParams(); const { @@ -36,12 +37,11 @@ const PingHistogramContainer: React.FC = ({ dateRangeStart: dateStart, dateRangeEnd: dateEnd, statusFilter, - filters, } = getUrlParams(); useEffect(() => { - loadData({ monitorId, dateStart, dateEnd, statusFilter, filters }); - }, [loadData, dateStart, dateEnd, monitorId, filters, statusFilter, lastRefresh]); + loadData({ monitorId, dateStart, dateEnd, statusFilter, filters: esKuery }); + }, [loadData, dateStart, dateEnd, monitorId, statusFilter, lastRefresh, esKuery]); return ( = ({ height, lastRefresh, loading, + esKuery, loadSnapshotCount, }: Props) => { const [getUrlParams] = useUrlParams(); - const { dateRangeStart, dateRangeEnd, statusFilter, filters } = getUrlParams(); + const { dateRangeStart, dateRangeEnd, statusFilter } = getUrlParams(); useEffect(() => { - loadSnapshotCount(dateRangeStart, dateRangeEnd, filters, statusFilter); - }, [dateRangeStart, dateRangeEnd, filters, lastRefresh, loadSnapshotCount, statusFilter]); + loadSnapshotCount(dateRangeStart, dateRangeEnd, esKuery, statusFilter); + }, [dateRangeStart, dateRangeEnd, esKuery, lastRefresh, loadSnapshotCount, statusFilter]); return ; }; @@ -66,11 +68,12 @@ export const Container: React.FC = ({ */ const mapStateToProps = ({ snapshot: { count, loading }, - ui: { lastRefresh }, + ui: { lastRefresh, esKuery }, }: AppState): StoreProps => ({ count, lastRefresh, loading, + esKuery, }); /** diff --git a/x-pack/legacy/plugins/uptime/public/components/connected/pages/overview_container.ts b/x-pack/legacy/plugins/uptime/public/components/connected/pages/overview_container.ts index 406fab8f5bf010..cbd1fae77c5183 100644 --- a/x-pack/legacy/plugins/uptime/public/components/connected/pages/overview_container.ts +++ b/x-pack/legacy/plugins/uptime/public/components/connected/pages/overview_container.ts @@ -8,7 +8,16 @@ import { connect } from 'react-redux'; import { OverviewPageComponent } from '../../../pages/overview'; import { selectIndexPattern } from '../../../state/selectors'; import { AppState } from '../../../state'; +import { setEsKueryString } from '../../../state/actions'; + +interface DispatchProps { + setEsKueryFilters: typeof setEsKueryString; +} + +const mapDispatchToProps = (dispatch: any): DispatchProps => ({ + setEsKueryFilters: (esFilters: string) => dispatch(setEsKueryString(esFilters)), +}); const mapStateToProps = (state: AppState) => ({ indexPattern: selectIndexPattern(state) }); -export const OverviewPage = connect(mapStateToProps)(OverviewPageComponent); +export const OverviewPage = connect(mapStateToProps, mapDispatchToProps)(OverviewPageComponent); diff --git a/x-pack/legacy/plugins/uptime/public/hooks/update_kuery_string.ts b/x-pack/legacy/plugins/uptime/public/hooks/update_kuery_string.ts index 8c9eec3abe2239..8a4ae01a72b4be 100644 --- a/x-pack/legacy/plugins/uptime/public/hooks/update_kuery_string.ts +++ b/x-pack/legacy/plugins/uptime/public/hooks/update_kuery_string.ts @@ -6,20 +6,8 @@ import { combineFiltersAndUserSearch, stringifyKueries } from '../lib/helper'; import { esKuery } from '../../../../../../src/plugins/data/common/es_query'; -import { store } from '../state'; -import { setEsKueryString } from '../state/actions'; import { IIndexPattern } from '../../../../../../src/plugins/data/common/index_patterns'; -const updateEsQueryForFilterGroup = (filterQueryString: string, indexPattern: IIndexPattern) => { - // Update EsQuery in Redux to be used in FilterGroup - const searchDSL: string = filterQueryString - ? JSON.stringify( - esKuery.toElasticsearchQuery(esKuery.fromKueryExpression(filterQueryString), indexPattern) - ) - : ''; - store.dispatch(setEsKueryString(searchDSL)); -}; - const getKueryString = (urlFilters: string): string => { let kueryString = ''; // We are using try/catch here because this is user entered value @@ -56,8 +44,6 @@ export const useUpdateKueryString = ( esFilters = JSON.stringify(elasticsearchQuery); } - updateEsQueryForFilterGroup(filterQueryString, indexPattern); - return [esFilters]; } catch (err) { return [urlFilters, err]; diff --git a/x-pack/legacy/plugins/uptime/public/pages/overview.tsx b/x-pack/legacy/plugins/uptime/public/pages/overview.tsx index df6ffba6154e5c..ce5fb619aca025 100644 --- a/x-pack/legacy/plugins/uptime/public/pages/overview.tsx +++ b/x-pack/legacy/plugins/uptime/public/pages/overview.tsx @@ -5,7 +5,7 @@ */ import { EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui'; -import React, { useContext } from 'react'; +import React, { useContext, useEffect } from 'react'; import styled from 'styled-components'; import { EmptyState, @@ -27,6 +27,7 @@ interface OverviewPageProps { autocomplete: DataPublicPluginStart['autocomplete']; setBreadcrumbs: UMUpdateBreadcrumbs; indexPattern: IIndexPattern; + setEsKueryFilters: (esFilters: string) => void; } type Props = OverviewPageProps; @@ -40,7 +41,12 @@ const EuiFlexItemStyled = styled(EuiFlexItem)` } `; -export const OverviewPageComponent = ({ autocomplete, setBreadcrumbs, indexPattern }: Props) => { +export const OverviewPageComponent = ({ + autocomplete, + setBreadcrumbs, + indexPattern, + setEsKueryFilters, +}: Props) => { const { colors } = useContext(UptimeThemeContext); const [getUrlParams] = useUrlParams(); const { absoluteDateRangeStart, absoluteDateRangeEnd, ...params } = getUrlParams(); @@ -60,6 +66,10 @@ export const OverviewPageComponent = ({ autocomplete, setBreadcrumbs, indexPatte const [esFilters, error] = useUpdateKueryString(indexPattern, search, urlFilters); + useEffect(() => { + setEsKueryFilters(esFilters ?? ''); + }, [esFilters, setEsKueryFilters]); + const sharedProps = { dateRangeStart, dateRangeEnd, diff --git a/x-pack/legacy/plugins/uptime/public/state/selectors/index.ts b/x-pack/legacy/plugins/uptime/public/state/selectors/index.ts index fe6a7a1b7eade5..25498cc0cb0eea 100644 --- a/x-pack/legacy/plugins/uptime/public/state/selectors/index.ts +++ b/x-pack/legacy/plugins/uptime/public/state/selectors/index.ts @@ -34,5 +34,10 @@ export const selectIndexPattern = ({ indexPattern }: AppState) => { }; export const selectPingHistogram = ({ ping, ui }: AppState) => { - return { data: ping.pingHistogram, loading: ping.loading, lastRefresh: ui.lastRefresh }; + return { + data: ping.pingHistogram, + loading: ping.loading, + lastRefresh: ui.lastRefresh, + esKuery: ui.esKuery, + }; };