synthetics - filters - remove public so client usage

elastic · May 18, 2023 · 4c337f3 · 4c337f3
1 parent 574d334
commit 4c337f3
Show file tree

Hide file tree

Showing 17 changed files with 224 additions and 151 deletions.
diff --git a/x-pack/plugins/synthetics/common/constants/synthetics/rest_api.ts b/x-pack/plugins/synthetics/common/constants/synthetics/rest_api.ts
@@ -22,4 +22,5 @@ export enum SYNTHETICS_API_URLS {
   NETWORK_EVENTS = `/internal/synthetics/network_events`,
   JOURNEY_SCREENSHOT = `/internal/synthetics/journey/screenshot/{checkGroup}/{stepIndex}`,
   DELETE_PACKAGE_POLICY = `/internal/synthetics/monitor/policy/{packagePolicyId}`,
+  FILTERS = '/internal/synthetics/monitor/filters',
 }
diff --git a/x-pack/plugins/synthetics/common/runtime_types/monitor_management/filters.ts b/x-pack/plugins/synthetics/common/runtime_types/monitor_management/filters.ts
@@ -0,0 +1,25 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import * as t from 'io-ts';
+
+const MonitorFilterCodec = t.interface({
+  label: t.string,
+  count: t.number,
+});
+
+export type MonitorFilter = t.TypeOf<typeof MonitorFilterCodec>;
+
+export const MonitorFiltersResultCodec = t.interface({
+  monitorTypes: t.array(MonitorFilterCodec),
+  tags: t.array(MonitorFilterCodec),
+  locations: t.array(MonitorFilterCodec),
+  projects: t.array(MonitorFilterCodec),
+  schedules: t.array(MonitorFilterCodec),
+});
+
+export type MonitorFiltersResult = t.TypeOf<typeof MonitorFiltersResultCodec>;
diff --git a/x-pack/plugins/synthetics/common/runtime_types/monitor_management/index.ts b/x-pack/plugins/synthetics/common/runtime_types/monitor_management/index.ts
@@ -15,3 +15,4 @@ export * from './locations';
 export * from './synthetics_private_locations';
 export * from './synthetics_overview_status';
 export * from './synthetics_params';
