[Alert Details] Update alert status for untracked alerts (#173520)

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

The alert was shown as "Recovered" in alert details pages for alerts
marked as untracked. The status now reflects as "Untracked" for these
alerts.

## Alert details pages

- APM Latency threshold alert
- Log threshold alert
- Custom threshold alert

<img width="1268" alt="Screenshot 2023-12-18 at 19 16 17"
src="d6933ff4-d39d-427c-8939-dd74f2fbad33">

x-pack/plugins/observability/public/pages/alert_details/components/page_title.test.tsx

@@ -8,7 +8,7 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import { __IntlProvider as IntlProvider } from '@kbn/i18n-react';
-import { ALERT_RULE_CATEGORY } from '@kbn/rule-data-utils';
+import { ALERT_RULE_CATEGORY, ALERT_STATUS } from '@kbn/rule-data-utils';
 import { PageTitle, PageTitleProps } from './page_title';
 import { alert } from '../mock/alert';
 
@@ -66,16 +66,40 @@ describe('Page Title', () => {
     expect(getByTestId('ruleTypeId').textContent).toContain('Inventory threshold breached');
   });
 
-  it('should display an active badge when active is true', async () => {
+  it('should display an active badge when alert is active', async () => {
     const { getByText } = renderComp(defaultProps);
     expect(getByText('Active')).toBeTruthy();
   });
 
-  it('should display an inactive badge when active is false', async () => {
-    const updatedProps = { alert, dataTestSubj: defaultProps.dataTestSubj };
-    updatedProps.alert.active = false;
+  it('should display a recovered badge when alert is recovered', async () => {
+    const updatedProps = {
+      alert: {
+        ...defaultProps.alert,
+        fields: {
+          ...defaultProps.alert.fields,
+          [ALERT_STATUS]: 'recovered',
+        },
+      },
+      dataTestSubj: defaultProps.dataTestSubj,
+    };
 
     const { getByText } = renderComp({ ...updatedProps });
     expect(getByText('Recovered')).toBeTruthy();
   });
+
+  it('should display an untracked badge when alert is untracked', async () => {
+    const updatedProps = {
+      alert: {
+        ...defaultProps.alert,
+        fields: {
+          ...defaultProps.alert.fields,
+          [ALERT_STATUS]: 'untracked',
+        },
+      },
+      dataTestSubj: defaultProps.dataTestSubj,
+    };
+
+    const { getByText } = renderComp({ ...updatedProps });
+    expect(getByText('Untracked')).toBeTruthy();
+  });
 });

x-pack/plugins/observability/public/pages/alert_details/components/page_title.tsx

@@ -22,8 +22,10 @@ import {
   ALERT_FLAPPING,
   ALERT_RULE_CATEGORY,
   ALERT_RULE_TYPE_ID,
+  ALERT_STATUS,
   ALERT_STATUS_ACTIVE,
   ALERT_STATUS_RECOVERED,
+  ALERT_STATUS_UNTRACKED,
   TIMESTAMP,
 } from '@kbn/rule-data-utils';
 import moment from 'moment';
@@ -70,7 +72,13 @@ export function PageTitle({ alert, dataTestSubj }: PageTitleProps) {
       <EuiFlexGroup direction="row" alignItems="center" gutterSize="xl">
         <EuiFlexItem grow={false}>
           <AlertLifecycleStatusBadge
-            alertStatus={alert.active ? ALERT_STATUS_ACTIVE : ALERT_STATUS_RECOVERED}
+            alertStatus={
+              alert.fields[ALERT_STATUS] === 'active'
+                ? ALERT_STATUS_ACTIVE
+                : alert.fields[ALERT_STATUS] === 'recovered'
+                ? ALERT_STATUS_RECOVERED
+                : ALERT_STATUS_UNTRACKED
+            }
             flapping={alert.fields[ALERT_FLAPPING]}
           />
         </EuiFlexItem>