mirror of
https://github.com/elastic/kibana.git
synced 2025-04-23 09:19:04 -04:00
[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:
parent
a2fe6f3ca5
commit
d06787d7ee
2 changed files with 36 additions and 13 deletions
|
@ -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" />
|
||||
|
|
|
@ -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" />
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue