diff --git a/x-pack/plugins/observability/public/components/custom_threshold/components/alert_details_app_section.tsx b/x-pack/plugins/observability/public/components/custom_threshold/components/alert_details_app_section.tsx index cf728d73aef4..11a85e6b17bc 100644 --- a/x-pack/plugins/observability/public/components/custom_threshold/components/alert_details_app_section.tsx +++ b/x-pack/plugins/observability/public/components/custom_threshold/components/alert_details_app_section.tsx @@ -16,8 +16,6 @@ import { EuiLink, EuiPanel, EuiSpacer, - EuiTabbedContent, - EuiTabbedContentTab, EuiText, EuiTitle, useEuiTheme, @@ -30,7 +28,6 @@ import { AlertActiveTimeRangeAnnotation, } from '@kbn/observability-alert-details'; import { DataView } from '@kbn/data-views-plugin/common'; -import type { TimeRange } from '@kbn/es-query'; import { useKibana } from '../../../utils/kibana_react'; import { metricValueFormatter } from '../../../../common/custom_threshold_rule/metric_value_formatter'; import { AlertSummaryField, TopAlert } from '../../..'; @@ -40,7 +37,7 @@ import { ExpressionChart } from './expression_chart'; import { TIME_LABELS } from './criterion_preview_chart/criterion_preview_chart'; import { Threshold } from './custom_threshold'; import { MetricsExplorerChartType } from '../hooks/use_metrics_explorer_options'; -import { AlertParams, MetricExpression, MetricThresholdRuleTypeParams } from '../types'; +import { AlertParams, MetricThresholdRuleTypeParams } from '../types'; // TODO Use a generic props for app sections https://github.com/elastic/kibana/issues/152690 export type MetricThresholdRule = Rule; @@ -49,8 +46,6 @@ export type MetricThresholdAlert = TopAlert; const DEFAULT_DATE_FORMAT = 'YYYY-MM-DD HH:mm'; const ALERT_START_ANNOTATION_ID = 'alert_start_annotation'; const ALERT_TIME_RANGE_ANNOTATION_ID = 'alert_time_range_annotation'; -const OVERVIEW_TAB_ID = 'overview'; -const RELATED_EVENTS_TAB_ID = 'relatedEvents'; interface AppSectionProps { alert: MetricThresholdAlert; @@ -66,8 +61,7 @@ export default function AlertDetailsAppSection({ ruleLink, setAlertSummaryFields, }: AppSectionProps) { - const { uiSettings, charts, aiops, data } = useKibana().services; - const { EmbeddableChangePointChart } = aiops; + const { uiSettings, charts, data } = useKibana().services; const { euiTheme } = useEuiTheme(); const [dataView, setDataView] = useState(); const [, setDataViewError] = useState(); @@ -135,120 +129,65 @@ export default function AlertDetailsAppSection({ // eslint-disable-next-line react-hooks/exhaustive-deps }, [data.search.searchSource]); - const relatedEventsTimeRange = (criterion: MetricExpression): TimeRange => { - return { - from: moment(alert.start) - .subtract((criterion.timeSize ?? 5) * 2, criterion.timeUnit ?? 'minutes') - .toISOString(), - to: moment(alert.lastUpdated).toISOString(), - mode: 'absolute', - }; - }; - - const overviewTab = !!ruleParams.criteria ? ( - <> - - - {ruleParams.criteria.map((criterion, index) => ( - - - -

- {criterion.aggType.toUpperCase()}{' '} - {'metric' in criterion ? criterion.metric : undefined} -

-
- - - - - - - - metricValueFormatter(d, 'metric' in criterion ? criterion.metric : undefined) - } - title={i18n.translate( - 'xpack.observability.customThreshold.rule.alertDetailsAppSection.thresholdTitle', - { - defaultMessage: 'Threshold breached', - } - )} - comparator={criterion.comparator} - /> - - - - - -
-
- ))} -
- - ) : null; - - const relatedEventsTab = !!ruleParams.criteria ? ( - <> - - - {ruleParams.criteria.map((criterion, criterionIndex) => - criterion.metrics?.map((metric, metricIndex) => { - const id = `embeddableChart-criterion${criterionIndex}-metric${metricIndex}`; - return dataView?.id ? ( - + {ruleParams.criteria.map((criterion, index) => ( + + + +

+ {criterion.aggType.toUpperCase()}{' '} + {'metric' in criterion ? criterion.metric : undefined} +

+
+ + - ) : null; - }) - )} -
- + + + + + + metricValueFormatter(d, 'metric' in criterion ? criterion.metric : undefined) + } + title={i18n.translate( + 'xpack.observability.customThreshold.rule.alertDetailsAppSection.thresholdTitle', + { + defaultMessage: 'Threshold breached', + } + )} + comparator={criterion.comparator} + /> + + + + + + + + ))} + ) : null; - const tabs: EuiTabbedContentTab[] = [ - { - id: OVERVIEW_TAB_ID, - name: i18n.translate('xpack.observability.threshold.alertDetails.tab.overviewLabel', { - defaultMessage: 'Overview', - }), - 'data-test-subj': 'overviewTab', - content: overviewTab, - }, - { - id: RELATED_EVENTS_TAB_ID, - name: i18n.translate('xpack.observability.threshold.alertDetails.tab.relatedEventsLabel', { - defaultMessage: 'Related Events', - }), - 'data-test-subj': 'relatedEventsTab', - content: relatedEventsTab, - }, - ]; - - return ; + return overview; }