[AO] Add Threshold component (#153374)

Part of #153238

## Summary

This PR adds a new component called Threshold to be used on the alert
details page.
You can check the `storybook > infra > alerting > Threshold` for this
component.
([storybook](https://ci-artifacts.kibana.dev/storybooks/pr-153374/50f671b2c16dd0dc2ab631add4fb690d3092c100/infra/index.html?path=/story/infra-alerting-threshold--default))


![image](https://user-images.githubusercontent.com/12370520/227933732-1d392d33-2ce5-4236-bc3a-8f82ebe91649.png)

x-pack/plugins/infra/public/alerting/common/components/threshold.stories.tsx

@@ -0,0 +1,46 @@
+/*
+ * 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 React from 'react';
+import { ComponentMeta } from '@storybook/react';
+import { LIGHT_THEME } from '@elastic/charts';
+import { EUI_CHARTS_THEME_LIGHT } from '@elastic/eui/dist/eui_charts_theme';
+import { Comparator } from '../../../../common/alerting/metrics';
+import { Props, Threshold as Component } from './threshold';
+
+export default {
+  component: Component,
+  title: 'infra/alerting/Threshold',
+  decorators: [
+    (Story) => (
+      <div
+        style={{
+          height: '160px',
+          width: '240px',
+        }}
+      >
+        {Story()}
+      </div>
+    ),
+  ],
+} as ComponentMeta<typeof Component>;
+
+const defaultProps: Props = {
+  chartProps: { theme: EUI_CHARTS_THEME_LIGHT.theme, baseTheme: LIGHT_THEME },
+  comparator: Comparator.GT,
+  id: 'componentId',
+  threshold: 90,
+  title: 'Threshold breached',
+  value: 93,
+  valueFormatter: (d) => `${d}%`,
+};
+
+export const Default = {
+  args: {
+    ...defaultProps,
+  },
+};

x-pack/plugins/infra/public/alerting/common/components/threshold.test.tsx

@@ -0,0 +1,43 @@
+/*
+ * 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 { LIGHT_THEME } from '@elastic/charts';
+import { EUI_CHARTS_THEME_LIGHT } from '@elastic/eui/dist/eui_charts_theme';
+import { Comparator } from '../../../../common/alerting/metrics';
+import { render } from '@testing-library/react';
+import { Props, Threshold } from './threshold';
+import React from 'react';
+
+describe('Threshold', () => {
+  const renderComponent = (props: Partial<Props> = {}) => {
+    const defaultProps: Props = {
+      chartProps: { theme: EUI_CHARTS_THEME_LIGHT.theme, baseTheme: LIGHT_THEME },
+      comparator: Comparator.GT,
+      id: 'componentId',
+      threshold: 90,
+      title: 'Threshold breached',
+      value: 93,
+      valueFormatter: (d) => `${d}%`,
+    };
+
+    return render(
+      <div
+        style={{
+          height: '160px',
+          width: '240px',
+        }}
+      >
+        <Threshold {...defaultProps} {...props} />
+      </div>
+    );
+  };
+
+  it('shows component', () => {
+    const component = renderComponent();
+    expect(component.queryByTestId('threshold-90-93')).toBeTruthy();
+  });
+});

x-pack/plugins/infra/public/alerting/common/components/threshold.tsx

@@ -0,0 +1,82 @@
+/*
+ * 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 React from 'react';
+import { Chart, Metric, Settings } from '@elastic/charts';
+import { EuiIcon, EuiPanel, useEuiBackgroundColor } from '@elastic/eui';
+import type { PartialTheme, Theme } from '@elastic/charts';
+import { i18n } from '@kbn/i18n';
+import { Comparator } from '../../../../common/alerting/metrics';
+
+export interface ChartProps {
+  theme: PartialTheme;
+  baseTheme: Theme;
+}
+
+export interface Props {
+  chartProps: ChartProps;
+  comparator: Comparator;
+  id: string;
+  threshold: number;
+  title: string;
+  value: number;
+  valueFormatter: (d: number) => string;
+}
+
+export const Threshold = ({
+  chartProps: { theme, baseTheme },
+  comparator,
+  id,
+  threshold,
+  title,
+  value,
+  valueFormatter,
+}: Props) => {
+  const color = useEuiBackgroundColor('danger');
+
+  return (
+    <EuiPanel
+      paddingSize="none"
+      style={{
+        height: '100%',
+        overflow: 'hidden',
+        position: 'relative',
+        minWidth: '100%',
+      }}
+      hasShadow={false}
+      data-test-subj={`threshold-${threshold}-${value}`}
+    >
+      <Chart>
+        <Settings theme={theme} baseTheme={baseTheme} />
+        <Metric
+          id={id}
+          data={[
+            [
+              {
+                title,
+                extra: (
+                  <span>
+                    {i18n.translate('xpack.infra.alerting.thresholdExtraTitle', {
+                      values: { comparator, threshold: valueFormatter(threshold) },
+                      defaultMessage: `Alert when {comparator} {threshold}`,
+                    })}
+                  </span>
+                ),
+                color,
+                value,
+                valueFormatter,
+                icon: ({ width, height, color: iconColor }) => (
+                  <EuiIcon width={width} height={height} color={iconColor} type="alert" />
+                ),
+              },
+            ],
+          ]}
+        />
+      </Chart>
+    </EuiPanel>
+  );
+};