github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 01:38:56 -04:00
Code Issues Projects Releases Packages Wiki Activity

[Custom threshold/Metric threshold] Display No Data in Threshold breached component (#209561)

Browse source 
Resolves https://github.com/elastic/kibana/issues/196062
Fixes https://github.com/elastic/kibana/issues/209515

Displays "Alert when No Data" in Threshold breached component for no
data alerts

- ### Custom threshold alert details page
<img width="1643" alt="Screenshot 2025-02-04 at 3 55 32 PM"
src="https://github.com/user-attachments/assets/5fbf27d2-dcb5-40d1-b466-c8bcc2d700c9"
/>

- ### Metric threshold alert details page
<img width="1645" alt="Screenshot 2025-02-04 at 3 54 58 PM"
src="https://github.com/user-attachments/assets/8968c803-ff73-4f7d-8501-f6a1e7e16e8c"
/>
This commit is contained in:
Bena Kansara 2025-02-04 21:03:48 +01:00 • committed by GitHub
parent 07557b686c
commit 551d31b0ff
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 36 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

14
x-pack/solutions/observability/plugins/infra/public/alerting/common/components/threshold.tsx
View file

@ -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,
@ -64,7 +72,7 @@ export const Threshold = ({
[
{
title,
extra: (
extra: value ? (
<>
{i18n.translate('xpack.infra.alerting.thresholdExtraTitle', {
values: {
@ -83,9 +91,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 }) => (
<EuiIcon width={width} height={height} color={iconColor} type="alert" />

35
x-pack/solutions/observability/plugins/observability/public/components/custom_threshold/components/threshold.tsx
View file

@ -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: (
<span>
{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}
</span>
),
color,
value,
value: value ?? NO_DATA_VALUE,
valueFormatter,
icon: ({ width, height, color: iconColor }) => (
<EuiIcon width={width} height={height} color={iconColor} type="alert" />