Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(slo): improve burn rate panel #197339

Merged
merged 19 commits into from
Nov 13, 2024
Merged
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Change line chart color based on burn rate status or SLO status when …
…used outside of the burn rate panel
  • Loading branch information
kdelemme committed Oct 31, 2024
commit a5fdf770c70bf9ee93593288be8dcb13d8cb1caf
Original file line number Diff line number Diff line change
@@ -153,6 +153,7 @@ export function ErrorRatePanel({ alert, slo, isLoading }: Props) {
dataTimeRange={dataTimeRange}
alertTimeRange={alertTimeRange}
threshold={actionGroupWindow!.burnRateThreshold}
variant="danger"
/>
</EuiFlexItem>
</EuiFlexGroup>
Original file line number Diff line number Diff line change
@@ -21,6 +21,7 @@ interface Props {
alertTimeRange?: TimeRange;
annotations?: AlertAnnotation[];
onBrushed?: (timeBounds: TimeBounds) => void;
variant?: 'success' | 'danger';
}

export function ErrorRateChart({
@@ -30,6 +31,7 @@ export function ErrorRateChart({
alertTimeRange,
annotations,
onBrushed,
variant = 'success',
}: Props) {
const {
lens: { EmbeddableComponent },
@@ -40,6 +42,7 @@ export function ErrorRateChart({
alertTimeRange,
dataTimeRange,
annotations,
variant,
});
const delayInSeconds = getDelayInSecondsFromSLO(slo);

Original file line number Diff line number Diff line change
@@ -31,6 +31,7 @@ interface Props {
dataTimeRange: TimeRange;
alertTimeRange?: TimeRange;
annotations?: AlertAnnotation[];
variant: 'success' | 'danger';
}

export function useLensDefinition({
@@ -39,9 +40,12 @@ export function useLensDefinition({
dataTimeRange,
alertTimeRange,
annotations,
variant,
}: Props): TypedLensByValueInput['attributes'] {
const { euiTheme } = useEuiTheme();

const lineColor = variant === 'danger' ? euiTheme.colors.danger : euiTheme.colors.success;

const interval = getLensDefinitionInterval(dataTimeRange, slo);

return {
@@ -92,7 +96,7 @@ export function useLensDefinition({
yConfig: [
{
forAccessor: '9f69a7b0-34b9-4b76-9ff7-26dc1a06ec14',
color: euiTheme.colors.primary,
color: lineColor,
},
],
},
Original file line number Diff line number Diff line change
@@ -14,6 +14,7 @@ import { ErrorRateChart } from '../../../../components/slo/error_rate_chart';
import { useFetchSloBurnRates } from '../../../../hooks/use_fetch_slo_burn_rates';
import { BurnRateWindow, useFetchBurnRateWindows } from '../../hooks/use_fetch_burn_rate_windows';
import { BurnRateStatus } from './burn_rate_status';
import { getStatus } from './utils';

interface Props {
slo: SLOWithSummaryResponse;
@@ -48,6 +49,8 @@ export function BurnRatePanel({ slo, isAutoRefreshing }: Props) {
data?.burnRates.find((curr) => curr.name === shortWindowName(selectedWindow.name))?.burnRate ??
0;

const currentStatus = getStatus(threshold, longWindowBurnRate, shortWindowbBurnRate);

return (
<EuiPanel paddingSize="m" color="transparent" hasBorder data-test-subj="burnRatePanel">
<EuiFlexGroup direction="column" gutterSize="m">
@@ -97,6 +100,7 @@ export function BurnRatePanel({ slo, isAutoRefreshing }: Props) {
to: new Date(),
}}
threshold={threshold}
variant={currentStatus === 'BREACHED' ? 'danger' : 'success'}
/>
</EuiFlexItem>
</EuiFlexGroup>
Original file line number Diff line number Diff line change
@@ -18,6 +18,7 @@ import numeral from '@elastic/numeral';
import { i18n } from '@kbn/i18n';
import React from 'react';
import { BurnRateWindow } from '../../hooks/use_fetch_burn_rate_windows';
import { getStatus } from './utils';

export interface BurnRateParams {
isLoading: boolean;
@@ -26,7 +27,7 @@ export interface BurnRateParams {
shortWindowBurnRate: number;
}

type Status = 'BREACHED' | 'RECOVERING' | 'INCREASING' | 'ACCEPTABLE';
export type Status = 'BREACHED' | 'RECOVERING' | 'INCREASING' | 'ACCEPTABLE';

export function BurnRateStatus({
selectedWindow,
@@ -84,25 +85,6 @@ export function BurnRateStatus({
);
}

function getStatus(
threshold: number,
longWindowBurnRate: number,
shortWindowBurnRate: number
): Status {
const isLongWindowBurnRateAboveThreshold = longWindowBurnRate > threshold;
const isShortWindowBurnRateAboveThreshold = shortWindowBurnRate > threshold;
const areBothBurnRatesAboveThreshold =
isLongWindowBurnRateAboveThreshold && isShortWindowBurnRateAboveThreshold;

return areBothBurnRatesAboveThreshold
? 'BREACHED'
: isLongWindowBurnRateAboveThreshold && !isShortWindowBurnRateAboveThreshold
? 'RECOVERING'
: !isLongWindowBurnRateAboveThreshold && isShortWindowBurnRateAboveThreshold
? 'INCREASING'
: 'ACCEPTABLE';
}

function getColor(status: Status) {
return status === 'BREACHED' ? 'danger' : status === 'INCREASING' ? 'warning' : 'success';
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0; you may not use this file except in compliance with the Elastic License
* 2.0.
*/

import type { Status } from './burn_rate_status';

export function getStatus(
threshold: number,
longWindowBurnRate: number,
shortWindowBurnRate: number
): Status {
const isLongWindowBurnRateAboveThreshold = longWindowBurnRate > threshold;
const isShortWindowBurnRateAboveThreshold = shortWindowBurnRate > threshold;
const areBothBurnRatesAboveThreshold =
isLongWindowBurnRateAboveThreshold && isShortWindowBurnRateAboveThreshold;

return areBothBurnRatesAboveThreshold
? 'BREACHED'
: isLongWindowBurnRateAboveThreshold && !isShortWindowBurnRateAboveThreshold
? 'RECOVERING'
: !isLongWindowBurnRateAboveThreshold && isShortWindowBurnRateAboveThreshold
? 'INCREASING'
: 'ACCEPTABLE';
}
Original file line number Diff line number Diff line change
@@ -94,7 +94,12 @@ export function SLODetailsHistory({ slo, isAutoRefreshing, selectedTabId }: Prop
</h2>
</EuiTitle>
</EuiFlexItem>
<ErrorRateChart slo={slo} dataTimeRange={range} onBrushed={onBrushed} />
<ErrorRateChart
slo={slo}
dataTimeRange={range}
onBrushed={onBrushed}
variant={['VIOLATED', 'DEGRADING'].includes(slo.summary.status) ? 'danger' : 'success'}
/>
</EuiFlexGroup>
</EuiPanel>