From 134012be32c2ede76ba700a089bee7a2b2afe0cb Mon Sep 17 00:00:00 2001
From: Dominique Clarke <dominique.clarke@elastic.co>
Date: Mon, 11 Dec 2023 09:12:14 -0500
Subject: [PATCH] [SLO] adjust burn rate rule number selector for budget
 consumed and burn rate threshold (#172526)

## Summary

Resolves https://github.com/elastic/kibana/issues/172400

Adjusts the burn rate rule budget consumed and burn rate threshold text
box to format only on blur.

Removes the dependency on numeral in favor of using `toFixed`.

### Testing

In order to test, you'll need to create a SLO burn rate rule.

If you currently have SLOs set up, you can either do so by going to the
observability rules management page and selecting the SLO burn rate
rule.

If you do not have SLOs set up, you can go to the SLO page, create an
SLI and make sure the `create burn rate rule` checkbox is checked. The
rule creation flyout will then appear.

In the burn rate windows, ensure that you are able to change the burn
rate threshold or budget consumed easily. When the field is blurred, the
value should be formatted.

Co-authored-by: Shahzad <shahzad31comp@gmail.com>
---
 .../burn_rate_rule_editor/budget_consumed.tsx       | 13 ++++++++++---
 .../components/burn_rate_rule_editor/burn_rate.tsx  | 13 ++++++++++---
 2 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/x-pack/plugins/observability/public/components/burn_rate_rule_editor/budget_consumed.tsx b/x-pack/plugins/observability/public/components/burn_rate_rule_editor/budget_consumed.tsx
index 85806a8b8d4f5..005cefec1e30f 100644
--- a/x-pack/plugins/observability/public/components/burn_rate_rule_editor/budget_consumed.tsx
+++ b/x-pack/plugins/observability/public/components/burn_rate_rule_editor/budget_consumed.tsx
@@ -8,7 +8,6 @@
 import { EuiFieldNumber, EuiFormRow, EuiIconTip } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React, { ChangeEvent, useState } from 'react';
-import numeral from '@elastic/numeral';
 
 interface Props {
   initialBurnRate?: number;
@@ -28,6 +27,7 @@ export function BudgetConsumed({
   const [budgetConsumed, setBudgetConsumed] = useState<number>(
     ((initialBurnRate * longLookbackWindowInHours) / sloTimeWindowInHours) * 100
   );
+  const [formattedValue, setFormattedValue] = useState<string>(budgetConsumed.toFixed(2));
   const hasError = errors !== undefined && errors.length > 0;
 
   const onBudgetConsumedChanged = (event: ChangeEvent<HTMLInputElement>) => {
@@ -60,8 +60,15 @@ export function BudgetConsumed({
         step={0.01}
         min={0.01}
         max={100}
-        value={numeral(budgetConsumed).format('0[.0]')}
-        onChange={(event) => onBudgetConsumedChanged(event)}
+        value={formattedValue}
+        onChange={(event) => {
+          onBudgetConsumedChanged(event);
+          setFormattedValue(event.target.value);
+        }}
+        onBlur={(event) => {
+          const value = event.target.value;
+          setFormattedValue(Number(value).toFixed(2));
+        }}
         data-test-subj="budgetConsumed"
       />
     </EuiFormRow>
diff --git a/x-pack/plugins/observability/public/components/burn_rate_rule_editor/burn_rate.tsx b/x-pack/plugins/observability/public/components/burn_rate_rule_editor/burn_rate.tsx
index ac7b92950fc96..1e76ddec456e2 100644
--- a/x-pack/plugins/observability/public/components/burn_rate_rule_editor/burn_rate.tsx
+++ b/x-pack/plugins/observability/public/components/burn_rate_rule_editor/burn_rate.tsx
@@ -8,7 +8,6 @@
 import { EuiFieldNumber, EuiFormRow, EuiIconTip } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React, { ChangeEvent, useState } from 'react';
-import numeral from '@elastic/numeral';
 
 interface Props {
   initialBurnRate?: number;
@@ -20,6 +19,7 @@ interface Props {
 export function BurnRate({ onChange, initialBurnRate = 1, maxBurnRate, errors }: Props) {
   const [burnRate, setBurnRate] = useState<number>(initialBurnRate);
   const hasError = errors !== undefined && errors.length > 0;
+  const [formattedValue, setFormattedValue] = useState<string>(burnRate.toFixed(2));
 
   const onBurnRateChange = (event: ChangeEvent<HTMLInputElement>) => {
     const value = Number(event.target.value);
@@ -51,8 +51,15 @@ export function BurnRate({ onChange, initialBurnRate = 1, maxBurnRate, errors }:
         step={0.01}
         min={0.01}
         max={maxBurnRate}
-        value={numeral(burnRate).format('0[.0]')}
-        onChange={(event) => onBurnRateChange(event)}
+        value={formattedValue}
+        onChange={(event) => {
+          onBurnRateChange(event);
+          setFormattedValue(event.target.value);
+        }}
+        onBlur={(event) => {
+          const value = event.target.value;
+          setFormattedValue(Number(value).toFixed(2));
+        }}
         data-test-subj="burnRate"
       />
     </EuiFormRow>