Hide related events tab in Custom threshold alert details page (#167646)

Resolves https://github.com/elastic/kibana/issues/167645

Hides "Related Events" tab in Custom threshold alert details page as we
want to keep it as a prototype.

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<MetricThresholdRuleTypeParams>;
@@ -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 { uiSettings, charts, data } = useKibana().services;
-  const { EmbeddableChangePointChart } = aiops;
   const { euiTheme } = useEuiTheme();
   const [dataView, setDataView] = useState<DataView>();
   const [, setDataViewError] = useState<Error>();
@@ -135,120 +129,65 @@ export default function AlertDetailsAppSection({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [data.search.searchSource]);
 
-  const relatedEventsTimeRange = (criterion: MetricExpression): TimeRange => {
+  const overview = !!ruleParams.criteria ? (
-    return {
+    <EuiFlexGroup direction="column" data-test-subj="thresholdAlertOverviewSection">
-      from: moment(alert.start)
+      {ruleParams.criteria.map((criterion, index) => (
-        .subtract((criterion.timeSize ?? 5) * 2, criterion.timeUnit ?? 'minutes')
+        <EuiFlexItem key={generateUniqueKey(criterion)}>
-        .toISOString(),
+          <EuiPanel hasBorder hasShadow={false}>
-      to: moment(alert.lastUpdated).toISOString(),
+            <EuiTitle size="xs">
-      mode: 'absolute',
+              <h4>
-    };
+                {criterion.aggType.toUpperCase()}{' '}
-  };
+                {'metric' in criterion ? criterion.metric : undefined}
-
+              </h4>
-  const overviewTab = !!ruleParams.criteria ? (
+            </EuiTitle>
-    <>
+            <EuiText size="s" color="subdued">
-      <EuiSpacer size="l" />
+              <FormattedMessage
-      <EuiFlexGroup direction="column" data-test-subj="thresholdAlertOverviewSection">
+                id="xpack.observability.customThreshold.rule.alertDetailsAppSection.criterion.subtitle"
-        {ruleParams.criteria.map((criterion, index) => (
+                defaultMessage="Last {lookback} {timeLabel}"
-          <EuiFlexItem key={generateUniqueKey(criterion)}>
+                values={{
-            <EuiPanel hasBorder hasShadow={false}>
+                  lookback: criterion.timeSize,
-              <EuiTitle size="xs">
+                  timeLabel: TIME_LABELS[criterion.timeUnit as keyof typeof TIME_LABELS],
-                <h4>
+                }}
-                  {criterion.aggType.toUpperCase()}{' '}
-                  {'metric' in criterion ? criterion.metric : undefined}
-                </h4>
-              </EuiTitle>
-              <EuiText size="s" color="subdued">
-                <FormattedMessage
-                  id="xpack.observability.customThreshold.rule.alertDetailsAppSection.criterion.subtitle"
-                  defaultMessage="Last {lookback} {timeLabel}"
-                  values={{
-                    lookback: criterion.timeSize,
-                    timeLabel: TIME_LABELS[criterion.timeUnit as keyof typeof TIME_LABELS],
-                  }}
-                />
-              </EuiText>
-              <EuiSpacer size="s" />
-              <EuiFlexGroup>
-                <EuiFlexItem style={{ minHeight: 150, minWidth: 160 }} grow={1}>
-                  <Threshold
-                    chartProps={chartProps}
-                    id={`threshold-${generateUniqueKey(criterion)}`}
-                    threshold={criterion.threshold[0]}
-                    value={alert.fields[ALERT_EVALUATION_VALUES]![index]}
-                    valueFormatter={(d) =>
-                      metricValueFormatter(d, 'metric' in criterion ? criterion.metric : undefined)
-                    }
-                    title={i18n.translate(
-                      'xpack.observability.customThreshold.rule.alertDetailsAppSection.thresholdTitle',
-                      {
-                        defaultMessage: 'Threshold breached',
-                      }
-                    )}
-                    comparator={criterion.comparator}
-                  />
-                </EuiFlexItem>
-                <EuiFlexItem grow={5}>
-                  <ExpressionChart
-                    annotations={annotations}
-                    chartType={MetricsExplorerChartType.line}
-                    derivedIndexPattern={derivedIndexPattern}
-                    expression={criterion}
-                    filterQuery={(ruleParams.searchConfiguration?.query as Query)?.query as string}
-                    groupBy={ruleParams.groupBy}
-                    hideTitle
-                    timeRange={timeRange}
-                  />
-                </EuiFlexItem>
-              </EuiFlexGroup>
-            </EuiPanel>
-          </EuiFlexItem>
-        ))}
-      </EuiFlexGroup>
-    </>
-  ) : null;
-
-  const relatedEventsTab = !!ruleParams.criteria ? (
-    <>
-      <EuiSpacer size="l" />
-      <EuiFlexGroup direction="column" data-test-subj="thresholdAlertRelatedEventsSection">
-        {ruleParams.criteria.map((criterion, criterionIndex) =>
-          criterion.metrics?.map((metric, metricIndex) => {
-            const id = `embeddableChart-criterion${criterionIndex}-metric${metricIndex}`;
-            return dataView?.id ? (
-              <EmbeddableChangePointChart
-                id={id}
-                key={id}
-                dataViewId={dataView.id}
-                timeRange={relatedEventsTimeRange(criterion)}
-                fn={metric.aggType ?? ''}
-                metricField={metric.field ?? ''}
               />
-            ) : null;
+            </EuiText>
-          })
+            <EuiSpacer size="s" />
-        )}
+            <EuiFlexGroup>
-      </EuiFlexGroup>
+              <EuiFlexItem style={{ minHeight: 150, minWidth: 160 }} grow={1}>
-    </>
+                <Threshold
+                  chartProps={chartProps}
+                  id={`threshold-${generateUniqueKey(criterion)}`}
+                  threshold={criterion.threshold[0]}
+                  value={alert.fields[ALERT_EVALUATION_VALUES]![index]}
+                  valueFormatter={(d) =>
+                    metricValueFormatter(d, 'metric' in criterion ? criterion.metric : undefined)
+                  }
+                  title={i18n.translate(
+                    'xpack.observability.customThreshold.rule.alertDetailsAppSection.thresholdTitle',
+                    {
+                      defaultMessage: 'Threshold breached',
+                    }
+                  )}
+                  comparator={criterion.comparator}
+                />
+              </EuiFlexItem>
+              <EuiFlexItem grow={5}>
+                <ExpressionChart
+                  annotations={annotations}
+                  chartType={MetricsExplorerChartType.line}
+                  derivedIndexPattern={derivedIndexPattern}
+                  expression={criterion}
+                  filterQuery={(ruleParams.searchConfiguration?.query as Query)?.query as string}
+                  groupBy={ruleParams.groupBy}
+                  hideTitle
+                  timeRange={timeRange}
+                />
+              </EuiFlexItem>
+            </EuiFlexGroup>
+          </EuiPanel>
+        </EuiFlexItem>
+      ))}
+    </EuiFlexGroup>
   ) : null;
 
-  const tabs: EuiTabbedContentTab[] = [
+  return overview;
-    {
-      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 <EuiTabbedContent data-test-subj="thresholdAlertDetailsTabbedContent" tabs={tabs} />;
 }