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

# Backport

This will backport the following commits from `main` to `8.17`:
- [[Custom threshold/Metric threshold] Display No Data in Threshold
breached component
(#209561)](https://github.com/elastic/kibana/pull/209561)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Bena
Kansara","email":"69037875+benakansara@users.noreply.github.com"},"sourceCommit":{"committedDate":"2025-02-04T20:03:48Z","message":"[Custom
threshold/Metric threshold] Display No Data in Threshold breached
component (#209561)\n\nResolves
https://github.com/elastic/kibana/issues/196062\r\nFixes
https://github.com/elastic/kibana/issues/209515\r\n\r\nDisplays \"Alert
when No Data\" in Threshold breached component for no\r\ndata
alerts\r\n\r\n- ### Custom threshold alert details page\r\n<img
width=\"1643\" alt=\"Screenshot 2025-02-04 at 3 55
32 PM\"\r\nsrc=\"https://github.com/user-attachments/assets/5fbf27d2-dcb5-40d1-b466-c8bcc2d700c9\"\r\n/>\r\n\r\n-
### Metric threshold alert details page\r\n<img width=\"1645\"
alt=\"Screenshot 2025-02-04 at 3 54
58 PM\"\r\nsrc=\"https://github.com/user-attachments/assets/8968c803-ff73-4f7d-8501-f6a1e7e16e8c\"\r\n/>","sha":"551d31b0ffffd48d221b09acafc740c1d514ac75","branchLabelMapping":{"^v9.1.0$":"main","^v8.19.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:fix","backport:prev-minor","backport:prev-major","Team:obs-ux-management","v9.1.0"],"title":"[Custom
threshold/Metric threshold] Display No Data in Threshold breached
component","number":209561,"url":"https://github.com/elastic/kibana/pull/209561","mergeCommit":{"message":"[Custom
threshold/Metric threshold] Display No Data in Threshold breached
component (#209561)\n\nResolves
https://github.com/elastic/kibana/issues/196062\r\nFixes
https://github.com/elastic/kibana/issues/209515\r\n\r\nDisplays \"Alert
when No Data\" in Threshold breached component for no\r\ndata
alerts\r\n\r\n- ### Custom threshold alert details page\r\n<img
width=\"1643\" alt=\"Screenshot 2025-02-04 at 3 55
32 PM\"\r\nsrc=\"https://github.com/user-attachments/assets/5fbf27d2-dcb5-40d1-b466-c8bcc2d700c9\"\r\n/>\r\n\r\n-
### Metric threshold alert details page\r\n<img width=\"1645\"
alt=\"Screenshot 2025-02-04 at 3 54
58 PM\"\r\nsrc=\"https://github.com/user-attachments/assets/8968c803-ff73-4f7d-8501-f6a1e7e16e8c\"\r\n/>","sha":"551d31b0ffffd48d221b09acafc740c1d514ac75"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v9.1.0","branchLabelMappingKey":"^v9.1.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/209561","number":209561,"mergeCommit":{"message":"[Custom
threshold/Metric threshold] Display No Data in Threshold breached
component (#209561)\n\nResolves
https://github.com/elastic/kibana/issues/196062\r\nFixes
https://github.com/elastic/kibana/issues/209515\r\n\r\nDisplays \"Alert
when No Data\" in Threshold breached component for no\r\ndata
alerts\r\n\r\n- ### Custom threshold alert details page\r\n<img
width=\"1643\" alt=\"Screenshot 2025-02-04 at 3 55
32 PM\"\r\nsrc=\"https://github.com/user-attachments/assets/5fbf27d2-dcb5-40d1-b466-c8bcc2d700c9\"\r\n/>\r\n\r\n-
### Metric threshold alert details page\r\n<img width=\"1645\"
alt=\"Screenshot 2025-02-04 at 3 54
58 PM\"\r\nsrc=\"https://github.com/user-attachments/assets/8968c803-ff73-4f7d-8501-f6a1e7e16e8c\"\r\n/>","sha":"551d31b0ffffd48d221b09acafc740c1d514ac75"}}]}]
BACKPORT-->

Co-authored-by: Bena Kansara <69037875+benakansara@users.noreply.github.com>
This commit is contained in:
Kibana Machine 2025-02-05 09:05:22 +11:00 committed by GitHub
parent a2fe6f3ca5
commit d06787d7ee
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 36 additions and 13 deletions

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,
@ -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 }) => (
<EuiIcon width={width} height={height} color={iconColor} type="alert" />

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" />