[Actionable Observability] Move the AlertSummary into the AlertDetail…

…sAppSection in the solutions (#147025)

## Summary

Closes #145409 by formatting the `Actual value` and the `Expected
value.`

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

@@ -21,20 +21,21 @@ import {
   ALERT_EVALUATION_THRESHOLD,
   ALERT_EVALUATION_VALUE,
   ALERT_RULE_TAGS,
+  ALERT_RULE_TYPE_ID,
   ALERT_START,
   ALERT_STATUS,
   ALERT_STATUS_ACTIVE,
   ALERT_STATUS_RECOVERED,
   TIMESTAMP,
 } from '@kbn/rule-data-utils';
+import { formatAlertEvaluationValue } from '../../../utils/format_alert_evaluation_value';
 import { asDuration } from '../../../../common/utils/formatters';
 import { AlertSummaryProps } from '../types';
 import { AlertStatusIndicator } from '../../../components/shared/alert_status_indicator';
 import { DEFAULT_DATE_FORMAT } from '../constants';
 
 export function AlertSummary({ alert }: AlertSummaryProps) {
   const tags = alert?.fields[ALERT_RULE_TAGS];
-
   return (
     <div data-test-subj="alert-summary-container">
       <EuiFlexGroup>
@@ -49,7 +50,10 @@ export function AlertSummary({ alert }: AlertSummaryProps) {
           </EuiTitle>
           <EuiSpacer size="s" />
           <EuiText size="s" color="subdued">
-            {alert?.fields[ALERT_EVALUATION_VALUE] ?? '-'}
+            {formatAlertEvaluationValue(
+              alert?.fields[ALERT_RULE_TYPE_ID],
+              alert?.fields[ALERT_EVALUATION_VALUE]
+            )}
           </EuiText>
         </EuiFlexItem>
         <EuiFlexItem>
@@ -63,7 +67,10 @@ export function AlertSummary({ alert }: AlertSummaryProps) {
           </EuiTitle>
           <EuiSpacer size="s" />
           <EuiText size="s" color="subdued">
-            {alert?.fields[ALERT_EVALUATION_THRESHOLD] ?? '-'}
+            {formatAlertEvaluationValue(
+              alert?.fields[ALERT_RULE_TYPE_ID],
+              alert?.fields[ALERT_EVALUATION_THRESHOLD]
+            )}
           </EuiText>
         </EuiFlexItem>
         <EuiFlexItem>
@@ -94,7 +101,7 @@ export function AlertSummary({ alert }: AlertSummaryProps) {
             <AlertStatusIndicator
               textSize="s"
               alertStatus={
-                alert?.fields[ALERT_STATUS] === ALERT_STATUS_ACTIVE
+                alert.fields[ALERT_STATUS] === ALERT_STATUS_ACTIVE
                   ? ALERT_STATUS_ACTIVE
                   : ALERT_STATUS_RECOVERED
               }

x-pack/plugins/observability/public/utils/format_alert_evaluation_value.test.ts

@@ -0,0 +1,23 @@
+/*
+ * 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 { formatAlertEvaluationValue } from './format_alert_evaluation_value';
+
+describe('formatAlertEvaluationValue', () => {
+  it('returns - when there is no evaluationValue passed', () => {
+    expect(formatAlertEvaluationValue('apm.transaction_error_rate', undefined)).toBe('-');
+  });
+  it('returns the evaluation value when ruleTypeId in unknown aka unformatted', () => {
+    expect(formatAlertEvaluationValue('unknown.rule.type', 2000)).toBe(2000);
+  });
+  it('returns the evaluation value formatted as percent when the alert rule type is "apm.transaction_error_rate" ', () => {
+    expect(formatAlertEvaluationValue('apm.transaction_error_rate', 20)).toBe('20%');
+  });
+  it('returns the evaluation value formatted as duration in ms when the alert rule type is "apm.transaction_duration" ', () => {
+    expect(formatAlertEvaluationValue('apm.transaction_duration', 140000)).toBe('140 ms');
+  });
+});

x-pack/plugins/observability/public/utils/format_alert_evaluation_value.ts

@@ -0,0 +1,25 @@
+/*
+ * 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 { asMillisecondDuration, asPercent } from '../../common/utils/formatters';
+import {
+  ALERT_EVALUATION_UNIT_TYPE,
+  getAlertEvaluationUnitTypeByRuleTypeId,
+} from './get_alert_evaluation_unit_type_by_rule_type_id';
+
+export const formatAlertEvaluationValue = (ruleTypeId?: string, evaluationValue?: number) => {
+  if (!evaluationValue || !ruleTypeId) return '-';
+  const unitType = getAlertEvaluationUnitTypeByRuleTypeId(ruleTypeId);
+  switch (unitType) {
+    case ALERT_EVALUATION_UNIT_TYPE.DURATION:
+      return asMillisecondDuration(evaluationValue);
+    case ALERT_EVALUATION_UNIT_TYPE.PERCENT:
+      return asPercent(evaluationValue, 100);
+    default:
+      return evaluationValue;
+  }
+};

x-pack/plugins/observability/public/utils/get_alert_evaluation_unit_type_by_rule_type_id.ts

@@ -0,0 +1,28 @@
+/*
+ * 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.
+ */
+
+export const ALERT_EVALUATION_UNIT_TYPE = {
+  DURATION: 'DURATION',
+  PERCENT: 'PERCENT',
+  NUMBER: 'NUMBER',
+} as const;
+
+type ObjectValues<T> = T[keyof T];
+type AlertEvaluationUnitType = ObjectValues<typeof ALERT_EVALUATION_UNIT_TYPE>;
+
+export const getAlertEvaluationUnitTypeByRuleTypeId = (
+  ruleTypeId: string
+): AlertEvaluationUnitType => {
+  switch (ruleTypeId) {
+    case 'apm.transaction_duration':
+      return ALERT_EVALUATION_UNIT_TYPE.DURATION;
+    case 'apm.transaction_error_rate':
+      return ALERT_EVALUATION_UNIT_TYPE.PERCENT;
+    default:
+      return ALERT_EVALUATION_UNIT_TYPE.NUMBER;
+  }
+};