+export * from './filters';
diff --git a/.../public/apps/synthetics/components/monitors_page/common/monitor_filters/filter_button.tsx b/.../public/apps/synthetics/components/monitors_page/common/monitor_filters/filter_button.tsx
@@ -18,9 +18,11 @@ import { useMonitorFiltersState } from './use_filters';
 export const FilterButton = ({
   filter,
   handleFilterChange,
+  loading,
 }: {
   filter: SyntheticsMonitorFilterItem;
   handleFilterChange: ReturnType<typeof useMonitorFiltersState>['handleFilterChange'];
+  loading: boolean;
 }) => {
   const { label, values, field } = filter;
 
@@ -48,7 +50,7 @@ export const FilterButton = ({
       setQuery={setQuery}
       onChange={(selectedValues) => handleFilterChange(field, selectedValues)}
       allowExclusions={false}
-      loading={false}
+      loading={loading}
       asFilterButton={true}
     />
   );

diff --git a/...s/public/apps/synthetics/components/monitors_page/common/monitor_filters/filter_group.tsx b/...s/public/apps/synthetics/components/monitors_page/common/monitor_filters/filter_group.tsx
@@ -52,7 +52,7 @@ export const FilterGroup = ({
       label: TYPE_LABEL,
       field: 'monitorTypes',
       values: getSyntheticsFilterDisplayValues(
-        mixUrlValues(data.monitorTypes, urlParams.monitorTypes),
+        mixUrlValues(data?.monitorTypes, urlParams.monitorTypes),
         'monitorTypes',
         locations
       ),
@@ -62,7 +62,7 @@ export const FilterGroup = ({
       field: 'locations',
       values: getSyntheticsFilterDisplayValues(
         mixUrlValues(
-          data.locations.map((locationData) => {
+          data?.locations.map((locationData) => {
             const matchingLocation = locations.find(
               (location) => location.id === locationData.label
             );
@@ -81,7 +81,7 @@ export const FilterGroup = ({
       label: TAGS_LABEL,
       field: 'tags',
       values: getSyntheticsFilterDisplayValues(
-        mixUrlValues(data.tags, urlParams.tags),
+        mixUrlValues(data?.tags, urlParams.tags),
         'tags',
         locations
       ),
@@ -90,19 +90,19 @@ export const FilterGroup = ({
       label: SCHEDULE_LABEL,
       field: 'schedules',
       values: getSyntheticsFilterDisplayValues(
-        mixUrlValues(data.schedules, urlParams.schedules),
+        mixUrlValues(data?.schedules, urlParams.schedules),
         'schedules',
         locations
       ),
     },
   ];
 
-  if (data.projects.length > 0) {
+  if ((data?.projects?.length || 0) > 0) {
     filters.push({
       label: PROJECT_LABEL,
       field: 'projects',
       values: getSyntheticsFilterDisplayValues(
-        mixUrlValues(data.projects, urlParams.projects),
+        mixUrlValues(data?.projects, urlParams.projects),
         'projects',
         locations
       ),
@@ -112,7 +112,12 @@ export const FilterGroup = ({
   return (
     <EuiFilterGroup>
       {filters.map((filter, index) => (
-        <FilterButton key={index} filter={filter} handleFilterChange={handleFilterChange} />
+        <FilterButton
+          key={index}
+          filter={filter}
+          handleFilterChange={handleFilterChange}
+          loading={!data}
+        />
       ))}
     </EuiFilterGroup>
   );

diff --git a/...ics/public/apps/synthetics/components/monitors_page/common/monitor_filters/use_filters.ts b/...ics/public/apps/synthetics/components/monitors_page/common/monitor_filters/use_filters.ts
@@ -7,18 +7,17 @@
 
 import { useMemo, useEffect, useCallback, useRef } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import { useKibana } from '@kbn/kibana-react-plugin/public';
-import { useFetcher } from '@kbn/observability-shared-plugin/public';
 
-import { selectFiltersData, setListOfFiltersActions } from '../../../../state/overview_status';
-import { ConfigKey } from '../../../../../../../common/runtime_types';
-import { syntheticsMonitorType } from '../../../../../../../common/types/saved_objects';
+import { MonitorFiltersResult } from '../../../../../../../common/runtime_types';
 import {
   MonitorFilterState,
   selectMonitorFiltersAndQueryState,
   setOverviewPageStateAction,
   updateManagementPageStateAction,
+  fetchMonitorFiltersAction,
+  selectMonitorFilterOptions,
 } from '../../../../state';
+import { useSyntheticsRefreshContext } from '../../../../contexts';
 import { SyntheticsUrlParams } from '../../../../utils/url_params';
 import { useUrlParams } from '../../../../hooks';
 import {
@@ -28,127 +27,16 @@ import {
   SyntheticsMonitorFilterField,
 } from './filter_fields';
 
-const aggs = {
-  monitorTypes: {
-    terms: {
-      field: `${syntheticsMonitorType}.attributes.${ConfigKey.MONITOR_TYPE}.keyword`,
-      size: 10000,
-    },
-  },
-  tags: {
-    terms: {
-      field: `${syntheticsMonitorType}.attributes.${ConfigKey.TAGS}`,
-      size: 10000,
-    },
-  },
-  locations: {
-    terms: {
-      field: `${syntheticsMonitorType}.attributes.${ConfigKey.LOCATIONS}.id`,
-      size: 10000,
-    },
-  },
-  projects: {
-    terms: {
-      field: `${syntheticsMonitorType}.attributes.${ConfigKey.PROJECT_ID}`,
-      size: 10000,
-    },
-  },
-  schedules: {
-    terms: {
-      field: `${syntheticsMonitorType}.attributes.${ConfigKey.SCHEDULE}.number`,
-      size: 10000,
-    },
-  },
-};
-
-type Buckets = Array<{
-  key: string;
-  doc_count: number;
-}>;
-
-interface AggsResponse {
-  monitorTypes: {
-    buckets: Buckets;
-  };
-  locations: {
-    buckets: Buckets;
-  };
-  tags: {
-    buckets: Buckets;
-  };
-  projects: {
-    buckets: Buckets;
-  };
-  schedules: {
-    buckets: Buckets;
-  };
-}
-
-export type FiltersList = Record<
-  SyntheticsMonitorFilterField,
-  Array<{ label: string; count: number }>
->;
-
-export const useFilters = (): FiltersList => {
-  const { savedObjects } = useKibana().services;
-
-  const { data } = useFetcher(async () => {
-    return savedObjects?.client.find({
-      type: syntheticsMonitorType,
-      perPage: 0,
-      aggs,
-    });
-  }, []);
-
-  const filtersData = useSelector(selectFiltersData);
-
+export const useFilters = (): MonitorFiltersResult | null => {
   const dispatch = useDispatch();
-
-  const newFiltersData = useMemo(() => {
-    const { monitorTypes, tags, locations, projects, schedules } =
-      (data?.aggregations as AggsResponse) ?? {};
-    return {
-      monitorTypes:
-        monitorTypes?.buckets?.map(({ key, doc_count: count }) => ({
-          label: key,
-          count,
-        })) ?? [],
-      tags:
-        tags?.buckets?.map(({ key, doc_count: count }) => ({
-          label: key,
-          count,
-        })) ?? [],
-      locations:
-        locations?.buckets?.map(({ key, doc_count: count }) => ({
-          label: key,
-          count,
-        })) ?? [],
-      projects:
-        projects?.buckets
-          ?.filter(({ key }) => key)
-          .map(({ key, doc_count: count }) => ({
-            label: key,
-            count,
-          })) ?? [],
-      schedules:
-        schedules?.buckets?.map(({ key, doc_count: count }) => ({
-          label: String(key),
-          count,
-        })) ?? [],
-    };
-  }, [data]);
+  const filtersData = useSelector(selectMonitorFilterOptions);
+  const { lastRefresh } = useSyntheticsRefreshContext();
 
   useEffect(() => {
-    if (data) {
-      dispatch(setListOfFiltersActions(newFiltersData));
-    }
-  }, [data, dispatch, newFiltersData]);
-
-  if (!data && filtersData) {
-    return filtersData;
-  }
+    dispatch(fetchMonitorFiltersAction.get());
+  }, [lastRefresh, dispatch]);
 
-  return newFiltersData;
+  return filtersData;
 };
 
 type FilterFieldWithQuery = SyntheticsMonitorFilterField | 'query';

diff --git a/x-pack/plugins/synthetics/public/apps/synthetics/state/monitor_list/actions.ts b/x-pack/plugins/synthetics/public/apps/synthetics/state/monitor_list/actions.ts
@@ -7,7 +7,10 @@
 
 import { createAction } from '@reduxjs/toolkit';
 import { UpsertMonitorError, UpsertMonitorRequest, UpsertMonitorResponse } from '..';
-import { MonitorManagementListResult } from '../../../../../common/runtime_types';
+import {
+  MonitorManagementListResult,
+  MonitorFiltersResult,
+} from '../../../../../common/runtime_types';
 import { createAsyncAction } from '../utils/actions';
 
 import { MonitorListPageState } from './models';
@@ -42,3 +45,7 @@ export const updateManagementPageStateAction = createAction<Partial<MonitorListP
 );
 
 export const cleanMonitorListState = createAction('cleanMonitorListState');
+
+export const fetchMonitorFiltersAction = createAsyncAction<void, MonitorFiltersResult>(
+  'fetchMonitorFiltersAction'
+);
diff --git a/x-pack/plugins/synthetics/public/apps/synthetics/state/monitor_list/api.ts b/x-pack/plugins/synthetics/public/apps/synthetics/state/monitor_list/api.ts
@@ -7,14 +7,15 @@
 
 import { SavedObject } from '@kbn/core-saved-objects-common';
 import { UpsertMonitorRequest } from '..';
-import { API_URLS } from '../../../../../common/constants';
+import { API_URLS, SYNTHETICS_API_URLS } from '../../../../../common/constants';
 import {
   EncryptedSyntheticsMonitor,
   FetchMonitorManagementListQueryArgs,
   MonitorManagementListResult,
   MonitorManagementListResultCodec,
   ServiceLocationErrors,
   SyntheticsMonitor,
+  MonitorFiltersResult,
 } from '../../../../../common/runtime_types';
 import { apiService } from '../../../../utils/api_service';
 
@@ -76,3 +77,7 @@ export const fetchCreateMonitor = async ({
 }): Promise<{ attributes: { errors: ServiceLocationErrors } } | SyntheticsMonitor> => {
   return await apiService.post(API_URLS.SYNTHETICS_MONITORS, monitor);
 };
+
+export const fetchMonitorFilters = async (): Promise<MonitorFiltersResult> => {
+  return await apiService.get(SYNTHETICS_API_URLS.FILTERS);
+};
diff --git a/x-pack/plugins/synthetics/public/apps/synthetics/state/monitor_list/effects.ts b/x-pack/plugins/synthetics/public/apps/synthetics/state/monitor_list/effects.ts
@@ -6,7 +6,7 @@
  */
 
 import { PayloadAction } from '@reduxjs/toolkit';
-import { call, put, takeEvery, select, debounce } from 'redux-saga/effects';
+import { call, put, takeEvery, select, takeLatest, debounce } from 'redux-saga/effects';
 import { SavedObject } from '@kbn/core-saved-objects-common';
 import { quietFetchOverviewStatusAction } from '../overview_status';
 import { enableDefaultAlertingAction } from '../alert_rules';
@@ -25,8 +25,9 @@ import {
   fetchUpsertMonitorAction,
   fetchUpsertSuccessAction,
   quietFetchMonitorListAction,
+  fetchMonitorFiltersAction,
 } from './actions';
-import { fetchMonitorManagementList, fetchUpsertMonitor } from './api';
+import { fetchMonitorManagementList, fetchUpsertMonitor, fetchMonitorFilters } from './api';
 import { toastTitle } from './toast_title';
 import { UpsertMonitorRequest } from './models';
 
@@ -117,3 +118,14 @@ export function* upsertMonitorEffect() {
 function hasPageState(value: any): value is { pageState: MonitorOverviewPageState } {
   return Object.keys(value).includes('pageState');
 }
+
+export function* fetchMonitorFiltersEffect() {
+  yield takeLatest(
+    fetchMonitorFiltersAction.get,
+    fetchEffectFactory(
+      fetchMonitorFilters,
+      fetchMonitorFiltersAction.success,
+      fetchMonitorFiltersAction.fail
+    )
+  );
+}