[APM] [Preview Chart] Fix threshold area annotation and enable tooltip (

#181978) Fixes #159928, #181148, elastic/sdh-kibana#4596, #179811 ### Threshold: 0, Y: 0 <img width="605" alt="Screenshot 2024-04-29 at 13 00 39" src="https://github.com/elastic/kibana/assets/69037875/02d72939-4f4c-4d3a-bc77-c5c27559df86"> ### Show empty timestamp if there is no data <img width="604" alt="Screenshot 2024-04-30 at 15 31 58" src="https://github.com/elastic/kibana/assets/69037875/7d4fcc08-07c9-46f7-a01e-e50c41b7e141"> ### Tooltip <img width="598" alt="Screenshot 2024-04-29 at 14 25 33" src="https://github.com/elastic/kibana/assets/69037875/2e35887c-0fb8-40d4-a0f0-e5fc7e3f1fd7">
elastic · Apr 30, 2024 · db188e7 · db188e7
1 parent 1ca07d8
commit db188e7
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 58 deletions.
diff --git a/...servability_solution/apm/public/components/alerting/ui_components/chart_preview/index.tsx b/...servability_solution/apm/public/components/alerting/ui_components/chart_preview/index.tsx
@@ -80,7 +80,7 @@ export function ChartPreview({
 
   const { yMin, yMax, xMin, xMax } = getDomain(series);
   const chartDomain = {
-    max: Math.max(yMax, threshold) * 1.1, // Add 10% headroom.
+    max: Math.max(yMax === 0 ? 1 : yMax, threshold) * 1.1, // Add 10% headroom.
     min: Math.min(yMin, threshold) * 0.9, // Add 10% headroom.
   };
 
@@ -110,7 +110,6 @@ export function ChartPreview({
         data-test-subj="ChartPreview"
       >
         <Tooltip
-          type="none"
           headerFormatter={({ value }) => {
             const dateFormat =
               (uiSettings && uiSettings.get(UI_SETTINGS.DATE_FORMAT)) || DEFAULT_DATE_FORMAT;

diff --git a/...solution/apm/server/routes/alerts/rule_types/error_count/get_error_count_chart_preview.ts b/...solution/apm/server/routes/alerts/rule_types/error_count/get_error_count_chart_preview.ts
@@ -63,21 +63,21 @@ export async function getTransactionErrorCountChartPreview({
   };
 
   const aggs = {
-    timeseries: {
-      date_histogram: {
-        field: '@timestamp',
-        fixed_interval: interval,
-        extended_bounds: {
-          min: start,
-          max: end,
-        },
+    series: {
+      multi_terms: {
+        terms: getGroupByTerms(allGroupByFields),
+        size: 1000,
+        order: { _count: 'desc' as const },
       },
       aggs: {
-        series: {
-          multi_terms: {
-            terms: getGroupByTerms(allGroupByFields),
-            size: 1000,
-            order: { _count: 'desc' as const },
+        timeseries: {
+          date_histogram: {
+            field: '@timestamp',
+            fixed_interval: interval,
+            extended_bounds: {
+              min: start,
+              max: end,
+            },
           },
         },
       },
@@ -95,11 +95,11 @@ export async function getTransactionErrorCountChartPreview({
     return { series: [], totalGroups: 0 };
   }
 
-  const seriesDataMap = resp.aggregations.timeseries.buckets.reduce((acc, bucket) => {
-    const x = bucket.key;
-    bucket.series.buckets.forEach((seriesBucket) => {
-      const bucketKey = seriesBucket.key.join('_');
-      const y = seriesBucket.doc_count;
+  const seriesDataMap = resp.aggregations.series.buckets.reduce((acc, bucket) => {
+    const bucketKey = bucket.key.join('_');
+    bucket.timeseries.buckets.forEach((timeseriesBucket) => {
+      const x = timeseriesBucket.key;
+      const y = timeseriesBucket.doc_count;
 
       if (acc[bucketKey]) {
         acc[bucketKey].push({ x, y });

diff --git a/...r/routes/alerts/rule_types/transaction_duration/get_transaction_duration_chart_preview.ts b/...r/routes/alerts/rule_types/transaction_duration/get_transaction_duration_chart_preview.ts
@@ -90,21 +90,21 @@ export async function getTransactionDurationChartPreview({
   const allGroupByFields = getAllGroupByFields(ApmRuleType.TransactionDuration, groupByFields);
 
   const aggs = {
-    timeseries: {
-      date_histogram: {
-        field: '@timestamp',
-        fixed_interval: interval,
-        min_doc_count: 0,
-        extended_bounds: {
-          min: start,
-          max: end,
-        },
+    series: {
+      multi_terms: {
+        terms: getGroupByTerms(allGroupByFields),
+        size: 1000,
       },
       aggs: {
-        series: {
-          multi_terms: {
-            terms: [...getGroupByTerms(allGroupByFields)],
-            size: 1000,
+        timeseries: {
+          date_histogram: {
+            field: '@timestamp',
+            fixed_interval: interval,
+            min_doc_count: 0,
+            extended_bounds: {
+              min: start,
+              max: end,
+            },
             ...getMultiTermsSortOrder(aggregationType),
           },
           aggs: {
@@ -130,14 +130,14 @@ export async function getTransactionDurationChartPreview({
     return { series: [], totalGroups: 0 };
   }
 
-  const seriesDataMap = resp.aggregations.timeseries.buckets.reduce((acc, bucket) => {
-    const x = bucket.key;
-    bucket.series.buckets.forEach((seriesBucket) => {
-      const bucketKey = seriesBucket.key.join('_');
+  const seriesDataMap = resp.aggregations.series.buckets.reduce((acc, bucket) => {
+    const bucketKey = bucket.key.join('_');
+    bucket.timeseries.buckets.forEach((timeseriesBucket) => {
+      const x = timeseriesBucket.key;
       const y =
-        'avgLatency' in seriesBucket
-          ? seriesBucket.avgLatency.value
-          : seriesBucket.pctLatency.values[0].value;
+        'avgLatency' in timeseriesBucket
+          ? timeseriesBucket.avgLatency.value
+          : timeseriesBucket.pctLatency.values[0].value;
       if (acc[bucketKey]) {
         acc[bucketKey].push({ x, y });
       } else {

diff --git a/...utes/alerts/rule_types/transaction_error_rate/get_transaction_error_rate_chart_preview.ts b/...utes/alerts/rule_types/transaction_error_rate/get_transaction_error_rate_chart_preview.ts
@@ -97,21 +97,21 @@ export async function getTransactionErrorRateChartPreview({
         },
       },
       aggs: {
-        timeseries: {
-          date_histogram: {
-            field: '@timestamp',
-            fixed_interval: interval,
-            extended_bounds: {
-              min: start,
-              max: end,
-            },
+        series: {
+          multi_terms: {
+            terms: getGroupByTerms(allGroupByFields),
+            size: 1000,
+            order: { _count: 'desc' as const },
           },
           aggs: {
-            series: {
-              multi_terms: {
-                terms: [...getGroupByTerms(allGroupByFields)],
-                size: 1000,
-                order: { _count: 'desc' as const },
+            timeseries: {
+              date_histogram: {
+                field: '@timestamp',
+                fixed_interval: interval,
+                extended_bounds: {
+                  min: start,
+                  max: end,
+                },
               },
               aggs: {
                 outcomes: {
@@ -133,11 +133,11 @@ export async function getTransactionErrorRateChartPreview({
     return { series: [], totalGroups: 0 };
   }
 
-  const seriesDataMap = resp.aggregations.timeseries.buckets.reduce((acc, bucket) => {
-    const x = bucket.key;
-    bucket.series.buckets.forEach((seriesBucket) => {
-      const bucketKey = seriesBucket.key.join('_');
-      const y = calculateErrorRate(seriesBucket.outcomes.buckets);
+  const seriesDataMap = resp.aggregations.series.buckets.reduce((acc, bucket) => {
+    const bucketKey = bucket.key.join('_');
+    bucket.timeseries.buckets.forEach((timeseriesBucket) => {
+      const x = timeseriesBucket.key;
+      const y = calculateErrorRate(timeseriesBucket.outcomes.buckets);
 
       if (acc[bucketKey]) {
         acc[bucketKey].push({ x, y });