@@ -26,6 +31,11 @@ exports[`OverviewPageParsingErrorCallout renders without errors when an error wi
diff --git a/x-pack/legacy/plugins/uptime/public/components/functional/filter_group/filter_group.tsx b/x-pack/legacy/plugins/uptime/public/components/functional/filter_group/filter_group.tsx
index 351302fb38356..ff73554c8f07c 100644
--- a/x-pack/legacy/plugins/uptime/public/components/functional/filter_group/filter_group.tsx
+++ b/x-pack/legacy/plugins/uptime/public/components/functional/filter_group/filter_group.tsx
@@ -4,44 +4,21 @@
* you may not use this file except in compliance with the Elastic License.
*/
+import React from 'react';
import { EuiFilterGroup } from '@elastic/eui';
-import React, { useEffect } from 'react';
import { i18n } from '@kbn/i18n';
-import { connect } from 'react-redux';
import { FilterPopoverProps, FilterPopover } from './filter_popover';
import { FilterStatusButton } from './filter_status_button';
-import { OverviewFilters } from '../../../../common/runtime_types';
-import { fetchOverviewFilters, GetOverviewFiltersPayload } from '../../../state/actions';
-import { AppState } from '../../../state';
-import { useUrlParams } from '../../../hooks';
-import { parseFiltersMap } from './parse_filter_map';
+import { OverviewFilters } from '../../../../common/runtime_types/overview_filters';
-interface OwnProps {
- currentFilter: any;
- onFilterUpdate: any;
- dateRangeStart: string;
- dateRangeEnd: string;
- filters?: string;
- statusFilter?: string;
-}
-
-interface StoreProps {
- esKuery: string;
- lastRefresh: number;
+interface PresentationalComponentProps {
loading: boolean;
overviewFilters: OverviewFilters;
+ currentFilter: string;
+ onFilterUpdate: (filtersKuery: string) => void;
}
-interface DispatchProps {
- loadFilterGroup: typeof fetchOverviewFilters;
-}
-
-type Props = OwnProps & StoreProps & DispatchProps;
-
-type PresentationalComponentProps = Pick &
- Pick;
-
-export const PresentationalComponent: React.FC = ({
+export const FilterGroupComponent: React.FC = ({
currentFilter,
overviewFilters,
loading,
@@ -151,60 +128,3 @@ export const PresentationalComponent: React.FC = (
);
};
-
-export const Container: React.FC = ({
- currentFilter,
- esKuery,
- filters,
- loading,
- loadFilterGroup,
- dateRangeStart,
- dateRangeEnd,
- overviewFilters,
- statusFilter,
- onFilterUpdate,
-}: Props) => {
- const [getUrlParams] = useUrlParams();
- const { filters: urlFilters } = getUrlParams();
- useEffect(() => {
- const filterSelections = parseFiltersMap(urlFilters);
- loadFilterGroup({
- dateRangeStart,
- dateRangeEnd,
- locations: filterSelections.locations ?? [],
- ports: filterSelections.ports ?? [],
- schemes: filterSelections.schemes ?? [],
- search: esKuery,
- statusFilter,
- tags: filterSelections.tags ?? [],
- });
- }, [dateRangeStart, dateRangeEnd, esKuery, filters, statusFilter, urlFilters, loadFilterGroup]);
- return (
-
- );
-};
-
-const mapStateToProps = ({
- overviewFilters: { loading, filters },
- ui: { esKuery, lastRefresh },
-}: AppState): StoreProps => ({
- esKuery,
- overviewFilters: filters,
- lastRefresh,
- loading,
-});
-
-const mapDispatchToProps = (dispatch: any): DispatchProps => ({
- loadFilterGroup: (payload: GetOverviewFiltersPayload) => dispatch(fetchOverviewFilters(payload)),
-});
-
-export const FilterGroup = connect(
- // @ts-ignore connect is expecting null | undefined for some reason
- mapStateToProps,
- mapDispatchToProps
-)(Container);
diff --git a/x-pack/legacy/plugins/uptime/public/components/functional/filter_group/index.ts b/x-pack/legacy/plugins/uptime/public/components/functional/filter_group/index.ts
index 285972fb34eaa..2aae026144d8f 100644
--- a/x-pack/legacy/plugins/uptime/public/components/functional/filter_group/index.ts
+++ b/x-pack/legacy/plugins/uptime/public/components/functional/filter_group/index.ts
@@ -4,4 +4,4 @@
* you may not use this file except in compliance with the Elastic License.
*/
-export { FilterGroup } from './filter_group';
+export { FilterGroupComponent } from './filter_group';
diff --git a/x-pack/legacy/plugins/uptime/public/components/functional/index.ts b/x-pack/legacy/plugins/uptime/public/components/functional/index.ts
index b9f0014322062..6af17cfd67c46 100644
--- a/x-pack/legacy/plugins/uptime/public/components/functional/index.ts
+++ b/x-pack/legacy/plugins/uptime/public/components/functional/index.ts
@@ -7,9 +7,8 @@
export { DonutChart } from './charts/donut_chart';
export { EmptyState } from './empty_state';
export { MonitorStatusBar } from './monitor_status_details';
-export { FilterGroup } from './filter_group';
export { IntegrationLink } from './integration_link';
-export { KueryBar } from './kuery_bar';
+export { KueryBarComponent } from './kuery_bar/kuery_bar';
export { MonitorCharts } from './monitor_charts';
export { MonitorList } from './monitor_list';
export { OverviewPageParsingErrorCallout } from './overview_page_parsing_error_callout';
diff --git a/x-pack/legacy/plugins/uptime/public/components/functional/kuery_bar/index.tsx b/x-pack/legacy/plugins/uptime/public/components/functional/kuery_bar/kuery_bar.tsx
similarity index 91%
rename from x-pack/legacy/plugins/uptime/public/components/functional/kuery_bar/index.tsx
rename to x-pack/legacy/plugins/uptime/public/components/functional/kuery_bar/kuery_bar.tsx
index 679106f7e19b4..63c8885fe5864 100644
--- a/x-pack/legacy/plugins/uptime/public/components/functional/kuery_bar/index.tsx
+++ b/x-pack/legacy/plugins/uptime/public/components/functional/kuery_bar/kuery_bar.tsx
@@ -11,14 +11,12 @@ import styled from 'styled-components';
import { FormattedMessage } from '@kbn/i18n/react';
import { Typeahead } from './typeahead';
import { useUrlParams } from '../../../hooks';
-import { toStaticIndexPattern } from '../../../lib/helper';
import {
esKuery,
IIndexPattern,
autocomplete,
DataPublicPluginStart,
} from '../../../../../../../../src/plugins/data/public';
-import { useIndexPattern } from '../../../hooks';
const Container = styled.div`
margin-bottom: 10px;
@@ -36,20 +34,29 @@ function convertKueryToEsQuery(kuery: string, indexPattern: IIndexPattern) {
interface Props {
autocomplete: DataPublicPluginStart['autocomplete'];
+ loadIndexPattern: any;
+ indexPattern: any;
}
-export function KueryBar({ autocomplete: autocompleteService }: Props) {
+export function KueryBarComponent({
+ autocomplete: autocompleteService,
+ loadIndexPattern,
+ indexPattern,
+}: Props) {
+ useEffect(() => {
+ if (!indexPattern) {
+ loadIndexPattern();
+ }
+ }, [indexPattern, loadIndexPattern]);
+
const [state, setState] = useState({
suggestions: [],
isLoadingIndexPattern: true,
});
- const [indexPattern, setIndexPattern] = useState(undefined);
const [isLoadingIndexPattern, setIsLoadingIndexPattern] = useState(true);
const [isLoadingSuggestions, setIsLoadingSuggestions] = useState(false);
let currentRequestCheck: string;
- useIndexPattern((result: any) => setIndexPattern(toStaticIndexPattern(result)));
-
useEffect(() => {
if (indexPattern !== undefined) {
setIsLoadingIndexPattern(false);
diff --git a/x-pack/legacy/plugins/uptime/public/components/functional/overview_page_parsing_error_callout.tsx b/x-pack/legacy/plugins/uptime/public/components/functional/overview_page_parsing_error_callout.tsx
index 3d38ce42dd1f0..b71a4f2f8646a 100644
--- a/x-pack/legacy/plugins/uptime/public/components/functional/overview_page_parsing_error_callout.tsx
+++ b/x-pack/legacy/plugins/uptime/public/components/functional/overview_page_parsing_error_callout.tsx
@@ -26,6 +26,7 @@ export const OverviewPageParsingErrorCallout = ({
})}
color="danger"
iconType="alert"
+ style={{ width: '100%' }}
>
{
+ // 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
+ // and JSON.parse and stringifyKueries can have hard time parsing
+ // all possible scenarios, we can safely ignore if we can't parse them
+ try {
+ if (urlFilters !== '') {
+ const filterMap = new Map>(JSON.parse(urlFilters));
+ kueryString = stringifyKueries(filterMap);
+ }
+ } catch {
+ kueryString = '';
+ }
+ return kueryString;
+};
+
+export const useUpdateKueryString = (
+ indexPattern: IIndexPattern,
+ filterQueryString = '',
+ urlFilters: string
+): [string?, Error?] => {
+ const kueryString = getKueryString(urlFilters);
+
+ const combinedFilterString = combineFiltersAndUserSearch(filterQueryString, kueryString);
+
+ let esFilters: string | undefined;
+ // this try catch is necessary to evaluate user input in kuery bar,
+ // this error will be actually shown in UI for user to see
+ try {
+ if ((filterQueryString || urlFilters) && indexPattern) {
+ const ast = esKuery.fromKueryExpression(combinedFilterString);
+
+ const elasticsearchQuery = esKuery.toElasticsearchQuery(ast, indexPattern);
+
+ esFilters = JSON.stringify(elasticsearchQuery);
+
+ updateEsQueryForFilterGroup(filterQueryString, indexPattern);
+ }
+ return [esFilters];
+ } catch (err) {
+ return [urlFilters, err];
+ }
+};
diff --git a/x-pack/legacy/plugins/uptime/public/hooks/use_index_pattern.ts b/x-pack/legacy/plugins/uptime/public/hooks/use_index_pattern.ts
deleted file mode 100644
index f2b586b27dba6..0000000000000
--- a/x-pack/legacy/plugins/uptime/public/hooks/use_index_pattern.ts
+++ /dev/null
@@ -1,21 +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 { useEffect, Dispatch } from 'react';
-import { useKibana } from '../../../../../../src/plugins/kibana_react/public';
-
-export const useIndexPattern = (setIndexPattern: Dispatch) => {
- const core = useKibana();
- useEffect(() => {
- const fetch = core.services.http?.fetch;
- async function getIndexPattern() {
- if (!fetch) throw new Error('Http core services are not defined');
- setIndexPattern(await fetch('/api/uptime/index_pattern', { method: 'GET' }));
- }
- getIndexPattern();
- // eslint-disable-next-line react-hooks/exhaustive-deps
- }, [core.services.http]);
-};
diff --git a/x-pack/legacy/plugins/uptime/public/lib/helper/__tests__/__snapshots__/to_static_index_pattern.test.ts.snap b/x-pack/legacy/plugins/uptime/public/lib/helper/__tests__/__snapshots__/to_static_index_pattern.test.ts.snap
deleted file mode 100644
index bc02e1054b6f7..0000000000000
--- a/x-pack/legacy/plugins/uptime/public/lib/helper/__tests__/__snapshots__/to_static_index_pattern.test.ts.snap
+++ /dev/null
@@ -1,19 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`toStaticIndexPattern provides the required fields 1`] = `
-Object {
- "attributes": Object {
- "fields": "[{\\"name\\":\\"@timestamp\\",\\"type\\":\\"date\\",\\"scripted\\":false,\\"searchable\\":true}]",
- },
- "fields": Array [
- Object {
- "name": "@timestamp",
- "scripted": false,
- "searchable": true,
- "type": "date",
- },
- ],
- "id": "foo",
- "title": "foo",
-}
-`;
diff --git a/x-pack/legacy/plugins/uptime/public/lib/helper/__tests__/to_static_index_pattern.test.ts b/x-pack/legacy/plugins/uptime/public/lib/helper/__tests__/to_static_index_pattern.test.ts
deleted file mode 100644
index c8015a678c726..0000000000000
--- a/x-pack/legacy/plugins/uptime/public/lib/helper/__tests__/to_static_index_pattern.test.ts
+++ /dev/null
@@ -1,19 +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 { toStaticIndexPattern } from '../to_static_index_pattern';
-
-describe('toStaticIndexPattern', () => {
- it('provides the required fields', () => {
- const pattern = {
- attributes: {
- fields: '[{"name":"@timestamp","type":"date","scripted":false,"searchable":true}]',
- },
- id: 'foo',
- };
- expect(toStaticIndexPattern(pattern)).toMatchSnapshot();
- });
-});
diff --git a/x-pack/legacy/plugins/uptime/public/lib/helper/combine_filters_and_user_search.ts b/x-pack/legacy/plugins/uptime/public/lib/helper/combine_filters_and_user_search.ts
index f3dfbb7d3b529..45aff24f0449e 100644
--- a/x-pack/legacy/plugins/uptime/public/lib/helper/combine_filters_and_user_search.ts
+++ b/x-pack/legacy/plugins/uptime/public/lib/helper/combine_filters_and_user_search.ts
@@ -5,6 +5,9 @@
*/
export const combineFiltersAndUserSearch = (filters: string, search: string) => {
+ if (!filters && !search) {
+ return '';
+ }
if (!filters) return search;
if (!search) return filters;
return `(${filters}) and (${search})`;
diff --git a/x-pack/legacy/plugins/uptime/public/lib/helper/index.ts b/x-pack/legacy/plugins/uptime/public/lib/helper/index.ts
index ced06ce7a1d7b..ef191ce32e532 100644
--- a/x-pack/legacy/plugins/uptime/public/lib/helper/index.ts
+++ b/x-pack/legacy/plugins/uptime/public/lib/helper/index.ts
@@ -12,5 +12,4 @@ export { getChartDateLabel } from './charts';
export { parameterizeValues } from './parameterize_values';
export { seriesHasDownValues } from './series_has_down_values';
export { stringifyKueries } from './stringify_kueries';
-export { toStaticIndexPattern } from './to_static_index_pattern';
export { UptimeUrlParams, getSupportedUrlParams } from './url_params';
diff --git a/x-pack/legacy/plugins/uptime/public/lib/helper/to_static_index_pattern.ts b/x-pack/legacy/plugins/uptime/public/lib/helper/to_static_index_pattern.ts
deleted file mode 100644
index b8a12c1e578e3..0000000000000
--- a/x-pack/legacy/plugins/uptime/public/lib/helper/to_static_index_pattern.ts
+++ /dev/null
@@ -1,11 +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.
- */
-
-export const toStaticIndexPattern = (indexPattern: any) => ({
- ...indexPattern,
- fields: JSON.parse(indexPattern.attributes.fields),
- title: indexPattern.id,
-});
diff --git a/x-pack/legacy/plugins/uptime/public/pages/index.ts b/x-pack/legacy/plugins/uptime/public/pages/index.ts
index a96be42eb0dee..17f083ca023ed 100644
--- a/x-pack/legacy/plugins/uptime/public/pages/index.ts
+++ b/x-pack/legacy/plugins/uptime/public/pages/index.ts
@@ -5,6 +5,6 @@
*/
export { MonitorPage } from './monitor';
-export { OverviewPage } from './overview';
export { NotFoundPage } from './not_found';
export { PageHeader } from './page_header';
+export { OverviewPage } from '../components/connected/';
diff --git a/x-pack/legacy/plugins/uptime/public/pages/overview.tsx b/x-pack/legacy/plugins/uptime/public/pages/overview.tsx
index b9c2284edb0cf..0f6195c5f4c66 100644
--- a/x-pack/legacy/plugins/uptime/public/pages/overview.tsx
+++ b/x-pack/legacy/plugins/uptime/public/pages/overview.tsx
@@ -5,30 +5,28 @@
*/
import { EuiFlexGroup, EuiFlexItem, EuiSpacer } from '@elastic/eui';
-import React, { Fragment, useContext, useState } from 'react';
+import React, { useContext } from 'react';
import styled from 'styled-components';
import {
EmptyState,
- FilterGroup,
- KueryBar,
MonitorList,
OverviewPageParsingErrorCallout,
StatusPanel,
} from '../components/functional';
import { UMUpdateBreadcrumbs } from '../lib/lib';
-import { useIndexPattern, useUrlParams, useUptimeTelemetry, UptimePage } from '../hooks';
+import { useUrlParams, useUptimeTelemetry, UptimePage } from '../hooks';
import { stringifyUrlParams } from '../lib/helper/stringify_url_params';
import { useTrackPageview } from '../../../infra/public';
-import { combineFiltersAndUserSearch, stringifyKueries, toStaticIndexPattern } from '../lib/helper';
-import { store } from '../state';
-import { setEsKueryString } from '../state/actions';
import { PageHeader } from './page_header';
-import { esKuery, DataPublicPluginStart } from '../../../../../../src/plugins/data/public';
-import { UptimeThemeContext } from '../contexts/uptime_theme_context';
+import { DataPublicPluginStart, IIndexPattern } from '../../../../../../src/plugins/data/public';
+import { UptimeThemeContext } from '../contexts';
+import { FilterGroup, KueryBar } from '../components/connected';
+import { useUpdateKueryString } from '../hooks';
interface OverviewPageProps {
autocomplete: DataPublicPluginStart['autocomplete'];
setBreadcrumbs: UMUpdateBreadcrumbs;
+ indexPattern: IIndexPattern;
}
type Props = OverviewPageProps;
@@ -42,72 +40,37 @@ const EuiFlexItemStyled = styled(EuiFlexItem)`
}
`;
-export const OverviewPage = ({ autocomplete, setBreadcrumbs }: Props) => {
+export const OverviewPageComponent = ({ autocomplete, setBreadcrumbs, indexPattern }: Props) => {
const { colors } = useContext(UptimeThemeContext);
- const [getUrlParams, updateUrl] = useUrlParams();
+ const [getUrlParams] = useUrlParams();
const { absoluteDateRangeStart, absoluteDateRangeEnd, ...params } = getUrlParams();
const {
dateRangeStart,
dateRangeEnd,
- search,
pagination,
statusFilter,
+ search,
filters: urlFilters,
} = params;
- const [indexPattern, setIndexPattern] = useState(undefined);
+
useUptimeTelemetry(UptimePage.Overview);
- useIndexPattern(setIndexPattern);
useTrackPageview({ app: 'uptime', path: 'overview' });
useTrackPageview({ app: 'uptime', path: 'overview', delay: 15000 });
- let error: any;
- let kueryString: string = '';
- try {
- if (urlFilters !== '') {
- const filterMap = new Map>(JSON.parse(urlFilters));
- kueryString = stringifyKueries(filterMap);
- }
- } catch {
- kueryString = '';
- }
-
- const filterQueryString = search || '';
- let filters: any | undefined;
- try {
- if (filterQueryString || urlFilters) {
- if (indexPattern) {
- const staticIndexPattern = toStaticIndexPattern(indexPattern);
- const combinedFilterString = combineFiltersAndUserSearch(filterQueryString, kueryString);
- const ast = esKuery.fromKueryExpression(combinedFilterString);
- const elasticsearchQuery = esKuery.toElasticsearchQuery(ast, staticIndexPattern);
- filters = JSON.stringify(elasticsearchQuery);
- const searchDSL: string = filterQueryString
- ? JSON.stringify(
- esKuery.toElasticsearchQuery(
- esKuery.fromKueryExpression(filterQueryString),
- staticIndexPattern
- )
- )
- : '';
- store.dispatch(setEsKueryString(searchDSL));
- }
- }
- } catch (e) {
- error = e;
- }
+ const [esFilters, error] = useUpdateKueryString(indexPattern, search, urlFilters);
const sharedProps = {
dateRangeStart,
dateRangeEnd,
- filters,
statusFilter,
+ filters: esFilters,
};
const linkParameters = stringifyUrlParams(params, true);
return (
-
+ <>
@@ -115,15 +78,7 @@ export const OverviewPage = ({ autocomplete, setBreadcrumbs }: Props) => {