[Uptime] Use dynamic index pattern in Uptime (elastic#55446)

* Using auto attribute field and fixed title

* added constant

* refactor index pattern state

* fixed type

* PR feedback

* resolve conflcits

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

x-pack/legacy/plugins/uptime/public/components/connected/filter_group/filter_group_container.tsx

@@ -0,0 +1,93 @@
+/*
+ * 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, { useEffect } from 'react';
+import { connect } from 'react-redux';
+import { useUrlParams } from '../../../hooks';
+import { parseFiltersMap } from '../../functional/filter_group/parse_filter_map';
+import { AppState } from '../../../state';
+import { fetchOverviewFilters, GetOverviewFiltersPayload } from '../../../state/actions';
+import { FilterGroupComponent } from '../../functional/filter_group';
+import { OverviewFilters } from '../../../../common/runtime_types/overview_filters';
+
+interface OwnProps {
+  esFilters?: string;
+}
+
+interface StoreProps {
+  esKuery: string;
+  lastRefresh: number;
+  loading: boolean;
+  overviewFilters: OverviewFilters;
+}
+
+interface DispatchProps {
+  loadFilterGroup: typeof fetchOverviewFilters;
+}
+
+type Props = OwnProps & StoreProps & DispatchProps;
+
+export const Container: React.FC<Props> = ({
+  esKuery,
+  esFilters,
+  loading,
+  loadFilterGroup,
+  overviewFilters,
+}: Props) => {
+  const [getUrlParams, updateUrl] = useUrlParams();
+
+  const { dateRangeStart, dateRangeEnd, statusFilter, 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, esFilters, statusFilter, urlFilters, loadFilterGroup]);
+
+  // update filters in the URL from filter group
+  const onFilterUpdate = (filtersKuery: string) => {
+    if (urlFilters !== filtersKuery) {
+      updateUrl({ filters: filtersKuery, pagination: '' });
+    }
+  };
+
+  return (
+    <FilterGroupComponent
+      currentFilter={urlFilters}
+      overviewFilters={overviewFilters}
+      loading={loading}
+      onFilterUpdate={onFilterUpdate}
+    />
+  );
+};
+
+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<StoreProps, DispatchProps, OwnProps>(
+  // @ts-ignore connect is expecting null | undefined for some reason
+  mapStateToProps,
+  mapDispatchToProps
+)(Container);

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

@@ -5,3 +5,6 @@
  */
 
 export { PingHistogram } from './charts/ping_histogram';
+export { KueryBar } from './kuerybar/kuery_bar_container';
+export { OverviewPage } from './pages/overview_container';
+export { FilterGroup } from './filter_group/filter_group_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/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<StoreProps, 'overviewFilters' | 'loading'> &
-  Pick<OwnProps, 'currentFilter' | 'onFilterUpdate'>;
-
-export const PresentationalComponent: React.FC<PresentationalComponentProps> = ({
+export const FilterGroupComponent: React.FC<PresentationalComponentProps> = ({
   currentFilter,
   overviewFilters,
   loading,
@@ -151,60 +128,3 @@ export const PresentationalComponent: React.FC<PresentationalComponentProps> = (
     </EuiFilterGroup>
   );
 };
-
-export const Container: React.FC<Props> = ({
-  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 (
-    <PresentationalComponent
-      currentFilter={currentFilter}
-      overviewFilters={overviewFilters}
-      loading={loading}
-      onFilterUpdate={onFilterUpdate}
-    />
-  );
-};
-
-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<StoreProps, DispatchProps, OwnProps>(
-  // @ts-ignore connect is expecting null | undefined for some reason
-  mapStateToProps,
-  mapDispatchToProps
-)(Container);

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

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

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 {
   AutocompleteProviderRegister,
   AutocompleteSuggestion,
   esKuery,
   IIndexPattern,
 } from '../../../../../../../../src/plugins/data/public';
-import { useIndexPattern } from '../../../hooks';
 
 const Container = styled.div`
   margin-bottom: 10px;
@@ -63,20 +61,25 @@ function getSuggestions(
 
 interface Props {
   autocomplete: Pick<AutocompleteProviderRegister, 'getProvider'>;
+  loadIndexPattern: any;
+  indexPattern: any;
 }
 
-export function KueryBar({ autocomplete }: Props) {
+export function KueryBarComponent({ autocomplete, 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/components/functional/overview_page_parsing_error_callout.tsx

@@ -26,6 +26,7 @@ export const OverviewPageParsingErrorCallout = ({
     })}
     color="danger"
     iconType="alert"
+    style={{ width: '100%' }}
   >
     <p>
       <FormattedMessage

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