[Observability] [Alert details page] Remove Technical Preview when feature flag is off (#180892)

Closes https://github.com/elastic/kibana/issues/180886

## Metric threshold alert

Feature flag for Metric threshold alert details page:
`xpack.observability.unsafe.alertDetails.metrics.enabled`

### When feature flag is OFF
<img width="1470" alt="Screenshot 2024-04-16 at 12 11 01"
src="25c9a97e-e081-4761-b448-e97353ec5573">

### When feature flag is ON

<img width="1476" alt="Screenshot 2024-04-16 at 12 09 32"
src="be295276-f919-4fa7-b411-94c3d1e0c3b5">

## Inventory threshold alert

There is no separate feature flag for Inventory threshold alert details
page and we don't have `AlertDetailsAppSection` defined for this alert,
so I have removed "Technical Preview" badge from it.

<img width="1485" alt="Screenshot 2024-04-16 at 12 10 45"
src="ee23b25f-7fbc-4f4a-871a-18e5ba424afd">
This commit is contained in:
Bena Kansara 2024-04-16 13:55:31 +02:00 committed by GitHub
parent 9627ca30d3
commit e60d23a2ff
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -30,10 +30,9 @@ import { css } from '@emotion/react';
import { asDuration } from '../../../../common/utils/formatters';
import { TopAlert } from '../../../typings/alerts';
import { ExperimentalBadge } from '../../../components/experimental_badge';
import {
METRIC_INVENTORY_THRESHOLD_ALERT_TYPE_ID,
METRIC_THRESHOLD_ALERT_TYPE_ID,
} from '../alert_details';
import { METRIC_THRESHOLD_ALERT_TYPE_ID } from '../alert_details';
import { isAlertDetailsEnabledPerApp } from '../../../utils/is_alert_details_enabled';
import { usePluginContext } from '../../../hooks/use_plugin_context';
export interface PageTitleProps {
alert: TopAlert | null;
@ -53,18 +52,19 @@ export function pageTitleContent(ruleCategory: string) {
export function PageTitle({ alert, alertStatus, dataTestSubj }: PageTitleProps) {
const { euiTheme } = useEuiTheme();
const { config } = usePluginContext();
if (!alert) return <EuiLoadingSpinner />;
const showExperimentalBadge =
alert.fields[ALERT_RULE_TYPE_ID] === METRIC_THRESHOLD_ALERT_TYPE_ID ||
alert.fields[ALERT_RULE_TYPE_ID] === METRIC_INVENTORY_THRESHOLD_ALERT_TYPE_ID;
const showExperimentalBadge = alert.fields[ALERT_RULE_TYPE_ID] === METRIC_THRESHOLD_ALERT_TYPE_ID;
return (
<div data-test-subj={dataTestSubj}>
<EuiFlexGroup direction="row" alignItems="center" gutterSize="s">
{pageTitleContent(alert.fields[ALERT_RULE_CATEGORY])}
{showExperimentalBadge && <ExperimentalBadge />}
{isAlertDetailsEnabledPerApp(alert, config) && showExperimentalBadge && (
<ExperimentalBadge />
)}
</EuiFlexGroup>
<EuiSpacer size="l" />
<EuiFlexGroup direction="row" alignItems="center" gutterSize="xl">