From 77e25bedfb16dbd91914d53b961c69b4e2f0f18b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alejandro=20Fern=C3=A1ndez=20G=C3=B3mez?=
 <alejandro.fernandez@elastic.co>
Date: Wed, 8 Sep 2021 11:33:00 +0200
Subject: [PATCH] [Logs UI] Fix alert previews for thresholds of `0` (#111150)

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
---
 .../expression_editor/criterion_preview_chart.tsx | 15 ++++++---------
 .../components/expression_editor/threshold.tsx    |  4 +++-
 2 files changed, 9 insertions(+), 10 deletions(-)

diff --git a/x-pack/plugins/infra/public/alerting/log_threshold/components/expression_editor/criterion_preview_chart.tsx b/x-pack/plugins/infra/public/alerting/log_threshold/components/expression_editor/criterion_preview_chart.tsx
index 4fa96ea6828d42..0ad6378a22960a 100644
--- a/x-pack/plugins/infra/public/alerting/log_threshold/components/expression_editor/criterion_preview_chart.tsx
+++ b/x-pack/plugins/infra/public/alerting/log_threshold/components/expression_editor/criterion_preview_chart.tsx
@@ -197,14 +197,11 @@ const CriterionPreviewChart: React.FC<ChartProps> = ({
   const hasData = series.length > 0;
   const { yMin, yMax, xMin, xMax } = getDomain(filteredSeries, isStacked);
   const chartDomain = {
-    max:
-      showThreshold && threshold && threshold.value
-        ? Math.max(yMax, threshold.value) * 1.1
-        : yMax * 1.1, // Add 10% headroom.
-    min: showThreshold && threshold && threshold.value ? Math.min(yMin, threshold.value) : yMin,
+    max: showThreshold && threshold ? Math.max(yMax, threshold.value) * 1.1 : yMax * 1.1, // Add 10% headroom.
+    min: showThreshold && threshold ? Math.min(yMin, threshold.value) : yMin,
   };
 
-  if (showThreshold && threshold && threshold.value && chartDomain.min === threshold.value) {
+  if (showThreshold && threshold && chartDomain.min === threshold.value) {
     chartDomain.min = chartDomain.min * 0.9; // Allow some padding so the threshold annotation has better visibility
   }
 
@@ -246,7 +243,7 @@ const CriterionPreviewChart: React.FC<ChartProps> = ({
             }}
             color={!isGrouped ? colorTransformer(Color.color0) : undefined}
           />
-          {showThreshold && threshold && threshold.value ? (
+          {showThreshold && threshold ? (
             <LineAnnotation
               id={`threshold-line`}
               domainType={AnnotationDomainType.YDomain}
@@ -260,7 +257,7 @@ const CriterionPreviewChart: React.FC<ChartProps> = ({
               }}
             />
           ) : null}
-          {showThreshold && threshold && threshold.value && isBelow ? (
+          {showThreshold && threshold && isBelow ? (
             <RectAnnotation
               id="below-threshold"
               style={{
@@ -279,7 +276,7 @@ const CriterionPreviewChart: React.FC<ChartProps> = ({
               ]}
             />
           ) : null}
-          {showThreshold && threshold && threshold.value && isAbove ? (
+          {showThreshold && threshold && isAbove ? (
             <RectAnnotation
               id="above-threshold"
               style={{
diff --git a/x-pack/plugins/infra/public/alerting/log_threshold/components/expression_editor/threshold.tsx b/x-pack/plugins/infra/public/alerting/log_threshold/components/expression_editor/threshold.tsx
index 74bae4cb797b14..af4f5dc1c81158 100644
--- a/x-pack/plugins/infra/public/alerting/log_threshold/components/expression_editor/threshold.tsx
+++ b/x-pack/plugins/infra/public/alerting/log_threshold/components/expression_editor/threshold.tsx
@@ -65,7 +65,9 @@ export const Threshold: React.FC<Props> = ({ comparator, value, updateThreshold,
             <EuiExpression
               description={thresholdPrefix}
               uppercase={true}
-              value={`${comparator ? ComparatorToi18nMap[comparator] : ''} ${value ? value : ''}`}
+              value={`${comparator ? ComparatorToi18nMap[comparator] : ''} ${
+                typeof value === 'number' ? value : ''
+              }`}
               isActive={isThresholdPopoverOpen}
               onClick={() => setThresholdPopoverOpenState(!isThresholdPopoverOpen)}
             />