[Tech Debt] Reorder AlertDetail page (#152894)

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

x-pack/plugins/observability/public/pages/alert_details/components/alert_details.tsx → 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<ObservabilityAppServices>().services;
 
   const { ObservabilityPageTemplate, config } = usePluginContext();

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 (

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<ObservabilityAppServices>().services;
 
   const { rule, reloadRule } = useFetchRule({
@@ -137,24 +137,24 @@ export function HeaderActions({ alert }: HeaderActionsProps) {
         </EuiFlexGroup>
       </EuiPopover>
 
-      {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 ? (
+        <EditRuleFlyout
+          initialRule={rule}
+          onClose={() => {
+            setRuleConditionsFlyoutOpen(false);
+          }}
+          onSave={reloadRule}
+        />
+      ) : null}
+
+      {rule && snoozeModalOpen ? (
+        <RuleSnoozeModal
+          rule={rule}
+          onClose={() => setSnoozeModalOpen(false)}
+          onRuleChanged={reloadRule}
+          onLoading={noop}
+        />
+      ) : null}
     </>
   );
 }

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,

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

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