Revert Alert Flyout moving

elastic · Apr 18, 2023 · 4264447 · 4264447
1 parent 4956edf
commit 4264447
Show file tree

Hide file tree

Showing 15 changed files with 101 additions and 68 deletions.
diff --git a/...nents/alerts_flyout/alerts_flyout.mock.ts → ...y/public/components/alerts_flyout.mock.ts b/...nents/alerts_flyout/alerts_flyout.mock.ts → ...y/public/components/alerts_flyout.mock.ts
diff --git a/...s/alerts_flyout/alerts_flyout.stories.tsx → ...blic/components/alerts_flyout.stories.tsx b/...s/alerts_flyout/alerts_flyout.stories.tsx → ...blic/components/alerts_flyout.stories.tsx
@@ -8,10 +8,10 @@
 import React, { ComponentType } from 'react';
 import { ALERT_UUID } from '@kbn/rule-data-utils';
 import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public';
-import { PluginContext, PluginContextValue } from '../../context/plugin_context';
-import { createObservabilityRuleTypeRegistryMock } from '../../rules/observability_rule_type_registry_mock';
-import { AlertsFlyout } from './alerts_flyout';
+import { PluginContext, PluginContextValue } from '../context/plugin_context';
+import { createObservabilityRuleTypeRegistryMock } from '../rules/observability_rule_type_registry_mock';
 import { apmAlertResponseExample } from './alerts_flyout.mock';
