[SLO] Display values >100% in preview chart (#173840)

## Summary

Fixes https://github.com/elastic/kibana/issues/170900

Display values >100% in preview chart with warning. 

<img width="989" alt="image"
src="9b2fb81c-36b7-4734-b4bc-74d6f774efb4">

x-pack/plugins/observability/public/pages/slo_edit/components/common/data_preview_chart.tsx

@@ -16,8 +16,11 @@ import {
   ScaleType,
   Settings,
   Tooltip,
+  TooltipTable,
+  TooltipTableColumn,
 } from '@elastic/charts';
 import {
+  EuiCallOut,
   EuiFlexGroup,
   EuiFlexItem,
   EuiFormRow,
@@ -77,6 +80,8 @@ export function DataPreviewChart({
     isError,
   } = useDebouncedGetPreviewData(isIndicatorSectionValid, watch('indicator'), range);
 
+  const isMoreThan100 = previewData?.find((row) => row.sliValue > 1) != null;
+
   const baseTheme = charts.theme.useChartsBaseTheme();
   const dateFormat = uiSettings.get('dateFormat');
   const numberFormat =
@@ -165,9 +170,54 @@ export function DataPreviewChart({
     </>
   );
 
+  const columns: TooltipTableColumn[] = [
+    {
+      id: 'color',
+      type: 'color',
+    },
+    {
+      id: 'label',
+      type: 'custom',
+      truncate: true,
+      cell: ({ label }) => <span className="echTooltip__label">{label}</span>,
+      style: {
+        textAlign: 'left',
+      },
+    },
+    {
+      id: 'value',
+      type: 'custom',
+      cell: ({ formattedValue }) => (
+        <>
+          <span className="echTooltip__value" dir="ltr">
+            {formattedValue}
+          </span>
+        </>
+      ),
+      style: {
+        textAlign: 'right',
+      },
+    },
+  ];
+
   return (
     <EuiFlexItem>
       {title}
+      {isMoreThan100 && (
+        <>
+          <EuiSpacer size="xs" />
+          <EuiCallOut
+            size="s"
+            color="warning"
+            title={i18n.translate('xpack.observability.slo.sloEdit.dataPreviewChart.moreThan100', {
+              defaultMessage:
+                'Some of the SLI values are more than 100%. That means good query is returning more results than total query.',
+            })}
+            iconType="warning"
+          />
+          <EuiSpacer size="xs" />
+        </>
+      )}
       <EuiFormRow fullWidth>
         <EuiPanel hasBorder={true} hasShadow={false} style={{ minHeight: 194 }}>
           {(isPreviewLoading || isError) && (
@@ -189,7 +239,40 @@ export function DataPreviewChart({
           )}
           {isSuccess && (
             <Chart size={{ height: 160, width: '100%' }}>
-              <Tooltip type="vertical" />
+              <Tooltip
+                type="vertical"
+                body={({ items }) => {
+                  const firstItem = items[0];
+                  const events = firstItem.datum.events;
+                  const rows = [items[0]];
+                  if (events) {
+                    rows.push({
+                      ...firstItem,
+                      formattedValue: events.good,
+                      value: events.good,
+                      label: i18n.translate(
+                        'xpack.observability.slo.sloEdit.dataPreviewChart.goodEvents',
+                        {
+                          defaultMessage: 'Good events',
+                        }
+                      ),
+                    });
+                    rows.push({
+                      ...firstItem,
+                      value: events.total,
+                      formattedValue: events.total,
+                      label: i18n.translate(
+                        'xpack.observability.slo.sloEdit.dataPreviewChart.badEvents',
+                        {
+                          defaultMessage: 'Total events',
+                        }
+                      ),
+                    });
+                  }
+
+                  return <TooltipTable columns={columns} items={rows} />;
+                }}
+              />
               <Settings
                 baseTheme={baseTheme}
                 showLegend={false}
@@ -249,6 +332,7 @@ export function DataPreviewChart({
                 data={(previewData ?? []).map((datum) => ({
                   date: new Date(datum.date).getTime(),
                   value: datum.sliValue >= 0 ? datum.sliValue : null,
+                  events: datum.events,
                 }))}
               />
             </Chart>

x-pack/plugins/observability/server/domain/services/compute_sli.test.ts

@@ -16,8 +16,8 @@ describe('computeSLI', () => {
     expect(computeSLI(100, 1000)).toEqual(0.1);
   });
 
-  it('returns 1 when good is greater than total events', () => {
-    expect(computeSLI(9999, 9)).toEqual(1);
+  it('returns when good is greater than total events', () => {
+    expect(computeSLI(9999, 9)).toEqual(1111);
   });
 
   it('returns rounds the value to 6 digits', () => {

x-pack/plugins/observability/server/domain/services/compute_sli.ts

@@ -14,9 +14,5 @@ export function computeSLI(good: number, total: number): number {
     return NO_DATA;
   }
 
-  if (good >= total) {
-    return 1;
-  }
-
   return toHighPrecision(good / total);
 }