From 4264447477af43854eab61d2ecec50f68b1e737b Mon Sep 17 00:00:00 2001 From: Coen Warmer Date: Tue, 18 Apr 2023 11:41:59 +0200 Subject: [PATCH] Revert Alert Flyout moving --- .../{alerts_flyout => }/alerts_flyout.mock.ts | 0 .../alerts_flyout.stories.tsx | 6 +-- .../alerts_flyout.test.tsx | 6 +-- .../{alerts_flyout => }/alerts_flyout.tsx | 6 +-- .../alerts_flyout_body.test.tsx | 10 ++-- .../alerts_flyout_body.tsx | 14 ++--- .../alerts_flyout_footer.tsx | 12 ++--- .../alerts_flyout_header.tsx | 2 +- .../get_alerts_table_configuration.tsx | 2 +- .../use_get_alert_flyout_components.tsx | 6 ++- .../public/hooks/use_fetch_rule.ts | 16 +----- .../public/hooks/use_fetch_rule_summary.ts | 15 +----- x-pack/plugins/observability/public/index.ts | 2 +- .../components/header_actions.tsx | 19 +++---- .../public/pages/rule_details/types.ts | 53 +++++++++++++++++++ 15 files changed, 101 insertions(+), 68 deletions(-) rename x-pack/plugins/observability/public/components/{alerts_flyout => }/alerts_flyout.mock.ts (100%) rename x-pack/plugins/observability/public/components/{alerts_flyout => }/alerts_flyout.stories.tsx (90%) rename x-pack/plugins/observability/public/components/{alerts_flyout => }/alerts_flyout.test.tsx (95%) rename x-pack/plugins/observability/public/components/{alerts_flyout => }/alerts_flyout.tsx (88%) rename x-pack/plugins/observability/public/components/{alerts_flyout => }/alerts_flyout_body.test.tsx (78%) rename x-pack/plugins/observability/public/components/{alerts_flyout => }/alerts_flyout_body.tsx (89%) rename x-pack/plugins/observability/public/components/{alerts_flyout => }/alerts_flyout_footer.tsx (82%) rename x-pack/plugins/observability/public/components/{alerts_flyout => }/alerts_flyout_header.tsx (92%) rename x-pack/plugins/observability/public/components/{alerts_flyout => }/use_get_alert_flyout_components.tsx (87%) create mode 100644 x-pack/plugins/observability/public/pages/rule_details/types.ts diff --git a/x-pack/plugins/observability/public/components/alerts_flyout/alerts_flyout.mock.ts b/x-pack/plugins/observability/public/components/alerts_flyout.mock.ts similarity index 100% rename from x-pack/plugins/observability/public/components/alerts_flyout/alerts_flyout.mock.ts rename to x-pack/plugins/observability/public/components/alerts_flyout.mock.ts diff --git a/x-pack/plugins/observability/public/components/alerts_flyout/alerts_flyout.stories.tsx b/x-pack/plugins/observability/public/components/alerts_flyout.stories.tsx similarity index 90% rename from x-pack/plugins/observability/public/components/alerts_flyout/alerts_flyout.stories.tsx rename to x-pack/plugins/observability/public/components/alerts_flyout.stories.tsx index 5eccc81fa74ee..26ed2d240af30 100644 --- a/x-pack/plugins/observability/public/components/alerts_flyout/alerts_flyout.stories.tsx +++ b/x-pack/plugins/observability/public/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>; diff --git a/x-pack/plugins/observability/public/components/alerts_flyout/alerts_flyout.test.tsx b/x-pack/plugins/observability/public/components/alerts_flyout.test.tsx similarity index 95% rename from x-pack/plugins/observability/public/components/alerts_flyout/alerts_flyout.test.tsx rename to x-pack/plugins/observability/public/components/alerts_flyout.test.tsx index 87d476138970c..84d3046d40b3c 100644 --- a/x-pack/plugins/observability/public/components/alerts_flyout/alerts_flyout.test.tsx +++ b/x-pack/plugins/observability/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/x-pack/plugins/observability/public/components/alerts_flyout/alerts_flyout.tsx b/x-pack/plugins/observability/public/components/alerts_flyout.tsx similarity index 88% rename from x-pack/plugins/observability/public/components/alerts_flyout/alerts_flyout.tsx rename to x-pack/plugins/observability/public/components/alerts_flyout.tsx index d74caac8e496a..c2e1c9626eb51 100644 --- a/x-pack/plugins/observability/public/components/alerts_flyout/alerts_flyout.tsx +++ b/x-pack/plugins/observability/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/x-pack/plugins/observability/public/components/alerts_flyout/alerts_flyout_body.test.tsx b/x-pack/plugins/observability/public/components/alerts_flyout_body.test.tsx similarity index 78% rename from x-pack/plugins/observability/public/components/alerts_flyout/alerts_flyout_body.test.tsx rename to x-pack/plugins/observability/public/components/alerts_flyout_body.test.tsx index b28f09efd46c9..89b19a91cbe22 100644 --- a/x-pack/plugins/observability/public/components/alerts_flyout/alerts_flyout_body.test.tsx +++ b/x-pack/plugins/observability/public/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/x-pack/plugins/observability/public/components/alerts_flyout/alerts_flyout_body.tsx b/x-pack/plugins/observability/public/components/alerts_flyout_body.tsx similarity index 89% rename from x-pack/plugins/observability/public/components/alerts_flyout/alerts_flyout_body.tsx rename to x-pack/plugins/observability/public/components/alerts_flyout_body.tsx index 0250e317d81a8..d7613819e62ce 100644 --- a/x-pack/plugins/observability/public/components/alerts_flyout/alerts_flyout_body.tsx +++ b/x-pack/plugins/observability/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/x-pack/plugins/observability/public/components/alerts_flyout/alerts_flyout_footer.tsx b/x-pack/plugins/observability/public/components/alerts_flyout_footer.tsx similarity index 82% rename from x-pack/plugins/observability/public/components/alerts_flyout/alerts_flyout_footer.tsx rename to x-pack/plugins/observability/public/components/alerts_flyout_footer.tsx index c664b6391e299..5b82d5b6339f6 100644 --- a/x-pack/plugins/observability/public/components/alerts_flyout/alerts_flyout_footer.tsx +++ b/x-pack/plugins/observability/public/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/x-pack/plugins/observability/public/components/alerts_flyout/alerts_flyout_header.tsx b/x-pack/plugins/observability/public/components/alerts_flyout_header.tsx similarity index 92% rename from x-pack/plugins/observability/public/components/alerts_flyout/alerts_flyout_header.tsx rename to x-pack/plugins/observability/public/components/alerts_flyout_header.tsx index b30436efffca6..fc4f9d4d0d316 100644 --- a/x-pack/plugins/observability/public/components/alerts_flyout/alerts_flyout_header.tsx +++ b/x-pack/plugins/observability/public/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/x-pack/plugins/observability/public/components/alerts_table/get_alerts_table_configuration.tsx b/x-pack/plugins/observability/public/components/alerts_table/get_alerts_table_configuration.tsx index 12df94e16e263..2127794b6070e 100644 --- a/x-pack/plugins/observability/public/components/alerts_table/get_alerts_table_configuration.tsx +++ b/x-pack/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/x-pack/plugins/observability/public/components/alerts_flyout/use_get_alert_flyout_components.tsx b/x-pack/plugins/observability/public/components/use_get_alert_flyout_components.tsx similarity index 87% rename from x-pack/plugins/observability/public/components/alerts_flyout/use_get_alert_flyout_components.tsx rename to x-pack/plugins/observability/public/components/use_get_alert_flyout_components.tsx index 938cad37661b0..06d616b067f26 100644 --- a/x-pack/plugins/observability/public/components/alerts_flyout/use_get_alert_flyout_components.tsx +++ b/x-pack/plugins/observability/public/components/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 index c1d1a464968d5..40321b59a8dda 100644 --- 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({ 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 index d869aec932110..6754d1d2d6080 100644 --- 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({ diff --git a/x-pack/plugins/observability/public/index.ts b/x-pack/plugins/observability/public/index.ts index 2b10d47d2d2fe..c55e2f8f658ca 100644 --- 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 index 77df2a3b63456..ed42433fdca46 100644 --- 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 {i18n.translate('xpack.observability.ruleDetails.actionsButtonLabel', { defaultMessage: 'Actions', })} } + closePopover={handleClosePopover} + isOpen={isRuleEditPopoverOpen} > - + @@ -77,11 +78,11 @@ export function HeaderActions({ loading, onDeleteRule, onEditRule }: HeaderActio {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 new file mode 100644 index 0000000000000..7ae9d37488711 --- /dev/null +++ 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; +}