[ResponseOps][Alerts] Implement alerts filters form

.github/CODEOWNERS

@@ -566,6 +566,7 @@ src/platform/packages/shared/react/kibana_context/theme @elastic/appex-sharedux
 src/platform/packages/shared/react/kibana_mount @elastic/appex-sharedux
 src/platform/packages/shared/response-ops/alerts-apis @elastic/response-ops
 src/platform/packages/shared/response-ops/alerts-fields-browser @elastic/response-ops
+src/platform/packages/shared/response-ops/alerts-filters-form @elastic/response-ops
 src/platform/packages/shared/response-ops/alerts-table @elastic/response-ops
 src/platform/packages/shared/response-ops/rule_form @elastic/response-ops
 src/platform/packages/shared/response-ops/rule_params @elastic/response-ops

package.json

@@ -776,6 +776,7 @@
     "@kbn/resolver-test-plugin": "link:x-pack/test/plugin_functional/plugins/resolver_test",
     "@kbn/response-ops-alerts-apis": "link:src/platform/packages/shared/response-ops/alerts-apis",
     "@kbn/response-ops-alerts-fields-browser": "link:src/platform/packages/shared/response-ops/alerts-fields-browser",
+    "@kbn/response-ops-alerts-filters-form": "link:src/platform/packages/shared/response-ops/alerts-filters-form",
     "@kbn/response-ops-alerts-table": "link:src/platform/packages/shared/response-ops/alerts-table",
     "@kbn/response-ops-rule-form": "link:src/platform/packages/shared/response-ops/rule_form",
     "@kbn/response-ops-rule-params": "link:src/platform/packages/shared/response-ops/rule_params",

src/platform/packages/shared/response-ops/alerts-filters-form/README.md

@@ -0,0 +1,3 @@
+# @kbn/response-ops-alerts-filters-form
+
+A form to create and edit boolean filter expressions for alert document search queries.

src/platform/packages/shared/response-ops/alerts-filters-form/components/alerts_filter_by_rule_tags.test.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
+ * 2.0", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { userEvent } from '@testing-library/user-event';
+import { httpServiceMock } from '@kbn/core-http-browser-mocks';
+import { notificationServiceMock } from '@kbn/core-notifications-browser-mocks';
+import { useGetRuleTagsQuery } from '@kbn/response-ops-rules-apis/hooks/use_get_rule_tags_query';
+import { AlertsFiltersFormContextProvider } from '../contexts/alerts_filters_form_context';
+import { AlertsFilterByRuleTags, filterMetadata } from './alerts_filter_by_rule_tags';
+import { ALERT_RULE_TAGS } from '@kbn/rule-data-utils';
+
+const http = httpServiceMock.createStartContract();
+const notifications = notificationServiceMock.createStartContract();
+jest.mock('@kbn/response-ops-rules-apis/hooks/use_get_rule_tags_query');
+const mockUseGetRuleTagsQuery = jest.mocked(useGetRuleTagsQuery);
+
+const ruleTagsBaseQueryResult = {
+  hasNextPage: false,
+  fetchNextPage: jest.fn(),
+  refetch: jest.fn(),
+};
+
+describe('AlertsFilterByRuleTags', () => {
+  it('should show all available tags as options', async () => {
+    mockUseGetRuleTagsQuery.mockReturnValue({
+      tags: ['tag1', 'tag2'],
+      isLoading: false,
+      isError: false,
+      ...ruleTagsBaseQueryResult,
+    });
+    render(
+      <AlertsFiltersFormContextProvider value={{ http, notifications, ruleTypeIds: ['.es-query'] }}>
+        <AlertsFilterByRuleTags value={[]} onChange={jest.fn()} />
+      </AlertsFiltersFormContextProvider>
+    );
+    await userEvent.click(screen.getByRole('combobox'));
+    expect(screen.getByText('tag1')).toBeInTheDocument();
+    expect(screen.getByText('tag2')).toBeInTheDocument();
+  });
+
+  it('should set the combobox in loading mode while loading the available tags', async () => {
+    mockUseGetRuleTagsQuery.mockReturnValue({
+      tags: [],
+      isLoading: true,
+      isError: false,
+      ...ruleTagsBaseQueryResult,
+    });
+    render(
+      <AlertsFiltersFormContextProvider value={{ http, notifications, ruleTypeIds: ['.es-query'] }}>
+        <AlertsFilterByRuleTags value={[]} onChange={jest.fn()} />
+      </AlertsFiltersFormContextProvider>
+    );
+    expect(screen.getByRole('progressbar')).toBeInTheDocument();
+  });
+
+  it('should disable the combobox when the tags query fails', async () => {
+    mockUseGetRuleTagsQuery.mockReturnValue({
+      tags: [],
+      isLoading: false,
+      isError: true,
+      ...ruleTagsBaseQueryResult,
+    });
+    render(
+      <AlertsFiltersFormContextProvider value={{ http, notifications, ruleTypeIds: ['.es-query'] }}>
+        <AlertsFilterByRuleTags value={[]} onChange={jest.fn()} />
+      </AlertsFiltersFormContextProvider>
+    );
+    const comboboxInput = screen.getByTestId('comboBoxSearchInput');
+    expect(comboboxInput).toHaveAttribute('aria-invalid', 'true');
+    expect(comboboxInput).toHaveAttribute('disabled');
+  });
+
+  it('should have the correct metadata', () => {
+    expect(filterMetadata.id).toEqual('ruleTags');
+    expect(filterMetadata.component).toEqual(AlertsFilterByRuleTags);
+    expect(filterMetadata.isEmpty(undefined)).toEqual(true);
+    expect(filterMetadata.isEmpty([])).toEqual(true);
+    expect(filterMetadata.isEmpty(['test-tag'])).toEqual(false);
+    expect(filterMetadata.toEsQuery(['test-tag'])).toEqual({
+      terms: {
+        [ALERT_RULE_TAGS]: ['test-tag'],
+      },
+    });
+  });
+});

