[Synthetics] filters - remove public so client usage

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',
 }

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

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

x-pack/plugins/synthetics/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}
     />
   );

x-pack/plugins/synthetics/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>
   );

x-pack/plugins/synthetics/public/apps/synthetics/components/monitors_page/common/monitor_filters/use_filters.test.tsx

@@ -0,0 +1,91 @@
+/*
+ * 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 React from 'react';
+import { renderHook } from '@testing-library/react-hooks';
+import { useFilters } from './use_filters';
+import { useDispatch } from 'react-redux';
+import { WrappedHelper } from '../../../../utils/testing';
+import { fetchMonitorFiltersAction } from '../../../../state';
+
+jest.mock('react-redux', () => ({
+  ...jest.requireActual('react-redux'),
+  useDispatch: jest.fn().mockReturnValue(jest.fn()),
+}));
+
+describe('useMonitorListFilters', () => {
+  jest.useFakeTimers();
+
+  it('returns expected results', () => {
+    const { result } = renderHook(() => useFilters(), { wrapper: WrappedHelper });
+
+    expect(result.current).toStrictEqual({
+      locations: [],
+      tags: [],
+      monitorTypes: [],
+      projects: [],
+      schedules: [],
+    });
+  });
+
+  it('dispatches action when filters are null', () => {
+    const Wrapper = ({ children }: { children: React.ReactElement }) => {
+      return (
+        <WrappedHelper
+          state={{
+            monitorList: {
+              monitorFilterOptions: null,
+            },
+          }}
+        >
+          {children}
+        </WrappedHelper>
+      );
+    };
+    const spy = jest.fn();
+    // @ts-ignore
+    useDispatch.mockReturnValue(spy);
+    const { result } = renderHook(() => useFilters(), { wrapper: Wrapper });
+
+    expect(result.current).toStrictEqual(null);
+    expect(spy).toBeCalledWith(fetchMonitorFiltersAction.get());
+  });
+
+  it('picks up results from filters selector', () => {
+    const filters = {
+      locations: [
+        {
+          label: 'North America',
+          count: 1,
+        },
+      ],
+      tags: [],
+      monitorTypes: [{ label: 'http', count: 1 }],
+      projects: [],
+      schedules: [],
+    };
+    const Wrapper = ({ children }: { children: React.ReactElement }) => {
+      return (
+        <WrappedHelper
+          state={{
+            monitorList: {
+              monitorFilterOptions: filters,
+            },
+          }}
+        >
+          {children}
+        </WrappedHelper>
+      );
+    };
+    const spy = jest.fn();
+    // @ts-ignore
+    useDispatch.mockReturnValue(spy);
+    const { result } = renderHook(() => useFilters(), { wrapper: Wrapper });
+
+    expect(result.current).toStrictEqual(filters);
+    expect(spy).toBeCalledWith(fetchMonitorFiltersAction.get());
+  });
+});