refactor index pattern state

x-pack/legacy/plugins/uptime/public/lib/helper/to_static_index_pattern.ts → x-pack/legacy/plugins/uptime/public/components/connected/index.ts

@@ -4,8 +4,5 @@
  * 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,
-});
+export * from './kuerybar/kuery_bar_container';
+export * from './pages/overview_container';

x-pack/legacy/plugins/uptime/public/components/connected/kuerybar/kuery_bar_container.tsx

@@ -0,0 +1,21 @@
+/*
+ * 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 { connect } from 'react-redux';
+import { AppState } from '../../../state';
+import { selectIndexPattern } from '../../../state/selectors';
+import { getIndexPattern } from '../../../state/actions';
+import { KueryBarComponent } from '../../functional';
+
+const mapStateToProps = (state: AppState) => ({ indexPattern: selectIndexPattern(state) });
+
+const mapDispatchToProps = (dispatch: any) => ({
+ loadIndexPattern: () => {
+ dispatch(getIndexPattern({}));
+ },
+});
+
+export const KueryBar = connect(mapStateToProps, mapDispatchToProps)(KueryBarComponent);

x-pack/legacy/plugins/uptime/public/components/connected/pages/overview_container.ts

@@ -0,0 +1,14 @@
+/*
+ * 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 { connect } from 'react-redux';
+import { OverviewPageComponent } from '../../../pages/overview';
+import { selectIndexPattern } from '../../../state/selectors';
+import { AppState } from '../../../state';
+
+const mapStateToProps = (state: AppState) => ({ indexPattern: selectIndexPattern(state) });
+
+export const OverviewPage = connect(mapStateToProps)(OverviewPageComponent);

x-pack/legacy/plugins/uptime/public/components/functional/index.ts

@@ -9,7 +9,7 @@ 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';

x-pack/legacy/plugins/uptime/public/components/functional/kuery_bar/index.tsx → 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<State>({
  suggestions: [],
  isLoadingIndexPattern: true,
  });
- const [indexPattern, setIndexPattern] = useState<any | undefined>(undefined);
  const [isLoadingIndexPattern, setIsLoadingIndexPattern] = useState<boolean>(true);
  const [isLoadingSuggestions, setIsLoadingSuggestions] = useState<boolean>(false);
  let currentRequestCheck: string;
 
- useIndexPattern((result: any) => setIndexPattern(toStaticIndexPattern(result)));
-
  useEffect(() => {
  if (indexPattern !== undefined) {
  setIsLoadingIndexPattern(false);

x-pack/legacy/plugins/uptime/public/hooks/index.ts

@@ -5,5 +5,5 @@
  */
 
 export { useUrlParams } from './use_url_params';
-export { useIndexPattern } from './use_index_pattern';
 export * from './use_telemetry';
+export * from './update_kuery_string';

x-pack/legacy/plugins/uptime/public/hooks/update_kuery_string.ts

@@ -0,0 +1,50 @@
+/*
+ * 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 { combineFiltersAndUserSearch, stringifyKueries } from '../lib/helper';
+import { esKuery } from '../../../../../../src/plugins/data/common/es_query';
+import { store } from '../state';
+import { setEsKueryString } from '../state/actions';
+
+export const useUpdateKueryString = (indexPattern: any, search: string, urlFilters: string) => {
+ let error: any;
+ let kueryString: string = '';
+ try {
+ if (urlFilters !== '') {
+ const filterMap = new Map<string, Array<string | number>>(JSON.parse(urlFilters));
+ kueryString = stringifyKueries(filterMap);
+ }
+ } catch {
+ kueryString = '';
+ }
+
+ const filterQueryString = search || '';
+ let filters: any | undefined;
+ try {
+ if (filterQueryString || urlFilters) {
+ if (indexPattern) {
+ const staticIndexPattern = 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));
+ }
+ }
+ return [filters, error];
+ } catch (e) {
+ error = e;
+ return [urlFilters, error];
+ }
+};

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';

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/';

x-pack/legacy/plugins/uptime/public/pages/overview.tsx

@@ -5,30 +5,29 @@
  */
 
 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 } from '../../../../../../src/plugins/data/public';
+import { UptimeThemeContext } from '../contexts';
+import { KueryBar } from '../components/connected';
+import { useUpdateKueryString } from '../hooks';
 
 interface OverviewPageProps {
  autocomplete: DataPublicPluginStart['autocomplete'];
  setBreadcrumbs: UMUpdateBreadcrumbs;
+ indexPattern: any;
 }
 
 type Props = OverviewPageProps;
