From 7a67721fe127a7f9109e3c7e2e471257171f21fb Mon Sep 17 00:00:00 2001
From: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
Date: Wed, 5 Feb 2025 09:19:34 +1100
Subject: [PATCH] [8.16] [Custom threshold/Metric threshold] Display No Data in
Threshold breached component (#209561) (#209657)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
# Backport
This will backport the following commits from `main` to `8.16`:
- [[Custom threshold/Metric threshold] Display No Data in Threshold
breached component
(#209561)](https://github.com/elastic/kibana/pull/209561)
### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)
Co-authored-by: Bena Kansara <69037875+benakansara@users.noreply.github.com>
---
.../alerting/common/components/threshold.tsx | 14 ++++++--
.../custom_threshold/components/threshold.tsx | 35 +++++++++++++------
2 files changed, 36 insertions(+), 13 deletions(-)
diff --git a/x-pack/plugins/observability_solution/infra/public/alerting/common/components/threshold.tsx b/x-pack/plugins/observability_solution/infra/public/alerting/common/components/threshold.tsx
index 0b587bf067f47..d2f4cb7de13b8 100644
--- a/x-pack/plugins/observability_solution/infra/public/alerting/common/components/threshold.tsx
+++ b/x-pack/plugins/observability_solution/infra/public/alerting/common/components/threshold.tsx
@@ -31,6 +31,14 @@ export interface Props {
};
}
+const NO_DATA_VALUE = i18n.translate('xpack.infra.alerting.noDataValue', {
+ defaultMessage: 'No Data',
+});
+
+const THRESHOLD_NO_DATA_TITLE = i18n.translate('xpack.infra.alerting.thresholdNoDataTitle', {
+ defaultMessage: 'Alert when',
+});
+
export const Threshold = ({
chartProps: { theme, baseTheme },
comparator,
@@ -63,7 +71,7 @@ export const Threshold = ({
[
{
title,
- extra: (
+ extra: value ? (
<>
{i18n.translate('xpack.infra.alerting.thresholdExtraTitle', {
values: {
@@ -82,9 +90,11 @@ export const Threshold = ({
defaultMessage: `Warn when {comparator} {threshold}`,
})}
+ ) : (
+ <>{THRESHOLD_NO_DATA_TITLE}
),
color,
- value,
+ value: value ?? NO_DATA_VALUE,
valueFormatter,
icon: ({ width, height, color: iconColor }) => (
diff --git a/x-pack/plugins/observability_solution/observability/public/components/custom_threshold/components/threshold.tsx b/x-pack/plugins/observability_solution/observability/public/components/custom_threshold/components/threshold.tsx
index 347730fe4dea6..593fce65e2102 100644
--- a/x-pack/plugins/observability_solution/observability/public/components/custom_threshold/components/threshold.tsx
+++ b/x-pack/plugins/observability_solution/observability/public/components/custom_threshold/components/threshold.tsx
@@ -27,6 +27,17 @@ export interface Props {
valueFormatter?: ValueFormatter;
}
+const NO_DATA_VALUE = i18n.translate('xpack.observability.customThreshold.rule.noDataValue', {
+ defaultMessage: 'No Data',
+});
+
+const THRESHOLD_NO_DATA_TITLE = i18n.translate(
+ 'xpack.observability.customThreshold.rule.thresholdNoDataTitle',
+ {
+ defaultMessage: 'Alert when',
+ }
+);
+
export function Threshold({
chartProps: { theme, baseTheme },
comparator,
@@ -61,20 +72,22 @@ export function Threshold({
title,
extra: (
- {i18n.translate(
- 'xpack.observability.customThreshold.rule.thresholdExtraTitle',
- {
- values: {
- comparator,
- threshold: threshold.map((t) => valueFormatter(t)).join(' - '),
- },
- defaultMessage: `Alert when {comparator} {threshold}`,
- }
- )}
+ {value
+ ? i18n.translate(
+ 'xpack.observability.customThreshold.rule.thresholdExtraTitle',
+ {
+ values: {
+ comparator,
+ threshold: threshold.map((t) => valueFormatter(t)).join(' - '),
+ },
+ defaultMessage: `Alert when {comparator} {threshold}`,
+ }
+ )
+ : THRESHOLD_NO_DATA_TITLE}
),
color,
- value,
+ value: value ?? NO_DATA_VALUE,
valueFormatter,
icon: ({ width, height, color: iconColor }) => (