From ad37c76ccd82b73dc63d9256955730d65ef38936 Mon Sep 17 00:00:00 2001 From: Maryam Saeidi Date: Thu, 3 Nov 2022 15:35:21 +0100 Subject: [PATCH 1/4] Move alerts search bar to triggers action use package --- .../public/config/translations.ts | 5 --- .../public/pages/alerts/components/index.ts | 1 - .../containers/alerts_page/alerts_page.tsx | 8 +++-- x-pack/plugins/observability/public/plugin.ts | 2 -- .../translations/translations/fr-FR.json | 1 - .../translations/translations/ja-JP.json | 1 - .../translations/translations/zh-CN.json | 1 - .../hooks/use_alert_data_view.test.ts | 0 .../application}/hooks/use_alert_data_view.ts | 5 ++- .../alerts_search_bar}/alerts_search_bar.tsx | 33 +++++++------------ .../sections/alerts_search_bar/constants.ts | 10 ++++++ .../sections/alerts_search_bar/index.ts | 10 ++++++ .../alerts_search_bar/translations.ts | 15 +++++++++ .../sections/alerts_search_bar/types.ts | 22 +++++++++++++ .../public/common/get_alerts_search_bar.tsx | 20 +++++++++++ .../triggers_actions_ui/public/plugin.ts | 6 ++++ 16 files changed, 102 insertions(+), 38 deletions(-) rename x-pack/plugins/{observability/public => triggers_actions_ui/public/application}/hooks/use_alert_data_view.test.ts (100%) rename x-pack/plugins/{observability/public => triggers_actions_ui/public/application}/hooks/use_alert_data_view.ts (87%) rename x-pack/plugins/{observability/public/pages/alerts/components => triggers_actions_ui/public/application/sections/alerts_search_bar}/alerts_search_bar.tsx (62%) create mode 100644 x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_search_bar/constants.ts create mode 100644 x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_search_bar/index.ts create mode 100644 x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_search_bar/translations.ts create mode 100644 x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_search_bar/types.ts create mode 100644 x-pack/plugins/triggers_actions_ui/public/common/get_alerts_search_bar.tsx diff --git a/x-pack/plugins/observability/public/config/translations.ts b/x-pack/plugins/observability/public/config/translations.ts index e39dcb338d3a5..042650b94c084 100644 --- a/x-pack/plugins/observability/public/config/translations.ts +++ b/x-pack/plugins/observability/public/config/translations.ts @@ -122,9 +122,4 @@ export const translations = { } ), }, - alertsSearchBar: { - placeholder: i18n.translate('xpack.observability.alerts.searchBarPlaceholder', { - defaultMessage: 'Search alerts (e.g. kibana.alert.evaluation.threshold > 75)', - }), - }, }; diff --git a/x-pack/plugins/observability/public/pages/alerts/components/index.ts b/x-pack/plugins/observability/public/pages/alerts/components/index.ts index 592ab16ddcadf..0f3422049d2c6 100644 --- a/x-pack/plugins/observability/public/pages/alerts/components/index.ts +++ b/x-pack/plugins/observability/public/pages/alerts/components/index.ts @@ -9,7 +9,6 @@ export * from './alerts_flyout'; export * from './render_cell_value'; export * from './severity_badge'; export * from './workflow_status_filter'; -export * from './alerts_search_bar'; export * from './filter_for_value'; export * from './parse_alert'; export * from './alerts_status_filter'; diff --git a/x-pack/plugins/observability/public/pages/alerts/containers/alerts_page/alerts_page.tsx b/x-pack/plugins/observability/public/pages/alerts/containers/alerts_page/alerts_page.tsx index f18b3741b33ff..ead8a2e89e117 100644 --- a/x-pack/plugins/observability/public/pages/alerts/containers/alerts_page/alerts_page.tsx +++ b/x-pack/plugins/observability/public/pages/alerts/containers/alerts_page/alerts_page.tsx @@ -29,7 +29,7 @@ import { useAlertsPageStateContainer, } from '../state_container'; import './styles.scss'; -import { AlertsStatusFilter, AlertsSearchBar, ALERT_STATUS_QUERY } from '../../components'; +import { AlertsStatusFilter, ALERT_STATUS_QUERY } from '../../components'; import { renderRuleStats } from '../../components/rule_stats'; import { ObservabilityAppServices } from '../../../../application/types'; import { ALERTS_PER_PAGE, ALERTS_TABLE_ID } from './constants'; @@ -46,7 +46,11 @@ function AlertsPage() { docLinks, http, notifications: { toasts }, - triggersActionsUi: { alertsTableConfigurationRegistry, getAlertsStateTable: AlertsStateTable }, + triggersActionsUi: { + alertsTableConfigurationRegistry, + getAlertsStateTable: AlertsStateTable, + getAlertsSearchBar: AlertsSearchBar, + }, data: { query: { timefilter: { timefilter: timeFilterService }, diff --git a/x-pack/plugins/observability/public/plugin.ts b/x-pack/plugins/observability/public/plugin.ts index ec08bbb7bd0d0..c5152104e3bc3 100644 --- a/x-pack/plugins/observability/public/plugin.ts +++ b/x-pack/plugins/observability/public/plugin.ts @@ -38,7 +38,6 @@ import { } from '@kbn/triggers-actions-ui-plugin/public'; import { SecurityPluginStart } from '@kbn/security-plugin/public'; import { GuidedOnboardingPluginStart } from '@kbn/guided-onboarding-plugin/public'; -import { UnifiedSearchPublicPluginStart } from '@kbn/unified-search-plugin/public'; import { observabilityAppId, observabilityFeatureId, casesPath } from '../common'; import { createLazyObservabilityPageTemplate } from './components/shared'; import { registerDataHandler } from './data_handler'; @@ -95,7 +94,6 @@ export interface ObservabilityPublicPluginsStart { actionTypeRegistry: ActionTypeRegistryContract; security: SecurityPluginStart; guidedOnboarding: GuidedOnboardingPluginStart; - unifiedSearch: UnifiedSearchPublicPluginStart; } export type ObservabilityPublicStart = ReturnType; diff --git a/x-pack/plugins/translations/translations/fr-FR.json b/x-pack/plugins/translations/translations/fr-FR.json index 315081311e48d..f94f327b1a6ac 100644 --- a/x-pack/plugins/translations/translations/fr-FR.json +++ b/x-pack/plugins/translations/translations/fr-FR.json @@ -23294,7 +23294,6 @@ "xpack.observability.alerts.ruleStats.loadError": "Impossible de charger les statistiques de règles", "xpack.observability.alerts.ruleStats.muted": "Répété", "xpack.observability.alerts.ruleStats.ruleCount": "Nombre de règles", - "xpack.observability.alerts.searchBarPlaceholder": "Alertes de recherche (par exemple, kibana.alert.evaluation.threshold > 75)", "xpack.observability.alerts.workflowStatusFilter.acknowledgedButtonLabel": "Reconnue(s)", "xpack.observability.alerts.workflowStatusFilter.closedButtonLabel": "Fermé", "xpack.observability.alerts.workflowStatusFilter.openButtonLabel": "Ouvrir", diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json index a0044c2613305..81b84aa0c8cf2 100644 --- a/x-pack/plugins/translations/translations/ja-JP.json +++ b/x-pack/plugins/translations/translations/ja-JP.json @@ -23273,7 +23273,6 @@ "xpack.observability.alerts.ruleStats.loadError": "ルール統計情報を読み込めません", "xpack.observability.alerts.ruleStats.muted": "スヌーズ済み", "xpack.observability.alerts.ruleStats.ruleCount": "ルール数", - "xpack.observability.alerts.searchBarPlaceholder": "検索アラート（例：kibana.alert.evaluation.threshold > 75）", "xpack.observability.alerts.workflowStatusFilter.acknowledgedButtonLabel": "認識", "xpack.observability.alerts.workflowStatusFilter.closedButtonLabel": "終了", "xpack.observability.alerts.workflowStatusFilter.openButtonLabel": "開く", diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json index 42668ff33f42e..f96251cc6fe45 100644 --- a/x-pack/plugins/translations/translations/zh-CN.json +++ b/x-pack/plugins/translations/translations/zh-CN.json @@ -23304,7 +23304,6 @@ "xpack.observability.alerts.ruleStats.loadError": "无法加载规则统计信息", "xpack.observability.alerts.ruleStats.muted": "已暂停", "xpack.observability.alerts.ruleStats.ruleCount": "规则计数", - "xpack.observability.alerts.searchBarPlaceholder": "搜索告警（例如 kibana.alert.evaluation.threshold > 75）", "xpack.observability.alerts.workflowStatusFilter.acknowledgedButtonLabel": "已确认", "xpack.observability.alerts.workflowStatusFilter.closedButtonLabel": "已关闭", "xpack.observability.alerts.workflowStatusFilter.openButtonLabel": "打开", diff --git a/x-pack/plugins/observability/public/hooks/use_alert_data_view.test.ts b/x-pack/plugins/triggers_actions_ui/public/application/hooks/use_alert_data_view.test.ts similarity index 100% rename from x-pack/plugins/observability/public/hooks/use_alert_data_view.test.ts rename to x-pack/plugins/triggers_actions_ui/public/application/hooks/use_alert_data_view.test.ts diff --git a/x-pack/plugins/observability/public/hooks/use_alert_data_view.ts b/x-pack/plugins/triggers_actions_ui/public/application/hooks/use_alert_data_view.ts similarity index 87% rename from x-pack/plugins/observability/public/hooks/use_alert_data_view.ts rename to x-pack/plugins/triggers_actions_ui/public/application/hooks/use_alert_data_view.ts index aad2a8e030eba..9da62ed75243d 100644 --- a/x-pack/plugins/observability/public/hooks/use_alert_data_view.ts +++ b/x-pack/plugins/triggers_actions_ui/public/application/hooks/use_alert_data_view.ts @@ -11,11 +11,10 @@ import { BASE_RAC_ALERTS_API_PATH } from '@kbn/rule-registry-plugin/common'; import type { ValidFeatureId } from '@kbn/rule-data-utils'; import useAsync from 'react-use/lib/useAsync'; import type { AsyncState } from 'react-use/lib/useAsync'; - -import { ObservabilityAppServices } from '../application/types'; +import { TriggersAndActionsUiServices } from '../..'; export function useAlertDataView(featureIds: ValidFeatureId[]): AsyncState { - const { http, data: dataService } = useKibana().services; + const { http, data: dataService } = useKibana().services; const features = featureIds.sort().join(','); const dataView = useAsync(async () => { diff --git a/x-pack/plugins/observability/public/pages/alerts/components/alerts_search_bar.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_search_bar/alerts_search_bar.tsx similarity index 62% rename from x-pack/plugins/observability/public/pages/alerts/components/alerts_search_bar.tsx rename to x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_search_bar/alerts_search_bar.tsx index e1dd3743e3871..64a1e6423acc6 100644 --- a/x-pack/plugins/observability/public/pages/alerts/components/alerts_search_bar.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_search_bar/alerts_search_bar.tsx @@ -6,16 +6,12 @@ */ import React, { useState } from 'react'; -import { DataView } from '@kbn/data-views-plugin/common'; import { useKibana } from '@kbn/kibana-react-plugin/public'; -import type { ValidFeatureId } from '@kbn/rule-data-utils'; -import { translations } from '../../../config'; -import { ObservabilityAppServices } from '../../../application/types'; -import { useAlertDataView } from '../../../hooks/use_alert_data_view'; - -type QueryLanguageType = 'lucene' | 'kuery'; - -const NO_INDEX_PATTERNS: DataView[] = []; +import { NO_INDEX_PATTERNS } from './constants'; +import { SEARCH_BAR_PLACEHOLDER } from './translations'; +import { AlertsSearchBarProps, QueryLanguageType } from './types'; +import { useAlertDataView } from '../../hooks/use_alert_data_view'; +import { TriggersAndActionsUiServices } from '../../..'; export function AlertsSearchBar({ appName, @@ -24,22 +20,12 @@ export function AlertsSearchBar({ onQueryChange, rangeFrom, rangeTo, -}: { - appName: string; - featureIds: ValidFeatureId[]; - rangeFrom?: string; - rangeTo?: string; - query?: string; - onQueryChange: ({}: { - dateRange: { from: string; to: string; mode?: 'absolute' | 'relative' }; - query?: string; - }) => void; -}) { +}: AlertsSearchBarProps) { const { unifiedSearch: { ui: { SearchBar }, }, - } = useKibana().services; + } = useKibana().services; const [queryLanguage, setQueryLanguage] = useState('kuery'); const { value: dataView, loading, error } = useAlertDataView(featureIds); @@ -48,7 +34,7 @@ export function AlertsSearchBar({ ); } + +// eslint-disable-next-line import/no-default-export +export { AlertsSearchBar as default }; diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_search_bar/constants.ts b/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_search_bar/constants.ts new file mode 100644 index 0000000000000..e1eca7239cc9d --- /dev/null +++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_search_bar/constants.ts @@ -0,0 +1,10 @@ +/* + * 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 { DataView } from '@kbn/data-views-plugin/common'; + +export const NO_INDEX_PATTERNS: DataView[] = []; diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_search_bar/index.ts b/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_search_bar/index.ts new file mode 100644 index 0000000000000..bfc3f022c37cf --- /dev/null +++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_search_bar/index.ts @@ -0,0 +1,10 @@ +/* + * 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. + */ + +export { AlertsSearchBar } from './alerts_search_bar'; + +export type { AlertsSearchBarProps } from './types'; diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_search_bar/translations.ts b/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_search_bar/translations.ts new file mode 100644 index 0000000000000..a5f4fc4b5754e --- /dev/null +++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_search_bar/translations.ts @@ -0,0 +1,15 @@ +/* + * 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 { i18n } from '@kbn/i18n'; + +export const SEARCH_BAR_PLACEHOLDER = i18n.translate( + 'xpack.triggersActionsUI.alertsSearchBar.placeholder', + { + defaultMessage: 'Search alerts (e.g. kibana.alert.evaluation.threshold > 75)', + } +); diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_search_bar/types.ts b/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_search_bar/types.ts new file mode 100644 index 0000000000000..86e3e60ef059e --- /dev/null +++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_search_bar/types.ts @@ -0,0 +1,22 @@ +/* + * 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 { ValidFeatureId } from '@kbn/rule-data-utils'; + +export type QueryLanguageType = 'lucene' | 'kuery'; + +export interface AlertsSearchBarProps { + appName: string; + featureIds: ValidFeatureId[]; + rangeFrom?: string; + rangeTo?: string; + query?: string; + onQueryChange: ({}: { + dateRange: { from: string; to: string; mode?: 'absolute' | 'relative' }; + query?: string; + }) => void; +} diff --git a/x-pack/plugins/triggers_actions_ui/public/common/get_alerts_search_bar.tsx b/x-pack/plugins/triggers_actions_ui/public/common/get_alerts_search_bar.tsx new file mode 100644 index 0000000000000..ddeb5e5c4c067 --- /dev/null +++ b/x-pack/plugins/triggers_actions_ui/public/common/get_alerts_search_bar.tsx @@ -0,0 +1,20 @@ +/* + * 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 { EuiLoadingSpinner } from '@elastic/eui'; +import React, { lazy, Suspense } from 'react'; +import type { AlertsSearchBarProps } from '../application/sections/alerts_search_bar'; + +const AlertsSearchBarLazy: React.FC = lazy( + () => import('../application/sections/alerts_search_bar/alerts_search_bar') +); + +export const getAlertsSearchBarLazy = (props: AlertsSearchBarProps) => ( + }> + + +); diff --git a/x-pack/plugins/triggers_actions_ui/public/plugin.ts b/x-pack/plugins/triggers_actions_ui/public/plugin.ts index 9e4645b164f21..d8ebc2298dca9 100644 --- a/x-pack/plugins/triggers_actions_ui/public/plugin.ts +++ b/x-pack/plugins/triggers_actions_ui/public/plugin.ts @@ -23,6 +23,7 @@ import type { DataViewEditorStart } from '@kbn/data-view-editor-plugin/public'; import { Storage } from '@kbn/kibana-utils-plugin/public'; import type { SpacesPluginStart } from '@kbn/spaces-plugin/public'; import type { UnifiedSearchPublicPluginStart } from '@kbn/unified-search-plugin/public'; +import type { AlertsSearchBarProps } from './application/sections/alerts_search_bar'; import { TypeRegistry } from './application/type_registry'; import { getAddConnectorFlyoutLazy } from './common/get_add_connector_flyout'; @@ -72,6 +73,7 @@ import { registerAlertsTableConfiguration } from './application/sections/alerts_ import { PLUGIN_ID, CONNECTORS_PLUGIN_ID } from './common/constants'; import type { AlertsTableStateProps } from './application/sections/alerts_table/alerts_table_state'; import { getAlertsTableStateLazy } from './common/get_alerts_table_state'; +import { getAlertsSearchBarLazy } from './common/get_alerts_search_bar'; import { ActionAccordionFormProps } from './application/sections/action_connector_form/action_form'; import type { FieldBrowserProps } from './application/sections/field_browser/types'; import { getRuleDefinitionLazy } from './common/get_rule_definition'; @@ -108,6 +110,7 @@ export interface TriggersAndActionsUIPublicPluginStart { ) => ReactElement; getAlertsTable: (props: AlertsTableProps) => ReactElement; getAlertsStateTable: (props: AlertsTableStateProps) => ReactElement; + getAlertsSearchBar: (props: AlertsSearchBarProps) => ReactElement; getFieldBrowser: (props: FieldBrowserProps) => ReactElement; getRuleStatusDropdown: (props: RuleStatusDropdownProps) => ReactElement; getRuleTagFilter: (props: RuleTagFilterProps) => ReactElement; @@ -378,6 +381,9 @@ export class Plugin getAlertsStateTable: (props: AlertsTableStateProps) => { return getAlertsTableStateLazy(props); }, + getAlertsSearchBar: (props: AlertsSearchBarProps) => { + return getAlertsSearchBarLazy(props); + }, getAlertsTable: (props: AlertsTableProps) => { return getAlertsTableLazy(props); }, From cc5c523d3a488c12ccdf50aa193dbf018cc769a3 Mon Sep 17 00:00:00 2001 From: Maryam Saeidi Date: Thu, 3 Nov 2022 16:26:53 +0100 Subject: [PATCH 2/4] Fix useAlertDataView test --- src/plugins/data/public/mocks.ts | 2 +- src/plugins/data_views/public/mocks.ts | 3 ++- .../hooks/use_alert_data_view.test.ts | 24 ++++++++++++------- .../common/lib/kibana/kibana_react.mock.ts | 5 ++-- 4 files changed, 21 insertions(+), 13 deletions(-) diff --git a/src/plugins/data/public/mocks.ts b/src/plugins/data/public/mocks.ts index fadc844af4b58..ec7875f1a14e8 100644 --- a/src/plugins/data/public/mocks.ts +++ b/src/plugins/data/public/mocks.ts @@ -25,7 +25,7 @@ const createSetupContract = (): Setup => { }; }; -const createStartContract = (): Start => { +const createStartContract = () => { const queryStartMock = queryServiceMock.createStartContract(); const dataViews = dataViewPluginMocks.createStartContract(); diff --git a/src/plugins/data_views/public/mocks.ts b/src/plugins/data_views/public/mocks.ts index 61db42e18a9be..5f77727c5ee8a 100644 --- a/src/plugins/data_views/public/mocks.ts +++ b/src/plugins/data_views/public/mocks.ts @@ -13,9 +13,10 @@ export type Start = jest.Mocked>; const createSetupContract = (): Setup => ({}); -const createStartContract = (): Start => { +const createStartContract = () => { return { find: jest.fn((search) => [{ id: search, title: search }]), + create: jest.fn(() => {}), createField: jest.fn(() => {}), createFieldList: jest.fn(() => []), ensureDefaultIndexPattern: jest.fn(), diff --git a/x-pack/plugins/triggers_actions_ui/public/application/hooks/use_alert_data_view.test.ts b/x-pack/plugins/triggers_actions_ui/public/application/hooks/use_alert_data_view.test.ts index 77db2492d4227..ecc06b2794d6c 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/hooks/use_alert_data_view.test.ts +++ b/x-pack/plugins/triggers_actions_ui/public/application/hooks/use_alert_data_view.test.ts @@ -6,25 +6,33 @@ */ import { DataView } from '@kbn/data-views-plugin/common'; +import { AlertConsumers } from '@kbn/rule-data-utils'; +import { createStartServicesMock } from '../../common/lib/kibana/kibana_react.mock'; import type { ValidFeatureId } from '@kbn/rule-data-utils'; import { act, renderHook } from '@testing-library/react-hooks'; import { AsyncState } from 'react-use/lib/useAsync'; -import { kibanaStartMock } from '../utils/kibana_react.mock'; -import { observabilityAlertFeatureIds } from '../config'; import { useAlertDataView } from './use_alert_data_view'; -const mockUseKibanaReturnValue = kibanaStartMock.startContract(); +const mockUseKibanaReturnValue = createStartServicesMock(); jest.mock('@kbn/kibana-react-plugin/public', () => ({ __esModule: true, - useKibana: jest.fn(() => mockUseKibanaReturnValue), + useKibana: jest.fn(() => ({ + services: mockUseKibanaReturnValue, + })), })); describe('useAlertDataView', () => { const mockedDataView = 'dataView'; + const observabilityAlertFeatureIds: ValidFeatureId[] = [ + AlertConsumers.APM, + AlertConsumers.INFRASTRUCTURE, + AlertConsumers.LOGS, + AlertConsumers.UPTIME, + ]; beforeEach(() => { - mockUseKibanaReturnValue.services.http.get.mockImplementation(async () => ({ + mockUseKibanaReturnValue.http.get.mockImplementation(async () => ({ index_name: [ '.alerts-observability.uptime.alerts-*', '.alerts-observability.metrics.alerts-*', @@ -32,8 +40,8 @@ describe('useAlertDataView', () => { '.alerts-observability.apm.alerts-*', ], })); - mockUseKibanaReturnValue.services.data.dataViews.create.mockImplementation( - async () => mockedDataView + mockUseKibanaReturnValue.data.dataViews.create.mockImplementation( + async () => mockedDataView as any as DataView ); }); @@ -77,7 +85,7 @@ describe('useAlertDataView', () => { it('returns error with no data when error happens', async () => { const error = new Error('http error'); - mockUseKibanaReturnValue.services.http.get.mockImplementation(async () => { + mockUseKibanaReturnValue.http.get.mockImplementation(async () => { throw error; }); diff --git a/x-pack/plugins/triggers_actions_ui/public/common/lib/kibana/kibana_react.mock.ts b/x-pack/plugins/triggers_actions_ui/public/common/lib/kibana/kibana_react.mock.ts index c6b8a8376183a..e9c1679524771 100644 --- a/x-pack/plugins/triggers_actions_ui/public/common/lib/kibana/kibana_react.mock.ts +++ b/x-pack/plugins/triggers_actions_ui/public/common/lib/kibana/kibana_react.mock.ts @@ -12,7 +12,6 @@ import { dataViewPluginMocks } from '@kbn/data-views-plugin/public/mocks'; import { unifiedSearchPluginMock } from '@kbn/unified-search-plugin/public/mocks'; import { coreMock, scopedHistoryMock, themeServiceMock } from '@kbn/core/public/mocks'; import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public'; -import { TriggersAndActionsUiServices } from '../../../application/app'; import { RuleTypeRegistryContract, ActionTypeRegistryContract, @@ -20,7 +19,7 @@ import { } from '../../../types'; import { DataViewEditorStart } from '@kbn/data-view-editor-plugin/public'; -export const createStartServicesMock = (): TriggersAndActionsUiServices => { +export const createStartServicesMock = () => { const core = coreMock.createStart(); return { ...core, @@ -65,7 +64,7 @@ export const createStartServicesMock = (): TriggersAndActionsUiServices => { style: { cursor: 'pointer' }, } as unknown as HTMLElement, theme$: themeServiceMock.createTheme$(), - } as TriggersAndActionsUiServices; + }; }; export const createWithKibanaMock = () => { From fa5c765baa9680fbd8208294e84ca6b1950d4da9 Mon Sep 17 00:00:00 2001 From: Maryam Saeidi Date: Fri, 4 Nov 2022 14:30:11 +0100 Subject: [PATCH 3/4] Fix mocks for useAlertDataView test --- src/plugins/data/public/mocks.ts | 2 +- src/plugins/data_views/public/mocks.ts | 2 +- .../application/hooks/use_alert_data_view.test.ts | 10 ++++------ .../public/common/lib/kibana/kibana_react.mock.ts | 5 +++-- 4 files changed, 9 insertions(+), 10 deletions(-) diff --git a/src/plugins/data/public/mocks.ts b/src/plugins/data/public/mocks.ts index ec7875f1a14e8..fadc844af4b58 100644 --- a/src/plugins/data/public/mocks.ts +++ b/src/plugins/data/public/mocks.ts @@ -25,7 +25,7 @@ const createSetupContract = (): Setup => { }; }; -const createStartContract = () => { +const createStartContract = (): Start => { const queryStartMock = queryServiceMock.createStartContract(); const dataViews = dataViewPluginMocks.createStartContract(); diff --git a/src/plugins/data_views/public/mocks.ts b/src/plugins/data_views/public/mocks.ts index 5f77727c5ee8a..333a52d401e9e 100644 --- a/src/plugins/data_views/public/mocks.ts +++ b/src/plugins/data_views/public/mocks.ts @@ -13,7 +13,7 @@ export type Start = jest.Mocked>; const createSetupContract = (): Setup => ({}); -const createStartContract = () => { +const createStartContract = (): Start => { return { find: jest.fn((search) => [{ id: search, title: search }]), create: jest.fn(() => {}), diff --git a/x-pack/plugins/triggers_actions_ui/public/application/hooks/use_alert_data_view.test.ts b/x-pack/plugins/triggers_actions_ui/public/application/hooks/use_alert_data_view.test.ts index ecc06b2794d6c..05696e19c618a 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/hooks/use_alert_data_view.test.ts +++ b/x-pack/plugins/triggers_actions_ui/public/application/hooks/use_alert_data_view.test.ts @@ -32,17 +32,15 @@ describe('useAlertDataView', () => { ]; beforeEach(() => { - mockUseKibanaReturnValue.http.get.mockImplementation(async () => ({ + mockUseKibanaReturnValue.http.get = jest.fn().mockReturnValue({ index_name: [ '.alerts-observability.uptime.alerts-*', '.alerts-observability.metrics.alerts-*', '.alerts-observability.logs.alerts-*', '.alerts-observability.apm.alerts-*', ], - })); - mockUseKibanaReturnValue.data.dataViews.create.mockImplementation( - async () => mockedDataView as any as DataView - ); + }); + mockUseKibanaReturnValue.data.dataViews.create = jest.fn().mockReturnValue(mockedDataView); }); afterEach(() => { @@ -85,7 +83,7 @@ describe('useAlertDataView', () => { it('returns error with no data when error happens', async () => { const error = new Error('http error'); - mockUseKibanaReturnValue.http.get.mockImplementation(async () => { + mockUseKibanaReturnValue.http.get = jest.fn().mockImplementation(async () => { throw error; }); diff --git a/x-pack/plugins/triggers_actions_ui/public/common/lib/kibana/kibana_react.mock.ts b/x-pack/plugins/triggers_actions_ui/public/common/lib/kibana/kibana_react.mock.ts index e9c1679524771..c6b8a8376183a 100644 --- a/x-pack/plugins/triggers_actions_ui/public/common/lib/kibana/kibana_react.mock.ts +++ b/x-pack/plugins/triggers_actions_ui/public/common/lib/kibana/kibana_react.mock.ts @@ -12,6 +12,7 @@ import { dataViewPluginMocks } from '@kbn/data-views-plugin/public/mocks'; import { unifiedSearchPluginMock } from '@kbn/unified-search-plugin/public/mocks'; import { coreMock, scopedHistoryMock, themeServiceMock } from '@kbn/core/public/mocks'; import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public'; +import { TriggersAndActionsUiServices } from '../../../application/app'; import { RuleTypeRegistryContract, ActionTypeRegistryContract, @@ -19,7 +20,7 @@ import { } from '../../../types'; import { DataViewEditorStart } from '@kbn/data-view-editor-plugin/public'; -export const createStartServicesMock = () => { +export const createStartServicesMock = (): TriggersAndActionsUiServices => { const core = coreMock.createStart(); return { ...core, @@ -64,7 +65,7 @@ export const createStartServicesMock = () => { style: { cursor: 'pointer' }, } as unknown as HTMLElement, theme$: themeServiceMock.createTheme$(), - }; + } as TriggersAndActionsUiServices; }; export const createWithKibanaMock = () => { From 1ce962b13f9dadc4212452c2658aa775deeb21b9 Mon Sep 17 00:00:00 2001 From: Maryam Saeidi Date: Fri, 4 Nov 2022 15:51:45 +0100 Subject: [PATCH 4/4] Fix type issue and add getAlertsSearchBar mock --- src/plugins/data_views/public/mocks.ts | 1 - .../alerts_search_bar/alerts_search_bar.tsx | 23 ++++++++++++------- .../triggers_actions_ui/public/mocks.ts | 5 ++++ 3 files changed, 20 insertions(+), 9 deletions(-) diff --git a/src/plugins/data_views/public/mocks.ts b/src/plugins/data_views/public/mocks.ts index 333a52d401e9e..61db42e18a9be 100644 --- a/src/plugins/data_views/public/mocks.ts +++ b/src/plugins/data_views/public/mocks.ts @@ -16,7 +16,6 @@ const createSetupContract = (): Setup => ({}); const createStartContract = (): Start => { return { find: jest.fn((search) => [{ id: search, title: search }]), - create: jest.fn(() => {}), createField: jest.fn(() => {}), createFieldList: jest.fn(() => []), ensureDefaultIndexPattern: jest.fn(), diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_search_bar/alerts_search_bar.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_search_bar/alerts_search_bar.tsx index 64a1e6423acc6..193d6abf1433b 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_search_bar/alerts_search_bar.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_search_bar/alerts_search_bar.tsx @@ -5,7 +5,7 @@ * 2.0. */ -import React, { useState } from 'react'; +import React, { useCallback, useState } from 'react'; import { useKibana } from '@kbn/kibana-react-plugin/public'; import { NO_INDEX_PATTERNS } from './constants'; import { SEARCH_BAR_PLACEHOLDER } from './translations'; @@ -13,6 +13,7 @@ import { AlertsSearchBarProps, QueryLanguageType } from './types'; import { useAlertDataView } from '../../hooks/use_alert_data_view'; import { TriggersAndActionsUiServices } from '../../..'; +// TODO Share buildEsQuery to be used between AlertsSearchBar and AlertsStateTable component https://github.com/elastic/kibana/issues/144615 export function AlertsSearchBar({ appName, featureIds, @@ -30,6 +31,18 @@ export function AlertsSearchBar({ const [queryLanguage, setQueryLanguage] = useState('kuery'); const { value: dataView, loading, error } = useAlertDataView(featureIds); + const onQuerySubmit = useCallback( + (payload) => { + const { dateRange, query: nextQuery } = payload; + onQueryChange({ + dateRange, + query: typeof nextQuery?.query === 'string' ? nextQuery.query : '', + }); + setQueryLanguage((nextQuery?.language ?? 'kuery') as QueryLanguageType); + }, + [onQueryChange, setQueryLanguage] + ); + return ( { - onQueryChange({ - dateRange, - query: typeof nextQuery?.query === 'string' ? nextQuery.query : '', - }); - setQueryLanguage((nextQuery?.language ?? 'kuery') as QueryLanguageType); - }} + onQuerySubmit={onQuerySubmit} /> ); } diff --git a/x-pack/plugins/triggers_actions_ui/public/mocks.ts b/x-pack/plugins/triggers_actions_ui/public/mocks.ts index 7c18ea1b6fa2c..d753feb597a6c 100644 --- a/x-pack/plugins/triggers_actions_ui/public/mocks.ts +++ b/x-pack/plugins/triggers_actions_ui/public/mocks.ts @@ -33,8 +33,10 @@ import { getRuleTagBadgeLazy } from './common/get_rule_tag_badge'; import { getRuleEventLogListLazy } from './common/get_rule_event_log_list'; import { getRulesListLazy } from './common/get_rules_list'; import { getAlertsTableStateLazy } from './common/get_alerts_table_state'; +import { getAlertsSearchBarLazy } from './common/get_alerts_search_bar'; import { getRulesListNotifyBadgeLazy } from './common/get_rules_list_notify_badge'; import { AlertsTableStateProps } from './application/sections/alerts_table/alerts_table_state'; +import { AlertsSearchBarProps } from './application/sections/alerts_search_bar'; import { CreateConnectorFlyoutProps } from './application/sections/action_connector_form/create_connector_flyout'; import { EditConnectorFlyoutProps } from './application/sections/action_connector_form/edit_connector_flyout'; import { getActionFormLazy } from './common/get_action_form'; @@ -86,6 +88,9 @@ function createStartMock(): TriggersAndActionsUIPublicPluginStart { getAlertsStateTable: (props: AlertsTableStateProps) => { return getAlertsTableStateLazy(props); }, + getAlertsSearchBar: (props: AlertsSearchBarProps) => { + return getAlertsSearchBarLazy(props); + }, getAlertsTable: (props: AlertsTableProps) => { return getAlertsTableLazy(props); },