@@ -42,60 +41,25 @@ 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 { absoluteDateRangeStart, absoluteDateRangeEnd, ...params } = getUrlParams();
  const {
  dateRangeStart,
  dateRangeEnd,
- search,
  pagination,
  statusFilter,
+ search,
  filters: urlFilters,
  } = params;
- const [indexPattern, setIndexPattern] = useState<any>(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<string, Array<string | number>>(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 [filters, error] = useUpdateKueryString(indexPattern, search, urlFilters);
 
  const sharedProps = {
  dateRangeStart,
@@ -107,7 +71,7 @@ export const OverviewPage = ({ autocomplete, setBreadcrumbs }: Props) => {
  const linkParameters = stringifyUrlParams(params, true);
 
  return (
- <Fragment>
+ <>
  <PageHeader setBreadcrumbs={setBreadcrumbs} />
  <EmptyState implementsCustomErrorState={true} variables={{}}>
  <EuiFlexGroup gutterSize="xs" wrap responsive>
@@ -117,9 +81,9 @@ export const OverviewPage = ({ autocomplete, setBreadcrumbs }: Props) => {
  <EuiFlexItemStyled grow={true}>
  <FilterGroup
  {...sharedProps}
- currentFilter={urlFilters}
+ currentFilter={filters}
  onFilterUpdate={(filtersKuery: string) => {
- if (urlFilters !== filtersKuery) {
+ if (filters !== filtersKuery) {
  updateUrl({ filters: filtersKuery, pagination: '' });
  }
  }}
@@ -152,6 +116,6 @@ export const OverviewPage = ({ autocomplete, setBreadcrumbs }: Props) => {
  }}
  />
  </EmptyState>
- </Fragment>
+ </>
  );
 };

x-pack/legacy/plugins/uptime/public/routes.tsx

@@ -6,7 +6,7 @@
 
 import React, { FC } from 'react';
 import { Route, Switch } from 'react-router-dom';
-import { MonitorPage, OverviewPage, NotFoundPage } from './pages';
+import { MonitorPage, NotFoundPage, OverviewPage } from './pages';
 import { DataPublicPluginStart } from '../../../../../src/plugins/data/public';
 import { UMUpdateBreadcrumbs } from './lib/lib';
 

x-pack/legacy/plugins/uptime/public/state/actions/index.ts

@@ -8,3 +8,4 @@ export * from './overview_filters';
 export * from './snapshot';
 export * from './ui';
 export * from './monitor_status';
+export * from './index_patternts';

x-pack/legacy/plugins/uptime/public/state/actions/index_patternts.ts

@@ -0,0 +1,12 @@
+/*
+ * 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 { createAction } from 'redux-actions';
+import { QueryParams } from './types';
+
+export const getIndexPattern = createAction('GET_INDEX_PATTERN');
+export const getIndexPatternSuccess = createAction<QueryParams>('GET_INDEX_PATTERN_SUCCESS');
+export const getIndexPatternFail = createAction<Error>('GET_INDEX_PATTERN_FAIL');

x-pack/legacy/plugins/uptime/public/state/api/index.ts

@@ -8,3 +8,4 @@ export * from './monitor';
 export * from './overview_filters';
 export * from './snapshot';
 export * from './monitor_status';
+export * from './index_pattern';

x-pack/legacy/plugins/uptime/public/state/api/index_pattern.ts

@@ -0,0 +1,21 @@
+/*
+ * 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 { getApiPath } from '../../lib/helper';
+
+export interface APIParams {
+ basePath: string;
+}
+
+export const fetchIndexPattern = async ({ basePath }: APIParams) => {
+ const url = getApiPath(`/api/uptime/index_pattern`, basePath);
+
+ const response = await fetch(url);
+ if (!response.ok) {
+ throw new Error(response.statusText);
+ }
+ return await response.json();
+};

x-pack/legacy/plugins/uptime/public/state/effects/index.ts

@@ -9,10 +9,12 @@ import { fetchMonitorDetailsEffect } from './monitor';
 import { fetchOverviewFiltersEffect } from './overview_filters';
 import { fetchSnapshotCountEffect } from './snapshot';
 import { fetchMonitorStatusEffect } from './monitor_status';
+import { fetchIndexPatternEffect } from './index_pattern';
 
 export function* rootEffect() {
  yield fork(fetchMonitorDetailsEffect);
  yield fork(fetchSnapshotCountEffect);
  yield fork(fetchOverviewFiltersEffect);
  yield fork(fetchMonitorStatusEffect);
+ yield fork(fetchIndexPatternEffect);
 }