Change line chart color based on burn rate status or SLO status when …

…used outside of the burn rate panel
elastic · Oct 31, 2024 · a5fdf77 · a5fdf77
1 parent f1f10fb
commit a5fdf77
Show file tree

Hide file tree

Showing 7 changed files with 48 additions and 22 deletions.
diff --git a/...y_solution/slo/public/components/alert_details/components/error_rate/error_rate_panel.tsx b/...y_solution/slo/public/components/alert_details/components/error_rate/error_rate_panel.tsx
@@ -153,6 +153,7 @@ export function ErrorRatePanel({ alert, slo, isLoading }: Props) {
               dataTimeRange={dataTimeRange}
               alertTimeRange={alertTimeRange}
               threshold={actionGroupWindow!.burnRateThreshold}
+              variant="danger"
             />
           </EuiFlexItem>
         </EuiFlexGroup>

diff --git a/...ns/observability_solution/slo/public/components/slo/error_rate_chart/error_rate_chart.tsx b/...ns/observability_solution/slo/public/components/slo/error_rate_chart/error_rate_chart.tsx
@@ -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);
 

diff --git a/.../observability_solution/slo/public/components/slo/error_rate_chart/use_lens_definition.ts b/.../observability_solution/slo/public/components/slo/error_rate_chart/use_lens_definition.ts
@@ -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,
               },
             ],
           },

diff --git a/...lity_solution/slo/public/pages/slo_details/components/burn_rate_panel/burn_rate_panel.tsx b/...lity_solution/slo/public/pages/slo_details/components/burn_rate_panel/burn_rate_panel.tsx
@@ -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>

diff --git a/...ity_solution/slo/public/pages/slo_details/components/burn_rate_panel/burn_rate_status.tsx b/...ity_solution/slo/public/pages/slo_details/components/burn_rate_panel/burn_rate_status.tsx
@@ -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';
 }

diff --git a/...s/observability_solution/slo/public/pages/slo_details/components/burn_rate_panel/utils.ts b/...s/observability_solution/slo/public/pages/slo_details/components/burn_rate_panel/utils.ts
@@ -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';
+}
diff --git a/...vability_solution/slo/public/pages/slo_details/components/history/slo_details_history.tsx b/...vability_solution/slo/public/pages/slo_details/components/history/slo_details_history.tsx
@@ -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>