src/platform/packages/shared/response-ops/alerts-filters-form/components/alerts_filter_by_rule_tags.tsx

@@ -0,0 +1,99 @@
+/*
+ * 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", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import { EuiComboBox, EuiComboBoxOptionOption, EuiFormRow } from '@elastic/eui';
+import { useGetRuleTagsQuery } from '@kbn/response-ops-rules-apis/hooks/use_get_rule_tags_query';
+import React, { useCallback, useMemo } from 'react';
+import { i18n } from '@kbn/i18n';
+import { EuiComboBoxProps } from '@elastic/eui/src/components/combo_box/combo_box';
+import { ALERT_RULE_TAGS } from '@kbn/rule-data-utils';
+import { RULE_TAGS_FILTER_LABEL } from '../translations';
+import { useAlertsFiltersFormContext } from '../contexts/alerts_filters_form_context';
+import { AlertsFilterComponentType, AlertsFilterMetadata } from '../types';
+
+/**
+ * Filters by one or more rule tags
+ */
+export const AlertsFilterByRuleTags: AlertsFilterComponentType<string[]> = ({
+  value,
+  onChange,
+  isDisabled = false,
+}) => {
+  const {
+    ruleTypeIds,
+    http,
+    notifications: { toasts },
+  } = useAlertsFiltersFormContext();
+
+  const { tags, isLoading, isError } = useGetRuleTagsQuery({
+    enabled: true,
+    perPage: 10000,
+    // Only search tags from allowed rule type ids
+    ruleTypeIds,
+    http,
+    toasts,
+  });
+
+  const options = useMemo<Array<EuiComboBoxOptionOption<string>>>(
+    () =>
+      tags.map((tag) => ({
+        label: tag,
+      })),
+    [tags]
+  );
+
+  const selectedOptions = useMemo(
+    () => options.filter(({ label }) => value?.includes(label)),
+    [options, value]
+  );
+
+  const onSelectedOptionsChange = useCallback<NonNullable<EuiComboBoxProps<string>['onChange']>>(
+    (newOptions) => {
+      onChange?.(newOptions.map(({ label }) => label));
+    },
+    [onChange]
+  );
+
+  return (
+    <EuiFormRow
+      label={RULE_TAGS_FILTER_LABEL}
+      isDisabled={isDisabled || isError}
+      isInvalid={isError}
+      error={i18n.translate('alertsFiltersForm.ruleTags.errorDescription', {
+        defaultMessage: 'Cannot load available rule tags',
+      })}
+      fullWidth
+    >
+      <EuiComboBox
+        isClearable
+        isLoading={isLoading}
+        isDisabled={isDisabled || isError}
+        isInvalid={isError}
+        options={options}
+        selectedOptions={selectedOptions}
+        onChange={onSelectedOptionsChange}
+        fullWidth
+      />
+    </EuiFormRow>
+  );
+};
+
+export const filterMetadata: AlertsFilterMetadata<string[]> = {
+  id: 'ruleTags',
+  displayName: RULE_TAGS_FILTER_LABEL,
+  component: AlertsFilterByRuleTags,
+  isEmpty: (value?: string[]) => !value?.length,
+  toEsQuery: (value: string[]) => {
+    return {
+      terms: {
+        [ALERT_RULE_TAGS]: value,
+      },
+    };
+  },
+};

src/platform/packages/shared/response-ops/alerts-filters-form/components/alerts_filter_by_rule_types.test.tsx

