[Uptime] Kuery Bar Filters break overview page (#56793)

* update filter * fix status panel not using filter group
elastic · Feb 5, 2020 · 3cb85d4 · 3cb85d4
1 parent a0b73cf
commit 3cb85d4
Show file tree

Hide file tree

Showing 6 changed files with 40 additions and 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
@@ -19,7 +19,7 @@ import { useUrlParams } from '../../../hooks';
 
 type Props = ResponsiveWrapperProps &
   Pick<PingHistogramComponentProps, 'height' | 'data' | 'loading'> &
-  DispatchProps & { lastRefresh: number; monitorId?: string };
+  DispatchProps & { lastRefresh: number; monitorId?: string; esKuery?: string };
 
 const PingHistogramContainer: React.FC<Props> = ({
   data,
@@ -28,6 +28,7 @@ const PingHistogramContainer: React.FC<Props> = ({
   lastRefresh,
   height,
   loading,
+  esKuery,
 }) => {
   const [getUrlParams] = useUrlParams();
   const {
@@ -36,12 +37,11 @@ const PingHistogramContainer: React.FC<Props> = ({
     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 (
     <PingHistogramComponent
       data={data}
@@ -57,6 +57,7 @@ interface StateProps {
   data: HistogramResult | null;
   loading: boolean;
   lastRefresh: number;
+  esKuery: string;
 }
 
 interface DispatchProps {

diff --git a/x-pack/legacy/plugins/uptime/public/components/connected/charts/snapshot_container.tsx b/x-pack/legacy/plugins/uptime/public/components/connected/charts/snapshot_container.tsx
@@ -29,6 +29,7 @@ interface StoreProps {
   count: SnapshotType;
   lastRefresh: number;
   loading: boolean;
+  esKuery: string;
 }
 
 /**
@@ -49,14 +50,15 @@ export const Container: React.FC<Props> = ({
   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 <SnapshotComponent count={count} height={height} loading={loading} />;
 };
 
@@ -66,11 +68,12 @@ export const Container: React.FC<Props> = ({
  */
 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
@@ -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
@@ -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
@@ -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
@@ -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,
+  };
 };