diff --git a/x-pack/plugins/observability/public/pages/rule_details/components/center_justified_spinner.tsx b/x-pack/plugins/observability/public/components/center_justified_spinner.tsx similarity index 100% rename from x-pack/plugins/observability/public/pages/rule_details/components/center_justified_spinner.tsx rename to x-pack/plugins/observability/public/components/center_justified_spinner.tsx diff --git a/x-pack/plugins/observability/public/pages/alert_details/components/alert_details.test.tsx b/x-pack/plugins/observability/public/pages/alert_details/alert_details.test.tsx similarity index 85% rename from x-pack/plugins/observability/public/pages/alert_details/components/alert_details.test.tsx rename to x-pack/plugins/observability/public/pages/alert_details/alert_details.test.tsx index 6117793e4175e..036a3c9d31105 100644 --- a/x-pack/plugins/observability/public/pages/alert_details/components/alert_details.test.tsx +++ b/x-pack/plugins/observability/public/pages/alert_details/alert_details.test.tsx @@ -12,15 +12,15 @@ import { Chance } from 'chance'; import { waitFor } from '@testing-library/react'; import { casesPluginMock } from '@kbn/cases-plugin/public/mocks'; -import { Subset } from '../../../typings'; -import { render } from '../../../utils/test_helper'; -import { useKibana } from '../../../utils/kibana_react'; -import { kibanaStartMock } from '../../../utils/kibana_react.mock'; -import { useFetchAlertDetail } from '../../../hooks/use_fetch_alert_detail'; -import { useBreadcrumbs } from '../../../hooks/use_breadcrumbs'; +import { Subset } from '../../typings'; +import { render } from '../../utils/test_helper'; +import { useKibana } from '../../utils/kibana_react'; +import { kibanaStartMock } from '../../utils/kibana_react.mock'; +import { useFetchAlertDetail } from '../../hooks/use_fetch_alert_detail'; +import { useBreadcrumbs } from '../../hooks/use_breadcrumbs'; import { AlertDetails } from './alert_details'; -import { ConfigSchema } from '../../../plugin'; -import { alert, alertWithNoData } from '../mock/alert'; +import { ConfigSchema } from '../../plugin'; +import { alert, alertWithNoData } from './mock/alert'; import { ruleTypeRegistryMock } from '@kbn/triggers-actions-ui-plugin/public/application/rule_type_registry.mock'; import { RuleTypeModel, ValidationResult } from '@kbn/triggers-actions-ui-plugin/public'; @@ -29,7 +29,7 @@ jest.mock('react-router-dom', () => ({ useParams: jest.fn(), })); -jest.mock('../../../utils/kibana_react'); +jest.mock('../../utils/kibana_react'); const validationMethod = (): ValidationResult => ({ errors: {} }); const ruleType: RuleTypeModel = { id: 'logs.alert.document.count', @@ -61,8 +61,8 @@ const mockKibana = () => { }); }; -jest.mock('../../../hooks/use_fetch_alert_detail'); -jest.mock('../../../hooks/use_fetch_rule', () => { +jest.mock('../../hooks/use_fetch_alert_detail'); +jest.mock('../../hooks/use_fetch_rule', () => { return { useFetchRule: () => ({ reloadRule: jest.fn(), @@ -73,8 +73,8 @@ jest.mock('../../../hooks/use_fetch_rule', () => { }), }; }); -jest.mock('../../../hooks/use_breadcrumbs'); -jest.mock('../../../hooks/use_get_user_cases_permissions', () => ({ +jest.mock('../../hooks/use_breadcrumbs'); +jest.mock('../../hooks/use_get_user_cases_permissions', () => ({ useGetUserCasesPermissions: () => ({ all: true, create: true, diff --git a/x-pack/plugins/observability/public/pages/alert_details/components/alert_details.tsx b/x-pack/plugins/observability/public/pages/alert_details/alert_details.tsx similarity index 77% rename from x-pack/plugins/observability/public/pages/alert_details/components/alert_details.tsx rename to x-pack/plugins/observability/public/pages/alert_details/alert_details.tsx index 9bb0ca97cfc57..ec1c933c93501 100644 --- a/x-pack/plugins/observability/public/pages/alert_details/components/alert_details.tsx +++ b/x-pack/plugins/observability/public/pages/alert_details/alert_details.tsx @@ -11,33 +11,38 @@ import { useParams } from 'react-router-dom'; import { EuiEmptyPrompt, EuiPanel, EuiSpacer } from '@elastic/eui'; import { ALERT_RULE_TYPE_ID, ALERT_RULE_UUID } from '@kbn/rule-data-utils'; import { RuleTypeModel } from '@kbn/triggers-actions-ui-plugin/public'; -import { getTimeZone } from '../../../utils/get_time_zone'; -import { useFetchRule } from '../../../hooks/use_fetch_rule'; -import { isAlertDetailsEnabledPerApp } from '../../../utils/is_alert_details_enabled'; -import { useKibana } from '../../../utils/kibana_react'; -import { usePluginContext } from '../../../hooks/use_plugin_context'; -import { useBreadcrumbs } from '../../../hooks/use_breadcrumbs'; -import { useFetchAlertDetail } from '../../../hooks/use_fetch_alert_detail'; -import { AlertSummary, HeaderActions, PageTitle } from '.'; -import { CenterJustifiedSpinner } from '../../rule_details/components/center_justified_spinner'; -import PageNotFound from '../../404'; +import { useKibana } from '../../utils/kibana_react'; +import { useFetchRule } from '../../hooks/use_fetch_rule'; +import { usePluginContext } from '../../hooks/use_plugin_context'; +import { useBreadcrumbs } from '../../hooks/use_breadcrumbs'; +import { useFetchAlertDetail } from '../../hooks/use_fetch_alert_detail'; +import { PageTitle } from './components/page_title'; +import { HeaderActions } from './components/header_actions'; +import { AlertSummary, AlertSummaryField } from './components/alert_summary'; +import { CenterJustifiedSpinner } from '../../components/center_justified_spinner'; +import PageNotFound from '../404'; +import { getTimeZone } from '../../utils/get_time_zone'; +import { isAlertDetailsEnabledPerApp } from '../../utils/is_alert_details_enabled'; +import { observabilityFeatureId } from '../../../common'; +import { paths } from '../../config/paths'; +import type { ObservabilityAppServices } from '../../application/types'; -import { ObservabilityAppServices } from '../../../application/types'; -import { AlertDetailsPathParams } from '../types'; -import { observabilityFeatureId } from '../../../../common'; -import { paths } from '../../../config/paths'; -import type { AlertSummaryField } from './alert_summary'; +interface AlertDetailsPathParams { + alertId: string; +} + +export const ALERT_DETAILS_PAGE_ID = 'alert-details-o11y'; export function AlertDetails() { const { - uiSettings, - http, cases: { helpers: { canUseCases }, ui: { getCasesContext }, }, + http, triggersActionsUi: { ruleTypeRegistry }, + uiSettings, } = useKibana().services; const { ObservabilityPageTemplate, config } = usePluginContext(); diff --git a/x-pack/plugins/observability/public/pages/alert_details/components/alert_summary.tsx b/x-pack/plugins/observability/public/pages/alert_details/components/alert_summary.tsx index 0de5b3bfd6a38..2c81b6922337a 100644 --- a/x-pack/plugins/observability/public/pages/alert_details/components/alert_summary.tsx +++ b/x-pack/plugins/observability/public/pages/alert_details/components/alert_summary.tsx @@ -28,8 +28,6 @@ import { } from '@kbn/rule-data-utils'; import { asDuration } from '../../../../common/utils/formatters'; import { AlertStatusIndicator } from '../../../components/shared/alert_status_indicator'; -import { DEFAULT_DATE_FORMAT } from '../constants'; - import type { TopAlert } from '../../../typings/alerts'; export interface AlertSummaryField { @@ -41,6 +39,8 @@ export interface AlertSummaryProps { alertSummaryFields?: AlertSummaryField[]; } +const DEFAULT_DATE_FORMAT = 'MMM D, YYYY @ HH:mm:ss.SSS'; + const getAndFormatAlertSummaryBasicFields = (alert: TopAlert | null): React.ReactElement => { const tags = alert?.fields[ALERT_RULE_TAGS]; return ( diff --git a/x-pack/plugins/observability/public/pages/alert_details/components/header_actions.tsx b/x-pack/plugins/observability/public/pages/alert_details/components/header_actions.tsx index ee9254c421ba8..33f4cb4400ede 100644 --- a/x-pack/plugins/observability/public/pages/alert_details/components/header_actions.tsx +++ b/x-pack/plugins/observability/public/pages/alert_details/components/header_actions.tsx @@ -15,7 +15,7 @@ import { ALERT_RULE_UUID, ALERT_UUID } from '@kbn/rule-data-utils'; import { useKibana } from '../../../utils/kibana_react'; import { useFetchRule } from '../../../hooks/use_fetch_rule'; -import { ObservabilityAppServices } from '../../../application/types'; +import type { ObservabilityAppServices } from '../../../application/types'; import type { TopAlert } from '../../../typings/alerts'; export interface HeaderActionsProps { @@ -28,7 +28,7 @@ export function HeaderActions({ alert }: HeaderActionsProps) { cases: { hooks: { getUseCasesAddToExistingCaseModal }, }, - triggersActionsUi: { getEditAlertFlyout, getRuleSnoozeModal }, + triggersActionsUi: { getEditAlertFlyout: EditRuleFlyout, getRuleSnoozeModal: RuleSnoozeModal }, } = useKibana().services; const { rule, reloadRule } = useFetchRule({ @@ -137,24 +137,24 @@ export function HeaderActions({ alert }: HeaderActionsProps) { - {rule && ruleConditionsFlyoutOpen - ? getEditAlertFlyout({ - initialRule: rule, - onClose: () => { - setRuleConditionsFlyoutOpen(false); - }, - onSave: reloadRule, - }) - : null} - - {rule && snoozeModalOpen - ? getRuleSnoozeModal({ - rule, - onClose: () => setSnoozeModalOpen(false), - onRuleChanged: reloadRule, - onLoading: noop, - }) - : null} + {rule && ruleConditionsFlyoutOpen ? ( + { + setRuleConditionsFlyoutOpen(false); + }} + onSave={reloadRule} + /> + ) : null} + + {rule && snoozeModalOpen ? ( + setSnoozeModalOpen(false)} + onRuleChanged={reloadRule} + onLoading={noop} + /> + ) : null} ); } diff --git a/x-pack/plugins/observability/public/pages/alert_details/components/index.ts b/x-pack/plugins/observability/public/pages/alert_details/components/index.ts deleted file mode 100644 index 9e2ae5d34dc18..0000000000000 --- a/x-pack/plugins/observability/public/pages/alert_details/components/index.ts +++ /dev/null @@ -1,11 +0,0 @@ -/* - * 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 { HeaderActions } from './header_actions'; -export { AlertSummary } from './alert_summary'; -export { AlertDetails } from './alert_details'; -export { PageTitle } from './page_title'; diff --git a/x-pack/plugins/observability/public/pages/alert_details/constants.ts b/x-pack/plugins/observability/public/pages/alert_details/constants.ts deleted file mode 100644 index b70a27b81eade..0000000000000 --- a/x-pack/plugins/observability/public/pages/alert_details/constants.ts +++ /dev/null @@ -1,8 +0,0 @@ -/* - * 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 const DEFAULT_DATE_FORMAT = 'MMM D, YYYY @ HH:mm:ss.SSS'; diff --git a/x-pack/plugins/observability/public/pages/alert_details/index.ts b/x-pack/plugins/observability/public/pages/alert_details/index.ts deleted file mode 100644 index a6fe1a7a2fdda..0000000000000 --- a/x-pack/plugins/observability/public/pages/alert_details/index.ts +++ /dev/null @@ -1,8 +0,0 @@ -/* - * 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 { AlertDetails } from './components'; diff --git a/x-pack/plugins/observability/public/pages/alert_details/types.ts b/x-pack/plugins/observability/public/pages/alert_details/types.ts deleted file mode 100644 index b10aa73cfc646..0000000000000 --- a/x-pack/plugins/observability/public/pages/alert_details/types.ts +++ /dev/null @@ -1,10 +0,0 @@ -/* - * 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 interface AlertDetailsPathParams { - alertId: string; -} diff --git a/x-pack/plugins/observability/public/pages/rule_details/index.tsx b/x-pack/plugins/observability/public/pages/rule_details/index.tsx index 8ea9e98f49bd8..59b81ff615df2 100644 --- a/x-pack/plugins/observability/public/pages/rule_details/index.tsx +++ b/x-pack/plugins/observability/public/pages/rule_details/index.tsx @@ -45,7 +45,7 @@ import { } from '../../utils/alert_summary_widget'; import { ObservabilityAlertSearchbarWithUrlSync } from '../../components/shared/alert_search_bar'; import { DeleteModalConfirmation } from './components/delete_modal_confirmation'; -import { CenterJustifiedSpinner } from './components/center_justified_spinner'; +import { CenterJustifiedSpinner } from '../../components/center_justified_spinner'; import { EXECUTION_TAB, diff --git a/x-pack/plugins/observability/public/routes/index.tsx b/x-pack/plugins/observability/public/routes/index.tsx index b1cd06494437e..25b2ce8f8169e 100644 --- a/x-pack/plugins/observability/public/routes/index.tsx +++ b/x-pack/plugins/observability/public/routes/index.tsx @@ -18,7 +18,7 @@ import { ObservabilityExploratoryView } from '../components/shared/exploratory_v import { RulesPage } from '../pages/rules'; import { RuleDetailsPage } from '../pages/rule_details'; import { AlertingPages } from '../config'; -import { AlertDetails } from '../pages/alert_details'; +import { AlertDetails } from '../pages/alert_details/alert_details'; import { DatePickerContextProvider } from '../context/date_picker_context'; import { SlosPage } from '../pages/slos'; import { SloDetailsPage } from '../pages/slo_details/slo_details'; diff --git a/x-pack/plugins/observability/public/utils/is_alert_details_enabled.ts b/x-pack/plugins/observability/public/utils/is_alert_details_enabled.ts index 629fa29e5b6de..962ac4b15d5e6 100644 --- a/x-pack/plugins/observability/public/utils/is_alert_details_enabled.ts +++ b/x-pack/plugins/observability/public/utils/is_alert_details_enabled.ts @@ -6,7 +6,7 @@ */ import { ALERT_RULE_TYPE_ID } from '@kbn/rule-data-utils'; -import { ConfigSchema } from '../plugin'; +import type { ConfigSchema } from '../plugin'; import type { TopAlert } from '../typings/alerts'; // We are mapping the ruleTypeId from the feature flag with the ruleTypeId from the alert