+import { AlertsFlyout } from './alerts_flyout';
 
 interface Args {
   alerts: Array<Record<string, unknown>>;

diff --git a/...ents/alerts_flyout/alerts_flyout.test.tsx → .../public/components/alerts_flyout.test.tsx b/...ents/alerts_flyout/alerts_flyout.test.tsx → .../public/components/alerts_flyout.test.tsx
@@ -7,10 +7,10 @@
 
 import React from 'react';
 import * as useUiSettingHook from '@kbn/kibana-react-plugin/public/ui_settings/use_ui_setting';
-import { createObservabilityRuleTypeRegistryMock } from '../../rules/observability_rule_type_registry_mock';
-import { render } from '../../utils/test_helper';
+import { createObservabilityRuleTypeRegistryMock } from '../rules/observability_rule_type_registry_mock';
+import { render } from '../utils/test_helper';
 import { AlertsFlyout } from './alerts_flyout';
-import type { TopAlert } from '../../typings/alerts';
+import type { TopAlert } from '../typings/alerts';
 
 describe('AlertsFlyout', () => {
   jest

diff --git a/...omponents/alerts_flyout/alerts_flyout.tsx → ...ility/public/components/alerts_flyout.tsx b/...omponents/alerts_flyout/alerts_flyout.tsx → ...ility/public/components/alerts_flyout.tsx
@@ -12,9 +12,9 @@ import { ALERT_UUID } from '@kbn/rule-data-utils';
 import { AlertsFlyoutHeader } from './alerts_flyout_header';
 import { AlertsFlyoutBody } from './alerts_flyout_body';
 import { AlertsFlyoutFooter } from './alerts_flyout_footer';
-import { parseAlert } from '../../pages/alerts/helpers/parse_alert';
-import type { ObservabilityRuleTypeRegistry } from '../../rules/create_observability_rule_type_registry';
-import type { TopAlert } from '../../typings/alerts';
+import { parseAlert } from '../pages/alerts/helpers/parse_alert';
+import type { ObservabilityRuleTypeRegistry } from '../rules/create_observability_rule_type_registry';
+import type { TopAlert } from '../typings/alerts';
 
 type AlertsFlyoutProps = {
   alert?: TopAlert;

diff --git a/...alerts_flyout/alerts_flyout_body.test.tsx → ...ic/components/alerts_flyout_body.test.tsx b/...alerts_flyout/alerts_flyout_body.test.tsx → ...ic/components/alerts_flyout_body.test.tsx
@@ -5,13 +5,13 @@
  * 2.0.
  */
 import React from 'react';
-import { render } from '../../utils/test_helper';
+import { render } from '../utils/test_helper';
 import * as useUiSettingHook from '@kbn/kibana-react-plugin/public/ui_settings/use_ui_setting';
-import { createObservabilityRuleTypeRegistryMock } from '../../rules/observability_rule_type_registry_mock';
+import { createObservabilityRuleTypeRegistryMock } from '../rules/observability_rule_type_registry_mock';
 import { AlertsFlyoutBody } from './alerts_flyout_body';
-import { inventoryThresholdAlert } from '../../rules/fixtures/example_alerts';
-import { parseAlert } from '../../pages/alerts/helpers/parse_alert';
-import { RULE_DETAILS_PAGE_ID } from '../../pages/rule_details/rule_details';
+import { inventoryThresholdAlert } from '../rules/fixtures/example_alerts';
+import { parseAlert } from '../pages/alerts/helpers/parse_alert';
+import { RULE_DETAILS_PAGE_ID } from '../pages/rule_details/rule_details';
 
 describe('AlertsFlyoutBody', () => {
   jest

diff --git a/...ents/alerts_flyout/alerts_flyout_body.tsx → .../public/components/alerts_flyout_body.tsx b/...ents/alerts_flyout/alerts_flyout_body.tsx → .../public/components/alerts_flyout_body.tsx
@@ -29,13 +29,13 @@ import {
 import { AlertLifecycleStatusBadge } from '@kbn/alerts-ui-shared';
 import moment from 'moment-timezone';
 import { useUiSetting } from '@kbn/kibana-react-plugin/public';
-import { useKibana } from '../../utils/kibana_react';
-import { asDuration } from '../../../common/utils/formatters';
-import { paths } from '../../config/paths';
-import { translations } from '../../config/translations';
-import { formatAlertEvaluationValue } from '../../utils/format_alert_evaluation_value';
-import { RULE_DETAILS_PAGE_ID } from '../../pages/rule_details/rule_details';
-import type { TopAlert } from '../../typings/alerts';
+import { useKibana } from '../utils/kibana_react';
+import { asDuration } from '../../common/utils/formatters';
+import { paths } from '../config/paths';
+import { translations } from '../config/translations';
+import { formatAlertEvaluationValue } from '../utils/format_alert_evaluation_value';
+import { RULE_DETAILS_PAGE_ID } from '../pages/rule_details/rule_details';
+import type { TopAlert } from '../typings/alerts';
 
 interface FlyoutProps {
   alert: TopAlert;

diff --git a/...ts/alerts_flyout/alerts_flyout_footer.tsx → ...ublic/components/alerts_flyout_footer.tsx b/...ts/alerts_flyout/alerts_flyout_footer.tsx → ...ublic/components/alerts_flyout_footer.tsx
@@ -6,12 +6,12 @@
  */
 import React from 'react';
 import { EuiFlyoutFooter, EuiFlexGroup, EuiFlexItem, EuiButton } from '@elastic/eui';
-import { useKibana } from '../../utils/kibana_react';
-import { usePluginContext } from '../../hooks/use_plugin_context';
-import { isAlertDetailsEnabledPerApp } from '../../utils/is_alert_details_enabled';
-import { translations } from '../../config/translations';
-import { paths } from '../../config/paths';
-import type { TopAlert } from '../../typings/alerts';
+import { useKibana } from '../utils/kibana_react';
+import { usePluginContext } from '../hooks/use_plugin_context';
+import { isAlertDetailsEnabledPerApp } from '../utils/is_alert_details_enabled';
+import { translations } from '../config/translations';
+import { paths } from '../config/paths';
+import type { TopAlert } from '../typings/alerts';
 
 interface FlyoutProps {
   alert: TopAlert;

diff --git a/...ts/alerts_flyout/alerts_flyout_header.tsx → ...ublic/components/alerts_flyout_header.tsx b/...ts/alerts_flyout/alerts_flyout_header.tsx → ...ublic/components/alerts_flyout_header.tsx
@@ -7,7 +7,7 @@
 import React from 'react';
 import { ALERT_RULE_NAME } from '@kbn/rule-data-utils';
 import { EuiSpacer, EuiTitle } from '@elastic/eui';
-import type { TopAlert } from '../../typings/alerts';
+import type { TopAlert } from '../typings/alerts';
 
 interface FlyoutProps {
   alert: TopAlert;

diff --git a/...k/plugins/observability/public/components/alerts_table/get_alerts_table_configuration.tsx b/...k/plugins/observability/public/components/alerts_table/get_alerts_table_configuration.tsx
@@ -20,7 +20,7 @@ import {
   AlertActions,
   Props as AlertActionsProps,
 } from '../../pages/alerts/components/alert_actions';
-import { useGetAlertFlyoutComponents } from '../alerts_flyout/use_get_alert_flyout_components';
+import { useGetAlertFlyoutComponents } from '../use_get_alert_flyout_components';
 import type { ObservabilityRuleTypeRegistry } from '../../rules/create_observability_rule_type_registry';
 import type { ConfigSchema } from '../../plugin';
 import type { TopAlert } from '../../typings/alerts';

diff --git a/...lyout/use_get_alert_flyout_components.tsx → ...nents/use_get_alert_flyout_components.tsx b/...lyout/use_get_alert_flyout_components.tsx → ...nents/use_get_alert_flyout_components.tsx
@@ -8,11 +8,13 @@
 import React, { useCallback, useMemo } from 'react';
 import { AlertsTableFlyoutBaseProps } from '@kbn/triggers-actions-ui-plugin/public';
 
+import type { ObservabilityRuleTypeRegistry } from '../rules/create_observability_rule_type_registry';
 import { AlertsFlyoutHeader } from './alerts_flyout_header';
 import { AlertsFlyoutBody } from './alerts_flyout_body';
 import { AlertsFlyoutFooter } from './alerts_flyout_footer';
-import { parseAlert } from '../../pages/alerts/helpers/parse_alert';
-import type { ObservabilityRuleTypeRegistry } from '../../rules/create_observability_rule_type_registry';
+import { parseAlert } from '../pages/alerts/helpers/parse_alert';
+
+export { AlertsFlyout } from './alerts_flyout';
 
 export const useGetAlertFlyoutComponents = (
   observabilityRuleTypeRegistry: ObservabilityRuleTypeRegistry

diff --git a/x-pack/plugins/observability/public/hooks/use_fetch_rule.ts b/x-pack/plugins/observability/public/hooks/use_fetch_rule.ts
@@ -7,20 +7,8 @@
 
 import { useEffect, useState, useCallback } from 'react';
 import { i18n } from '@kbn/i18n';
-import { loadRule, Rule, RuleType } from '@kbn/triggers-actions-ui-plugin/public';
-import type { HttpSetup } from '@kbn/core-http-browser';
-
-export interface FetchRuleProps {
-  ruleId?: string;
-  http: HttpSetup;
-}
-
-export interface FetchRule {
-  isRuleLoading: boolean;
-  rule?: Rule;
-  ruleType?: RuleType;
-  errorRule?: string;
-}
+import { loadRule } from '@kbn/triggers-actions-ui-plugin/public';
+import { FetchRuleProps, FetchRule } from '../pages/rule_details/types';
 
 export function useFetchRule({ ruleId, http }: FetchRuleProps) {
   const [ruleSummary, setRuleSummary] = useState<FetchRule>({

diff --git a/x-pack/plugins/observability/public/hooks/use_fetch_rule_summary.ts b/x-pack/plugins/observability/public/hooks/use_fetch_rule_summary.ts
@@ -7,19 +7,8 @@
 
 import { useEffect, useState, useCallback } from 'react';
 import { i18n } from '@kbn/i18n';
-import { loadRuleSummary, RuleSummary } from '@kbn/triggers-actions-ui-plugin/public';
-import type { HttpSetup } from '@kbn/core-http-browser';
-
-export interface FetchRuleSummaryProps {
-  ruleId: string;
-  http: HttpSetup;
-}
-
-export interface FetchRuleSummary {
-  isLoadingRuleSummary: boolean;
-  ruleSummary?: RuleSummary;
-  errorRuleSummary?: string;
-}
+import { loadRuleSummary } from '@kbn/triggers-actions-ui-plugin/public';
+import { FetchRuleSummaryProps, FetchRuleSummary } from '../pages/rule_details/types';
 
 export function useFetchRuleSummary({ ruleId, http }: FetchRuleSummaryProps) {
   const [ruleSummary, setRuleSummary] = useState<FetchRuleSummary>({

diff --git a/x-pack/plugins/observability/public/index.ts b/x-pack/plugins/observability/public/index.ts
@@ -70,7 +70,7 @@ export {
   METRIC_TYPE,
 } from './hooks/use_track_metric';
 
-export const LazyAlertsFlyout = lazy(() => import('./components/alerts_flyout/alerts_flyout'));
+export const LazyAlertsFlyout = lazy(() => import('./components/alerts_flyout'));
 export { useFetcher, FETCH_STATUS } from './hooks/use_fetcher';
 export { useEsSearch, createEsParams } from './hooks/use_es_search';
 

diff --git a/x-pack/plugins/observability/public/pages/rule_details/components/header_actions.tsx b/x-pack/plugins/observability/public/pages/rule_details/components/header_actions.tsx
@@ -47,27 +47,28 @@ export function HeaderActions({ loading, onDeleteRule, onEditRule }: HeaderActio
       <EuiFlexItem>
         <EuiPopover
           id="contextRuleEditMenu"
-          isOpen={isRuleEditPopoverOpen}
-          closePopover={handleClosePopover}
           button={
             <EuiButton
+              data-test-subj="actions"
+              disabled={loading}
               fill
               iconSide="right"
-              onClick={togglePopover}
               iconType="arrowDown"
-              data-test-subj="actions"
+              onClick={togglePopover}
             >
               {i18n.translate('xpack.observability.ruleDetails.actionsButtonLabel', {
                 defaultMessage: 'Actions',
               })}
             </EuiButton>
           }
+          closePopover={handleClosePopover}
+          isOpen={isRuleEditPopoverOpen}
         >
-          <EuiFlexGroup direction="column" alignItems="flexStart" gutterSize="s">
+          <EuiFlexGroup alignItems="flexStart" direction="column" gutterSize="s">
             <EuiButtonEmpty
               data-test-subj="editRuleButton"
-              size="s"
               iconType="pencil"
+              size="s"
               onClick={handleEditRule}
             >
               <EuiText size="s">
@@ -77,11 +78,11 @@ export function HeaderActions({ loading, onDeleteRule, onEditRule }: HeaderActio
               </EuiText>
             </EuiButtonEmpty>
             <EuiButtonEmpty
-              size="s"
-              iconType="trash"
               color="danger"
-              onClick={handleRemoveRule}
               data-test-subj="deleteRuleButton"
+              iconType="trash"
+              size="s"
+              onClick={handleRemoveRule}
             >
               <EuiText size="s">
                 {i18n.translate('xpack.observability.ruleDetails.deleteRule', {

diff --git a/x-pack/plugins/observability/public/pages/rule_details/types.ts b/x-pack/plugins/observability/public/pages/rule_details/types.ts
@@ -0,0 +1,53 @@
+/*
+ * 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 { HttpSetup } from '@kbn/core/public';
+import { Rule, RuleSummary, RuleType } from '@kbn/triggers-actions-ui-plugin/public';
+
+export interface RuleDetailsPathParams {
+  ruleId: string;
+}
+export interface PageHeaderProps {
+  rule: Rule;
+}
+
+export interface FetchRuleProps {
+  ruleId?: string;
+  http: HttpSetup;
+}
+
+export interface FetchRule {
+  isRuleLoading: boolean;
+  rule?: Rule;
+  ruleType?: RuleType;
+  errorRule?: string;
+}
+
+export interface FetchRuleSummaryProps {
+  ruleId: string;
+  http: HttpSetup;
+}
+
+export interface FetchRuleSummary {
+  isLoadingRuleSummary: boolean;
+  ruleSummary?: RuleSummary;
+  errorRuleSummary?: string;
+}
+
+export interface AlertListItemStatus {
+  label: string;
+  healthColor: string;
+  actionGroup?: string;
+}
+export interface AlertListItem {
+  alert: string;
+  status: AlertListItemStatus;
+  start?: Date;
+  duration: number;
+  isMuted: boolean;
+  sortPriority: number;
+}