Move the AlertSummary to the shared folder in o11y

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 (
     <EuiFlexGroup direction="column" gutterSize="s">
+      <AlertSummary alert={alert} />
+      <EuiSpacer size="s" />
       <ChartPointerEventContextProvider>
         <EuiFlexItem>
           <EuiPanel hasBorder={true}>

x-pack/plugins/observability/public/pages/alert_details/components/alert_summary.test.tsx → 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

x-pack/plugins/observability/public/pages/alert_details/components/alert_summary.tsx → 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 (

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

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"
     >
-      <AlertSummary alert={alert} />
-      <EuiSpacer size="l" />
-      {AlertDetailsAppSection && rule && (
+      {AlertDetailsAppSection && rule ? (
         <AlertDetailsAppSection alert={alert} rule={rule} timeZone={timeZone} />
+      ) : (
+        // 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
+        <AlertSummary alert={alert} />
       )}
     </ObservabilityPageTemplate>
   );

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