PR feedback

x-pack/legacy/plugins/uptime/common/constants/constants.ts

@@ -5,5 +5,3 @@
  */
 
 export const UNNAMED_LOCATION = 'Unnamed-location';
-
-export const UPTIME_INDEX_PATTERN = 'heartbeat-8*';

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

@@ -4,5 +4,6 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-export * from './kuerybar/kuery_bar_container';
-export * from './pages/overview_container';
+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/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,7 +7,6 @@
 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 { KueryBarComponent } from './kuery_bar/kuery_bar';
 export { MonitorCharts } from './monitor_charts';

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/components/functional/status_panel.tsx

@@ -16,7 +16,6 @@ interface StatusPanelProps {
   dateRangeEnd: string;
   filters?: string;
   statusFilter?: string;
-  sharedProps: { [key: string]: any };
 }
 
 const STATUS_CHART_HEIGHT = '160px';
@@ -28,7 +27,6 @@ export const StatusPanel = ({
   dateRangeEnd,
   filters,
   statusFilter,
-  sharedProps,
 }: StatusPanelProps) => (
   <EuiPanel>
     <EuiFlexGroup gutterSize="l">
@@ -47,7 +45,7 @@ export const StatusPanel = ({
           absoluteEndDate={absoluteDateRangeEnd}
           height={STATUS_CHART_HEIGHT}
           isResponsive={true}
-          variables={sharedProps}
+          variables={{ dateRangeStart, dateRangeEnd, filters, statusFilter }}
         />
       </EuiFlexItem>
     </EuiFlexGroup>

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

@@ -8,10 +8,23 @@ 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';
 
-export const useUpdateKueryString = (indexPattern: any, search: string, urlFilters: string) => {
-  let error: any;
-  let kueryString: string = '';
+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
+  // and JSON.parse and stringifyKueries can have hard time parsing
+  // all possible scenarios
   try {
     if (urlFilters !== '') {
       const filterMap = new Map<string, Array<string | number>>(JSON.parse(urlFilters));
@@ -20,31 +33,31 @@ export const useUpdateKueryString = (indexPattern: any, search: string, urlFilte
   } catch {
     kueryString = '';
   }
+  return kueryString;
+};
+
+export const useUpdateKueryString = (
+  indexPattern: IIndexPattern,
+  filterQueryString = '',
+  urlFilters: string
+): [string?, Error?] => {
+  const kueryString = getKueryString(urlFilters);
 
-  const filterQueryString = search || '';
-  let filters: any | undefined;
+  const combinedFilterString = combineFiltersAndUserSearch(filterQueryString, kueryString);
+
+  let esFilters: string | 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));
-      }
+    if ((filterQueryString || urlFilters) && indexPattern) {
+      const ast = esKuery.fromKueryExpression(combinedFilterString);
+
+      const elasticsearchQuery = esKuery.toElasticsearchQuery(ast, indexPattern);
+
+      esFilters = JSON.stringify(elasticsearchQuery);
+
+      updateEsQueryForFilterGroup(filterQueryString, indexPattern);
     }
-    return [filters, error];
-  } catch (e) {
-    error = e;
-    return [urlFilters, error];
+    return [esFilters];
+  } catch (err) {
+    return [urlFilters, err];
   }
 };

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})`;