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

[Alert details page] [Latency threshold] Fix recovered alert annotation (#182752)

Browse source 
Fixes https://github.com/elastic/kibana/issues/180712

### Recovered alert
<img width="1224" alt="Screenshot 2024-05-07 at 10 46 37"
src="667403b1-751e-4fe2-8c7a-68afa913af60">

### Active alert
<img width="1221" alt="Screenshot 2024-05-07 at 10 47 45"
src="8c56c276-85dc-4b0c-b5d7-d0b2d6ebf6be">
This commit is contained in:
Bena Kansara 2024-05-07 12:05:15 +02:00 • committed by GitHub
parent f17953a097
commit 8a3ce75f45
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 11 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

2
x-pack/packages/observability/alert_details/src/components/alert_active_time_range_annotation.tsx
View file

@ -37,7 +37,7 @@ export function AlertActiveTimeRangeAnnotation({ alertStart, alertEnd, color, id
details: RECT_ANNOTATION_TITLE,
},
]}
style={{ fill: color, opacity: 0.1 }}
style={{ fill: color, opacity: 1 }}
/>
);
}

4
x-pack/packages/observability/alert_details/src/components/alert_threshold_time_range_rect.tsx
View file

@ -10,7 +10,6 @@ import { RectAnnotation } from '@elastic/charts';
import { i18n } from '@kbn/i18n';
interface Props {
alertStarted: number;
color: string;
id: string;
threshold: number;
@ -23,7 +22,7 @@ const RECT_ANNOTATION_TITLE = i18n.translate(
}
);
export function AlertThresholdTimeRangeRect({ alertStarted, color, id, threshold }: Props) {
export function AlertThresholdTimeRangeRect({ color, id, threshold }: Props) {
return (
<RectAnnotation
id={id}
@ -32,7 +31,6 @@ export function AlertThresholdTimeRangeRect({ alertStarted, color, id, threshold
{
coordinates: {
y0: threshold,
x1: alertStarted,
},
details: RECT_ANNOTATION_TITLE,
},

13
x-pack/plugins/observability_solution/apm/public/components/alerting/ui_components/alert_details_app_section/latency_chart.tsx
View file

@ -5,12 +5,12 @@
* 2.0.
*/
import { Theme } from '@elastic/charts';
import { RecursivePartial } from '@elastic/eui';
import { RecursivePartial, transparentize } from '@elastic/eui';
import React, { useMemo } from 'react';
import { EuiFlexItem, EuiPanel, EuiFlexGroup, EuiTitle } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { getDurationFormatter } from '@kbn/observability-plugin/common';
import { ALERT_RULE_TYPE_ID, ALERT_EVALUATION_THRESHOLD } from '@kbn/rule-data-utils';
import { ALERT_RULE_TYPE_ID, ALERT_EVALUATION_THRESHOLD, ALERT_END } from '@kbn/rule-data-utils';
import type { TopAlert } from '@kbn/observability-plugin/public';
import {
AlertActiveTimeRangeAnnotation,
@ -21,6 +21,8 @@ import {
import { useEuiTheme } from '@elastic/eui';
import { useKibana } from '@kbn/kibana-react-plugin/public';
import { UI_SETTINGS } from '@kbn/data-plugin/public';
import moment from 'moment';
import chroma from 'chroma-js';
import { filterNil } from '../../../shared/charts/latency_chart';
import { TimeseriesChart } from '../../../shared/charts/timeseries_chart';
import {
@ -112,6 +114,9 @@ function LatencyChart({
preferred,
]
);
const alertEnd = alert.fields[ALERT_END] ? moment(alert.fields[ALERT_END]).valueOf() : undefined;
const alertEvalThreshold = alert.fields[ALERT_EVALUATION_THRESHOLD];
const alertEvalThresholdChartData = alertEvalThreshold
@ -120,7 +125,6 @@ function LatencyChart({
key={'alertThresholdRect'}
id={'alertThresholdRect'}
threshold={alertEvalThreshold}
alertStarted={alert.start}
color={euiTheme.colors.danger}
/>,
<AlertThresholdAnnotation
@ -137,7 +141,8 @@ function LatencyChart({
return [
<AlertActiveTimeRangeAnnotation
alertStart={alert.start}
color={euiTheme.colors.danger}
alertEnd={alertEnd}
color={chroma(transparentize('#F04E981A', 0.2)).hex().toUpperCase()}
id={'alertActiveRect'}
key={'alertActiveRect'}
/>,