Skip to content

Commit

Permalink
[8.x] [Custom threshold/Metric threshold] Display No Data in Threshol…
Browse files Browse the repository at this point in the history 
…d breached component (elastic#209561) (elastic#209661)

# Backport

This will backport the following commits from `main` to `8.x`:
- [[Custom threshold/Metric threshold] Display No Data in Threshold
breached component
(elastic#209561)](elastic#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":"[email protected]"},"sourceCommit":{"committedDate":"2025-02-04T20:03:48Z","message":"[Custom
threshold/Metric threshold] Display No Data in Threshold breached
component (elastic#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 (elastic#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 (elastic#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 <[email protected]>
  • Loading branch information
@kibanamachine @benakansara
kibanamachine and benakansara authored Feb 4, 2025
1 parent 1f7b84c commit 90da5f4
Show file tree
Hide file tree
Showing 2 changed files with 36 additions and 13 deletions.
14 changes: 12 additions & 2 deletions x-pack/solutions/observability/plugins/infra/public/alerting/common/components/threshold.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -63,7 +71,7 @@ export const Threshold = ({
[
{
title,
extra: (
extra: value ? (
<>
{i18n.translate('xpack.infra.alerting.thresholdExtraTitle', {
values: {
Expand All @@ -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" />
Expand Down
35 changes: 24 additions & 11 deletions ...ability/plugins/observability/public/components/custom_threshold/components/threshold.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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" />
Expand Down

0 comments on commit 90da5f4

Please sign in to comment.