From 653202a2c6d98ce7eb14129c4bf1a6719453e21a Mon Sep 17 00:00:00 2001 From: Faisal Kanout Date: Mon, 5 Dec 2022 18:37:18 +0100 Subject: [PATCH] Move the AlertSummary to the shared folder in o11y --- .../alert_details_app_section.tsx | 8 ++++---- .../shared}/alert_summary.test.tsx | 8 ++++---- .../shared}/alert_summary.tsx | 9 +++++---- x-pack/plugins/observability/public/index.ts | 2 ++ .../alert_details/components/alert_details.tsx | 13 ++++++++----- .../public/pages/alert_details/components/index.ts | 1 - 6 files changed, 23 insertions(+), 18 deletions(-) rename x-pack/plugins/observability/public/{pages/alert_details/components => components/shared}/alert_summary.test.tsx (87%) rename x-pack/plugins/observability/public/{pages/alert_details/components => components/shared}/alert_summary.tsx (94%) diff --git a/x-pack/plugins/apm/public/components/alerting/ui_components/alert_details_app_section/alert_details_app_section.tsx b/x-pack/plugins/apm/public/components/alerting/ui_components/alert_details_app_section/alert_details_app_section.tsx index 92cd229333062..af0a074a093d5 100644 --- a/x-pack/plugins/apm/public/components/alerting/ui_components/alert_details_app_section/alert_details_app_section.tsx +++ b/x-pack/plugins/apm/public/components/alerting/ui_components/alert_details_app_section/alert_details_app_section.tsx @@ -6,14 +6,14 @@ */ import React, { useMemo } from 'react'; -import { EuiFlexGroup } from '@elastic/eui'; -import { EuiFlexItem } from '@elastic/eui'; +import { EuiFlexGroup, EuiSpacer, EuiFlexItem } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { EuiPanel } from '@elastic/eui'; import { EuiTitle } from '@elastic/eui'; import { EuiIconTip } from '@elastic/eui'; import { ALERT_DURATION, ALERT_END } from '@kbn/rule-data-utils'; import moment from 'moment'; +import { AlertSummary } from '@kbn/observability-plugin/public'; import { ENVIRONMENT_ALL } from '../../../../../common/environment_filter_values'; import { getTransactionType } from '../../../../context/apm_service/apm_service_context'; import { useServiceAgentFetcher } from '../../../../context/apm_service/use_service_agent_fetcher'; @@ -44,7 +44,6 @@ import { import { getAggsTypeFromRule } from './helpers'; import { filterNil } from '../../../shared/charts/latency_chart'; import { errorRateI18n } from '../../../shared/charts/failed_transaction_rate_chart'; - export function AlertDetailsAppSection({ rule, alert, @@ -291,9 +290,10 @@ export function AlertDetailsAppSection({ ]; /* Error Rate */ - return ( + + diff --git a/x-pack/plugins/observability/public/pages/alert_details/components/alert_summary.test.tsx b/x-pack/plugins/observability/public/components/shared/alert_summary.test.tsx similarity index 87% rename from x-pack/plugins/observability/public/pages/alert_details/components/alert_summary.test.tsx rename to x-pack/plugins/observability/public/components/shared/alert_summary.test.tsx index e29771ee169de..5a0880c7382a4 100644 --- a/x-pack/plugins/observability/public/pages/alert_details/components/alert_summary.test.tsx +++ b/x-pack/plugins/observability/public/components/shared/alert_summary.test.tsx @@ -7,17 +7,17 @@ import React from 'react'; import * as useUiSettingHook from '@kbn/kibana-react-plugin/public/ui_settings/use_ui_setting'; -import { render } from '../../../utils/test_helper'; +import { render } from '../../utils/test_helper'; import { AlertSummary } from './alert_summary'; -import { asDuration } from '../../../../common/utils/formatters'; -import { alertWithTags, alertWithNoData, tags } from '../mock/alert'; +import { asDuration } from '../../../common/utils/formatters'; +import { alertWithTags, alertWithNoData, tags } from '../../pages/alert_details/mock/alert'; jest.mock('react-router-dom', () => ({ ...jest.requireActual('react-router-dom'), useParams: jest.fn(), })); -jest.mock('../../../utils/kibana_react'); +jest.mock('../../utils/kibana_react'); describe('Alert summary', () => { jest diff --git a/x-pack/plugins/observability/public/pages/alert_details/components/alert_summary.tsx b/x-pack/plugins/observability/public/components/shared/alert_summary.tsx similarity index 94% rename from x-pack/plugins/observability/public/pages/alert_details/components/alert_summary.tsx rename to x-pack/plugins/observability/public/components/shared/alert_summary.tsx index 29df36d88aa51..ba9db05f30477 100644 --- a/x-pack/plugins/observability/public/pages/alert_details/components/alert_summary.tsx +++ b/x-pack/plugins/observability/public/components/shared/alert_summary.tsx @@ -27,12 +27,13 @@ import { ALERT_STATUS_RECOVERED, TIMESTAMP, } from '@kbn/rule-data-utils'; -import { asDuration } from '../../../../common/utils/formatters'; -import { AlertSummaryProps } from '../types'; -import { AlertStatusIndicator } from '../../../components/shared/alert_status_indicator'; -import { DEFAULT_DATE_FORMAT } from '../constants'; +import { asDuration } from '../../../common/utils/formatters'; +import { AlertStatusIndicator } from './alert_status_indicator'; +import { DEFAULT_DATE_FORMAT } from '../../pages/alert_details/constants'; +import { AlertSummaryProps } from '../../pages/alert_details/types'; export function AlertSummary({ alert }: AlertSummaryProps) { + console.log('this is a test'); const tags = alert?.fields[ALERT_RULE_TAGS]; return ( diff --git a/x-pack/plugins/observability/public/index.ts b/x-pack/plugins/observability/public/index.ts index 37ee74157ede3..d730f7f618c9d 100644 --- a/x-pack/plugins/observability/public/index.ts +++ b/x-pack/plugins/observability/public/index.ts @@ -119,3 +119,5 @@ export { ExploratoryViewContextProvider } from './components/shared/exploratory_ export { fromQuery, toQuery } from './utils/url'; export type { NavigationSection } from './services/navigation_registry'; + +export { AlertSummary } from './components/shared/alert_summary'; diff --git a/x-pack/plugins/observability/public/pages/alert_details/components/alert_details.tsx b/x-pack/plugins/observability/public/pages/alert_details/components/alert_details.tsx index 58a32eb89f130..3b42f0c685d0e 100644 --- a/x-pack/plugins/observability/public/pages/alert_details/components/alert_details.tsx +++ b/x-pack/plugins/observability/public/pages/alert_details/components/alert_details.tsx @@ -8,10 +8,11 @@ import React, { useEffect, useState } from 'react'; import { i18n } from '@kbn/i18n'; import { useParams } from 'react-router-dom'; -import { EuiEmptyPrompt, EuiPanel, EuiSpacer } from '@elastic/eui'; +import { EuiEmptyPrompt, EuiPanel } 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 { AlertSummary } from '../../..'; import { getTimeZone } from '../../../utils/get_time_zone'; import { useFetchRule } from '../../../hooks/use_fetch_rule'; import { isAlertDetailsEnabledPerApp } from '../../../utils/is_alert_details_enabled'; @@ -20,7 +21,7 @@ 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 { HeaderActions, PageTitle } from '.'; import { CenterJustifiedSpinner } from '../../rule_details/components/center_justified_spinner'; import PageNotFound from '../../404'; @@ -116,10 +117,12 @@ export function AlertDetails() { }} data-test-subj="alertDetails" > - - - {AlertDetailsAppSection && rule && ( + {AlertDetailsAppSection && rule ? ( + ) : ( + // TODO: the AlertSummary component will be part of AlertDetailsAppSection. + // As the AlertDetailsAppSection is not done for all the Apps, yet. We will show only the AlertSummary + )} ); 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 index 9e2ae5d34dc18..af9bb2b552349 100644 --- a/x-pack/plugins/observability/public/pages/alert_details/components/index.ts +++ b/x-pack/plugins/observability/public/pages/alert_details/components/index.ts @@ -6,6 +6,5 @@ */ export { HeaderActions } from './header_actions'; -export { AlertSummary } from './alert_summary'; export { AlertDetails } from './alert_details'; export { PageTitle } from './page_title';