@@ -0,0 +1,110 @@
+/*
+ * 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", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { userEvent } from '@testing-library/user-event';
+import { httpServiceMock } from '@kbn/core-http-browser-mocks';
+import { notificationServiceMock } from '@kbn/core-notifications-browser-mocks';
+import { useGetInternalRuleTypesQuery } from '@kbn/response-ops-rules-apis/hooks/use_get_internal_rule_types_query';
+import { AlertsFiltersFormContextProvider } from '../contexts/alerts_filters_form_context';
+import { AlertsFilterByRuleTypes } from './alerts_filter_by_rule_types';
+import { InternalRuleType } from '@kbn/response-ops-rules-apis/apis/get_internal_rule_types';
+import { filterMetadata } from './alerts_filter_by_rule_types';
+import { ALERT_RULE_TYPE_ID } from '@kbn/rule-data-utils';
+
+const http = httpServiceMock.createStartContract();
+const notifications = notificationServiceMock.createStartContract();
+jest.mock('@kbn/response-ops-rules-apis/hooks/use_get_internal_rule_types_query');
+const mockUseGetInternalRuleTypesQuery = useGetInternalRuleTypesQuery as jest.Mock;
+
+const ruleTypeIds = ['.es-query', '.index-threshold'];
+
+describe('AlertsFilterByRuleTypes', () => {
+  it('should show all available types as options', async () => {
+    mockUseGetInternalRuleTypesQuery.mockReturnValue({
+      data: [
+        { id: '.es-query', name: 'Elasticsearch Query' },
+        { id: '.index-threshold', name: 'Index threshold' },
+      ] as InternalRuleType[],
+      isLoading: false,
+      isError: false,
+    });
+    render(
+      <AlertsFiltersFormContextProvider value={{ http, notifications, ruleTypeIds }}>
+        <AlertsFilterByRuleTypes value={[]} onChange={jest.fn()} />
+      </AlertsFiltersFormContextProvider>
+    );
+    await userEvent.click(screen.getByRole('combobox'));
+    expect(screen.getByText('Elasticsearch Query')).toBeInTheDocument();
+    expect(screen.getByText('Index threshold')).toBeInTheDocument();
+  });
+
+  it('should filter available types according to the provided ruleTypeIds', async () => {
+    mockUseGetInternalRuleTypesQuery.mockReturnValue({
+      data: [
+        { id: '.es-query', name: 'Elasticsearch Query' },
+        { id: '.index-threshold', name: 'Index threshold' },
+      ] as InternalRuleType[],
+      isLoading: false,
+      isError: false,
+    });
+    render(
+      <AlertsFiltersFormContextProvider value={{ http, notifications, ruleTypeIds: ['.es-query'] }}>
+        <AlertsFilterByRuleTypes value={[]} onChange={jest.fn()} />
+      </AlertsFiltersFormContextProvider>
+    );
+    await userEvent.click(screen.getByRole('combobox'));
+    expect(screen.getByText('Elasticsearch Query')).toBeInTheDocument();
+    expect(screen.queryByText('Index threshold')).not.toBeInTheDocument();
+  });
+
+  it('should set the combobox in loading mode while loading the available types', async () => {
+    mockUseGetInternalRuleTypesQuery.mockReturnValue({
+      data: [],
+      isLoading: true,
+      isError: false,
+    });
+    render(
+      <AlertsFiltersFormContextProvider value={{ http, notifications, ruleTypeIds }}>
+        <AlertsFilterByRuleTypes value={[]} onChange={jest.fn()} />
+      </AlertsFiltersFormContextProvider>
+    );
+    expect(screen.getByRole('progressbar')).toBeInTheDocument();
+  });
+
+  it('should disable the combobox when the types query fails', async () => {
+    mockUseGetInternalRuleTypesQuery.mockReturnValue({
+      types: [],
+      isLoading: false,
+      isError: true,
+    });
+    render(
+      <AlertsFiltersFormContextProvider value={{ http, notifications, ruleTypeIds }}>
+        <AlertsFilterByRuleTypes value={[]} onChange={jest.fn()} />
+      </AlertsFiltersFormContextProvider>
+    );
+    const comboboxInput = screen.getByTestId('comboBoxSearchInput');
+    expect(comboboxInput).toHaveAttribute('aria-invalid', 'true');
+    expect(comboboxInput).toHaveAttribute('disabled');
+  });
+
+  it('should have the correct metadata', () => {
+    expect(filterMetadata.id).toEqual('ruleTypes');
+    expect(filterMetadata.component).toEqual(AlertsFilterByRuleTypes);
+    expect(filterMetadata.isEmpty(undefined)).toEqual(true);
+    expect(filterMetadata.isEmpty([])).toEqual(true);
+    expect(filterMetadata.isEmpty(['test-type'])).toEqual(false);
+    expect(filterMetadata.toEsQuery(['test-type'])).toEqual({
+      terms: {
+        [ALERT_RULE_TYPE_ID]: ['test-type'],
+      },
+    });
+  });
+});