[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 <[email protected]>

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;
@@ -62,21 +60,37 @@ function getSuggestions(
 }
 
 interface Props {
+<<<<<<< HEAD:x-pack/legacy/plugins/uptime/public/components/functional/kuery_bar/index.tsx
  autocomplete: Pick<AutocompleteProviderRegister, 'getProvider'>;
 }
 
 export function KueryBar({ autocomplete }: Props) {
+=======
+ autocomplete: DataPublicPluginStart['autocomplete'];
+ loadIndexPattern: any;
+ indexPattern: any;
+}
+
+export function KueryBarComponent({
+ autocomplete: autocompleteService,
+ loadIndexPattern,
+ indexPattern,
+}: Props) {
+ useEffect(() => {
+ if (!indexPattern) {
+ loadIndexPattern();
+ }
+ }, [indexPattern, loadIndexPattern]);
+
+>>>>>>> a8622cfcd8... [Uptime] Use dynamic index pattern in Uptime (#55446):x-pack/legacy/plugins/uptime/public/components/functional/kuery_bar/kuery_bar.tsx
  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';